/* ==================================================================
   assets/hero-layouts.css — the three interchangeable hero designs.

   One layout is active at a time (chosen in the Home Control Center),
   so these blocks never compete. Shared hero pieces — the countdown,
   pills, side image, video background and lightbox — stay in
   events.css; this file only holds what makes each LAYOUT different.

   Colours come from the theme tokens (--primary, --accent, --hero-*),
   so every layout re-skins with the conference identity.
   ================================================================== */

/* ── Shared across layouts ──────────────────────────────────────── */

/* Accent words inside a hero title (owner picks the words in admin). */
.hero-accent { color: var(--hero-accent, var(--accent, #c9a24a)); }

/* Secondary CTA (brochure) — outlined so it reads as the quieter of
   the two buttons next to the solid register button. */
.hero-cta-brochure {
  background: transparent;
  color: var(--hero-text, #fff);
  border: 1.5px solid rgba(255, 255, 255, .38);
}
.hero-cta-brochure:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT 2 — "المقسوم": text column beside a raised countdown card
   ══════════════════════════════════════════════════════════════════ */
.hero-split-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-split .hero-title { margin: 0 0 18px; }
.hero-split .hero-subtitle {
  color: var(--hero-text, rgba(255, 255, 255, .9));
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0 0 26px;
  max-width: 560px;
}

/* Meta row: date + venue, each an icon beside a label/value pair. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 20px 0;
  margin-bottom: 26px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.hero-meta-item { display: flex; align-items: center; gap: 12px; }
.hero-meta-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .14);
  color: var(--hero-meta-icon, var(--accent, #c9a24a));
  font-size: 1rem;
}
.hero-meta-label {
  display: block;
  font-size: .75rem;
  color: var(--hero-text, rgba(255, 255, 255, .65));
  opacity: .8;
  margin-bottom: 2px;
}
.hero-meta-value {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--hero-title, #fff);
}

.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* The raised card holding the logo + countdown. */
.hero-card {
  background: var(--hero-card-bg, rgba(255, 255, 255, .10));
  border: 1px solid var(--hero-card-border, rgba(255, 255, 255, .18));
  border-radius: var(--hero-card-radius, 20px);
  padding: 30px 26px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
/* Width is set inline from the admin ("حجم صورة البطاقة"); height follows
   so portraits and wide logos both sit correctly. */
/* Width comes from the admin ("حجم صورة البطاقة") as --card-logo-w, but is
   capped at 100% of the card's inner width. Without the cap a large desktop
   value (e.g. 400px) overflowed the card on a phone, pushing the image past
   the page edge — only ~312px is actually available inside the card at 390px
   viewport once container and card padding are subtracted. */
.hero-card-logo { max-width: min(var(--card-logo-w, 190px), 100%); height: auto;
  margin: 0 auto 18px; display: block; }
.hero-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hero-title, #fff);
  margin: 0 0 18px;
}
/* Inside the card the countdown centres and wraps rather than sitting
   in one long row like the classic layout. */
.hero-card .countdown { justify-content: center; margin: 0; }
.hero-card .countdown-sep { display: none; }
.hero-card .countdown-unit { min-width: 68px; }

@media (max-width: 900px) {
  .hero-split-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-meta { gap: 20px; }
  .hero-card { order: -1; }
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT 3 — "فيديو كامل": full-bleed video behind centred content
   ══════════════════════════════════════════════════════════════════ */
.hero-fullvideo { position: relative; }
/* Scrim keeps text readable over moving footage. Its strength is set
   per-site via --hero-overlay (inline on the section). */
.hero-video-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: var(--hero-scrim, rgba(0, 0, 0, .55));
}
/* Layout 3 already paints .hero-video-scrim over the whole section, so the
   shared background scrim would stack a second dimming pass on top of the
   image and make it read as much darker here than in the other layouts.
   One scrim, not two — the owner's opacity dial stays the only difference. */
.hero-fullvideo .hero-bg::after { background: transparent; }
.hero-fullvideo .container { position: relative; z-index: 2; }
.hero-fullvideo-content {
  max-width: var(--hero-fv-width, 860px);
  margin: 0 auto;
  text-align: center;
}
.hero-fullvideo .hero-title { margin: 0 0 18px; }
.hero-fullvideo .hero-subtitle {
  color: var(--hero-text, rgba(255, 255, 255, .92));
  font-size: 1.08rem;
  line-height: 1.9;
  margin: 0 auto 26px;
  max-width: 680px;
}
.hero-fv-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-bottom: 24px;
}
.hero-fullvideo .countdown { justify-content: center; }
.hero-fullvideo .hero-actions { justify-content: center; }

@media (max-width: 640px) {
  .hero-fullvideo-content { text-align: center; }
  .hero-fv-meta { gap: 8px; }
}

/* ── Layouts 2 & 3 on phones ──────────────────────────────────────
   These layouts don't inherit the classic hero's column cap, but the
   countdown and button rows still need phone treatment: an even grid
   for the units and full-width stacked CTAs. */
@media (max-width: 820px) {
  .hero-split, .hero-fullvideo { padding: 40px 0 48px; min-height: auto; }

  .hero-split .hero-title,
  .hero-fullvideo .hero-title { font-size: clamp(1.75rem, 7.5vw, 2.5rem); line-height: 1.25; }
  .hero-split .hero-subtitle,
  .hero-fullvideo .hero-subtitle { font-size: 1rem; line-height: 1.85; max-width: 100%; }

  /* Meta row: stack so the label/value pairs aren't crushed side by side. */
  .hero-meta { flex-direction: column; gap: 14px; padding: 16px 0; }

  .hero-card { padding: 22px 18px; }
  .hero-card .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .hero-card .countdown-unit { min-width: 0; padding: 10px 4px; }

  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn,
  .hero-buttons .hero-play { width: 100%; justify-content: center; white-space: normal; }

  .hero-fv-meta .hero-pill { width: auto; }
  .hero-fullvideo .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-fullvideo .hero-actions .btn { width: 100%; justify-content: center; }
}