/* ==================================================================
   assets/events.css — conference-specific components for Mafaza Events CMS.
   Builds on style.css + theme.css.php tokens (--primary, --secondary,
   --accent, --ink, --muted, --line, --surface, --surface-2,
   --primary-soft, --grad-hero, --on-primary...). RTL-first.
   ================================================================== */

/* ---- shared section rhythm ---- */
.evt-sec { padding: 72px 0; }
.evt-sec-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.evt-eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 12px;
}
.evt-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: var(--secondary); margin: 0 0 14px; line-height: 1.2; }
/* Optional section description under any title. Renders only when the owner
   sets one (blank = nothing). Italic + muted to match the ICDR reference feel;
   centered to sit under the centered section titles. */
.evt-sec-desc { font-size: 1.05rem; line-height: 1.9; color: var(--muted, #3a4a40);
  font-style: italic; max-width: 720px; margin: 0 auto; font-weight: 400; }
@media (max-width: 640px){ .evt-sec-desc { font-size: .98rem; } }
.evt-intro { color: var(--muted); font-size: 1.02rem; line-height: 1.8; }

/* ── About section: ICDR-style two-column image + text ────────────────
   Text column (title + green divider + body + button) beside an image
   column (rounded framed photo + accent bar + italic caption). Theme-aware
   (uses --primary) and RTL/LTR-safe via logical properties. */
.about-cols { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:start; }
/* The image/text split is set inline per-site from the About editor
   ("عرض الصورة" %). The image column is first, so the percentage applies
   to the image and the text takes the remainder. */
.about-cols.no-image { grid-template-columns:1fr; max-width:820px; text-align:center; }
/* Small optical nudge only. This was 80px, set when the media beside it was
   a tall portrait photo and the title needed to drop to roughly head height.
   With the framed media that padding just left the copy floating well below
   the frame's top edge, so it is now a light alignment tweak. */
.about-text-col { padding-top:24px; }
@media (max-width:860px){ .about-text-col { padding-top:0; } }
.about-title { font-size:1.9rem; font-weight:900; color:var(--primary); line-height:1.3; margin:0 0 14px; }
.about-divider { width:48px; height:3px; border-radius:3px; margin:0 0 18px;
  background:var(--brand-primary);
  background:linear-gradient(to left, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 30%, transparent)); }
.about-cols.no-image .about-divider { margin-inline:auto; }
.about-body { color:var(--secondary, #3a3a3a); font-size:1rem; line-height:1.9; white-space:pre-line; }
.about-more { margin-top:22px; }
.about-image-col {
  position:relative;
  /* Ceiling for the portrait frame. Without it the media follows the grid
     column, which on a 1140px container made a ~568px-wide, ~712px-tall
     block that dominated the section. The "عرض الصورة" control still tunes
     the split; this just stops it growing past a comfortable size.
     468 x 585 at 4:5 is the target proportion. */
  max-width:var(--about-media-max, 468px);
  margin-inline-start:auto;
}
html[dir="ltr"] .about-image-col { margin-inline-start:0; margin-inline-end:auto; }
.about-image-wrap { position:relative; border-radius:16px; overflow:hidden; }
.about-image-wrap img { width:100%; height:auto; display:block; border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.15); object-fit:cover; object-position:top center; }
/* accent bar on the outer edge of the photo (right in RTL, left in LTR) */
.about-image-wrap::before { content:''; position:absolute; top:20px; inset-inline-end:-12px;
  width:4px; height:calc(100% - 120px); border-radius:4px; z-index:1;
  background:var(--brand-primary);
  background:linear-gradient(to bottom, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 20%, transparent)); }
.about-caption { font-size:.8rem; font-style:italic; color:var(--muted, #888); line-height:1.6;
  margin:10px 4px 0; text-align:start; }
@media (max-width:860px){
  /* !important because the column split is applied as an inline style, which
     would otherwise beat this media query and keep two cramped columns. */
  .about-cols { grid-template-columns:1fr !important; gap:28px; }
  /* Stacked: centre the frame and let it use the available width rather than
     sitting off to one side at its desktop ceiling. */
  .about-image-col { max-width:520px; margin-inline:auto !important; }
  .about-image-wrap::before { display:none; }
  .about-title { font-size:1.6rem; }
}
.evt-intro.evt-quote {
  border-inline-start: 3px solid var(--brand-primary); padding-inline-start: 18px;
  text-align: start; font-style: italic; max-width: 720px; margin-inline: auto;
}

/* ---- important dates strip ---- */
.dates-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.date-chip {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 18px; text-align: center; transition: transform .2s, box-shadow .2s;
}
.date-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.date-chip i { font-size: 1.5rem; color: var(--primary); margin-bottom: 10px; }
.date-chip .dc-label { font-weight: 700; color: var(--secondary); font-size: .98rem; margin-bottom: 6px; }
.date-chip .dc-value { color: var(--muted); font-size: .9rem; }

/* ---- stats: conferences in numbers ---- */
.stats-band {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
.stat-cell { padding: 30px 18px; text-align: center; position: relative; }
.stat-cell + .stat-cell::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 22%; height: 56%;
  width: 1px; background: var(--line);
}
.stat-cell i { font-size: 1.5rem; color: var(--primary); margin-bottom: 10px; display: block; }
.stat-cell .stat-num { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: var(--primary); line-height: 1;
  /* Tabular figures keep every digit the same width, so the number
     doesn't jitter as it counts up. */
  font-variant-numeric: tabular-nums; }
.stat-cell .stat-lbl { margin-top: 8px; color: var(--muted); font-size: .9rem; }
@media (max-width: 720px){ .stats-band { grid-template-columns: repeat(2,1fr); } .stat-cell:nth-child(3)::before,.stat-cell:nth-child(1)::before{display:none;} }

/* ---- conference history timeline ---- */
.history-rail { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px 16px; scroll-snap-type: x mandatory; }
.history-node { flex: 0 0 auto; scroll-snap-align: start; text-align: center; }
.history-card {
  min-width: 130px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; transition: .2s;
}
.history-card.is-active, .history-card:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--on-primary); }
.history-card .hc-ord { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.history-card .hc-year { font-size: 1.5rem; font-weight: 800; margin-top: 4px; }

/* ---- speakers grid ---- */
/* Three cards per row at most on desktop. An explicit cap rather than
   relying on a minmax value that happens to produce three: auto-fill alone
   gave five at the 1200px container, and would change again if the
   container width were ever adjusted. Below the breakpoints it steps down
   to two and then one. */
.speakers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .speakers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .speakers-grid { grid-template-columns: 1fr; } }
.speaker-card {
  background: #fff; border: 1px solid color-mix(in srgb, var(--brand-primary) 8%, var(--line,#e6ecea));
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.speaker-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px color-mix(in srgb, var(--brand-primary) 14%, transparent); }

/* Fixed photo height, so every card in a row starts its text at the same
   line. object-position sits slightly above centre because portraits are
   usually framed with the head in the upper third. */
.speaker-photo { height: 260px; overflow: hidden; display: flex; align-items: center;
  justify-content: center; background: color-mix(in srgb, var(--brand-primary) 16%, #fff); }
.speaker-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* Tight, deliberately small type. The refinement comes from the size
   hierarchy — name, role, organisation and topic each step down — not from
   decoration. */
.speaker-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.speaker-name { display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
  font-size: .9rem; font-weight: 800; color: var(--secondary); line-height: 1.35; }
.spk-name-txt { min-width: 0; }
/* Auto margin parks the flag on the far edge, so flags align down the
   column no matter how long each name is. */
.spk-flag-wrap { margin-inline-start: auto; flex-shrink: 0; display: inline-flex;
  line-height: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.spk-flag-wrap .flag { margin: 0; border-radius: 0; box-shadow: none; top: 0; }

.speaker-role { font-size: .72rem; font-weight: 600; color: var(--primary); line-height: 1.5; }
.speaker-org  { font-size: .68rem; color: var(--muted); line-height: 1.5; }

.spk-rule { height: 1px; background: color-mix(in srgb, var(--brand-primary) 10%, transparent); margin: 8px 0; }

/* The label is small and quiet; Arabic gets no letter-spacing or
   uppercase — both damage the script's joins and casing. */
.spk-topic-label { font-size: .6rem; font-weight: 700; color: var(--muted); }
.spk-topic-text { font-size: .72rem; color: var(--ink); line-height: 1.5; margin-top: 2px; flex: 1; }

/* flex:1 above pushes this to the card's bottom edge, so footers line up
   across the grid however long each topic runs. */
.spk-card-footer { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.spk-card-footer:empty { display: none; }
.spk-tag { font-size: .62rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.spk-tag-type { background: color-mix(in srgb, var(--brand-primary) 12%, #fff); color: var(--primary); }
.spk-tag-day  { background: var(--surface-2); color: var(--muted); }

.spk-more { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; color: var(--primary); }
.spk-more i { font-size: .72rem; transition: transform .2s ease; }
.speaker-card:hover .spk-more i { transform: translateX(-4px); }
html[dir="ltr"] .speaker-card:hover .spk-more i { transform: translateX(4px); }
.speaker-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.1); }
.speaker-social { margin-top: 12px; display: flex; gap: 10px; justify-content: center; }
.speaker-social a { color: var(--muted); font-size: 1rem; transition: color .2s; }
.speaker-social a:hover { color: var(--primary); }

/* ---- speaker profile ---- */
.spk-profile { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.spk-profile-photo { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.spk-profile-photo img { width: 100%; display: block; }
.spk-profile h1 { font-size: 2rem; color: var(--secondary); margin: 0 0 8px; }
.spk-profile .spk-role { color: var(--primary); font-weight: 600; font-size: 1.05rem; }
.spk-profile .spk-org { color: var(--muted); margin-top: 4px; }
.spk-bio { margin-top: 22px; line-height: 1.9; color: var(--ink); }
.spk-sessions { margin-top: 28px; }
.spk-sessions h3 { font-size: 1.1rem; color: var(--secondary); margin-bottom: 14px; }
@media (max-width: 720px){ .spk-profile { grid-template-columns: 1fr; } }

/* ---- agenda ---- */
.agenda-day { margin-bottom: 40px; }
.agenda-day-head {
  display: inline-flex; align-items: center; gap: 12px; background: var(--brand-primary);
  color: var(--on-primary); padding: 10px 22px; border-radius: 12px; font-weight: 700; margin-bottom: 20px;
}
.agenda-day-head .ad-date { opacity: .85; font-weight: 500; font-size: .9rem; }
.session {
  display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.session:last-child { border-bottom: none; }
.session-time { color: var(--primary); font-weight: 700; font-size: .95rem; }
.session-time .st-end { color: var(--muted); font-weight: 500; display: block; font-size: .82rem; }
.session-title { font-weight: 700; color: var(--secondary); font-size: 1.1rem; }
.session-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.session-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; padding: 3px 10px;
  border-radius: 20px; background: var(--primary-soft); color: var(--primary); font-weight: 600;
}
.session-badge.track { background: var(--accent-soft, #f3ecda); color: var(--secondary); }
.session-desc { color: var(--muted); margin-top: 10px; line-height: 1.7; font-size: .95rem; }
.session-speakers { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.session-speaker { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.session-speaker img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.session-speaker span { font-size: .88rem; font-weight: 600; }
@media (max-width: 620px){ .session { grid-template-columns: 1fr; gap: 6px; } }

/* ---- sponsors: boxed tier stack (ICDR pattern) ----------------------
   One white card holds every tier, separated by thin dividers, with the
   CTA banners attached directly beneath it. Logos are sized by HEIGHT
   with width:auto so each brand keeps its own proportions.            */
.sponsor-cta-wrap { max-width: 760px; margin: 0 auto; }
.sponsor-logo-box { background:#fff; border:1px solid var(--line); border-radius:16px 16px 0 0; padding:28px 32px; }
.sponsor-tier-group { width:100%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.sponsor-tier-label { font-size:.8rem; font-weight:700; color:var(--muted); margin:0; }
.sponsor-tier-divider { height:1px; background:var(--line); margin:20px auto; width:min(70%,340px); }
.sponsor-row { width:100%; display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px 32px; }
.sponsor-track { display:contents; }

/* ── Sponsor carousel ─────────────────────────────────────────────
   Only applied to tiers with enough logos to justify motion (see the
   threshold in the template). The row stops wrapping, the track holds
   two identical copies, and translating it by exactly -50% lands the
   second copy where the first began — so the loop has no visible jump.

   Motion pauses on hover and on keyboard focus, so a visitor can
   actually read a logo or tab to a sponsor link without chasing it. */
.sponsor-row.is-marquee {
  flex-wrap:nowrap; overflow:hidden; justify-content:flex-start;
  gap:0; position:relative;
  /* Fade the edges so logos enter and leave instead of being chopped. */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.sponsor-row.is-marquee .sponsor-track {
  display:flex; align-items:center; gap:0; flex:0 0 auto;
  will-change:transform;
  animation:sponsor-marquee var(--marquee-secs,30s) linear infinite;
}
.sponsor-row.is-marquee .sponsor-logo { padding-inline:26px; }
.sponsor-row.is-marquee:hover .sponsor-track,
.sponsor-row.is-marquee:focus-within .sponsor-track { animation-play-state:paused; }

/* RTL reads right-to-left, so the logos travel the other way. */
@keyframes sponsor-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
html[dir="rtl"] .sponsor-row.is-marquee .sponsor-track { animation-name:sponsor-marquee-rtl; }
@keyframes sponsor-marquee-rtl { from { transform:translateX(0); } to { transform:translateX(50%); } }

/* Anyone who has asked for less motion gets the static row back. */
@media (prefers-reduced-motion: reduce) {
  .sponsor-row.is-marquee { flex-wrap:wrap; justify-content:center; overflow:visible;
    -webkit-mask-image:none; mask-image:none; gap:20px 32px; }
  .sponsor-row.is-marquee .sponsor-track { animation:none; flex-wrap:wrap; justify-content:center; gap:20px 32px; }
  .sponsor-row.is-marquee .sponsor-logo { padding-inline:0; }
}
.sponsor-logo { flex:0 0 auto; margin:0; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; padding:0; transition:opacity .2s; }
.sponsor-logo:hover { opacity:1; box-shadow:none; }
.sponsor-logo img { width:auto; object-fit:contain; display:block; opacity:.85; transition:opacity .2s; }
.sponsor-logo:hover img { opacity:1; }

.sponsor-tier.tier-xl     .sponsor-logo img { height:56px; }
.sponsor-tier.tier-large  .sponsor-logo img { height:48px; }
.sponsor-tier.tier-medium .sponsor-logo img { height:42px; }
.sponsor-tier.tier-small  .sponsor-logo img { height:34px; }
@media (max-width:768px){
  .sponsor-logo-box { padding:22px 18px; }
  .sponsor-row { gap:16px 22px; }
  .sponsor-tier.tier-xl .sponsor-logo img     { height:44px; }
  .sponsor-tier.tier-large .sponsor-logo img  { height:40px; }
  .sponsor-tier.tier-medium .sponsor-logo img { height:36px; }
  .sponsor-tier.tier-small .sponsor-logo img  { height:30px; }
}

/* CTA banners (sponsor / exhibition) */
.cta-banner {
  max-width: 760px; margin-inline: auto; border-radius: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 28px; border-radius: 14px; margin-top: 16px; flex-wrap: wrap;
}
.cta-banner.cta-gold { background: var(--cta-gold-bg, var(--brand-accent)); color: var(--cta-gold-fg, var(--secondary)); }
.cta-banner.cta-primary { background: var(--cta-primary-bg, var(--brand-primary)); color: var(--cta-primary-fg, var(--on-primary)); }
.cta-banner .cta-txt b { font-size: 1.1rem; display: block; }
.cta-banner .cta-txt span { font-size: .9rem; opacity: .9; }
.cta-banner .btn { flex-shrink: 0; }

/* ---- organizing entities ---------------------------------------------
   Logos sit in bordered boxes (ICDR pattern). The tooltip opens ABOVE the
   logo so it never pushes the row or covers the next item, and it is a
   vertical card with the entity name over its description.             */
.org-strip { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:14px; }

/* ICDR-style premium section header: a small accent star above the title,
   with an optional description below. Centered, generous spacing. */
.org-header { text-align:center; max-width:760px; margin:0 auto 40px; }
.org-star {
  font-size:1.6rem; line-height:1; color:var(--accent, #c9a24a); margin-bottom:14px;
  display:inline-block; animation:org-star-pulse 3s ease-in-out infinite;
}
@keyframes org-star-pulse { 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.15); opacity:1 } }
.org-title { margin:0 0 14px; }
.org-desc {
  /* Matches the ICDR reference: italic, aligned to the reading edge, with a
     colored accent bar on that edge — not centered. Uses logical properties
     so the bar sits on the right in RTL and the left in LTR automatically. */
  font-size:1.05rem; line-height:1.9; color:var(--muted, #3a4a40);
  font-style:italic; font-weight:400;
  max-width:860px; margin:0 auto; text-align:start;
  border-inline-start:3px solid var(--brand-primary, #1c7b43);
  padding-inline-start:20px;
}
@media (max-width:640px){ .org-desc { font-size:.98rem; } }
.org-logo { position:relative; display:flex; align-items:center; justify-content:center;
  width:150px; height:78px; padding:12px; background:#fff; border:1px solid var(--line);
  border-radius:12px; transition:border-color .2s, box-shadow .2s; }
.org-logo:hover { border-color:var(--brand-primary); box-shadow:0 8px 22px -12px rgba(0,0,0,.3); }
.org-logo img { max-height:100%; max-width:100%; object-fit:contain; filter:none; }

.org-logo[data-tip]::after,
.org-logo[data-tip]::before { opacity:0; visibility:hidden; transition:opacity .18s, visibility .18s; }
.org-logo[data-tip]::after {
  content: attr(data-tip);
  position:absolute; bottom:calc(100% + 12px); inset-inline-start:50%; transform:translateX(50%);
  width:250px; max-width:70vw; white-space:normal; text-align:start; line-height:1.7;
  background:var(--secondary); color:#fff; font-size:.78rem; font-weight:500;
  padding:12px 14px; border-radius:12px; box-shadow:0 14px 34px -12px rgba(0,0,0,.55); z-index:20;
}
[dir="ltr"] .org-logo[data-tip]::after { transform:translateX(-50%); }
/* little pointer under the card */
.org-logo[data-tip]::before {
  content:""; position:absolute; bottom:calc(100% + 5px); inset-inline-start:50%; transform:translateX(50%);
  border:7px solid transparent; border-top-color:var(--secondary); z-index:21;
}
[dir="ltr"] .org-logo[data-tip]::before { transform:translateX(-50%); }
.org-logo[data-tip]:hover::after,
.org-logo[data-tip]:hover::before { opacity:1; visibility:visible; }
@media (max-width:620px){
  .org-logo { width:118px; height:64px; }
  .org-logo[data-tip]::after { width:210px; font-size:.74rem; }
}

/* ---- structure / committees ---- */

.committee { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; margin-bottom: 20px; }
.committee h3 { font-size: 1.2rem; color: var(--secondary); margin: 0 0 6px; }
.committee-desc { color: var(--muted); margin-bottom: 18px; line-height: 1.7; }
.committee-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.committee-member { display: flex; flex-direction: column; padding: 12px 16px; background: var(--surface-2); border-radius: 10px; }
.committee-member b { color: var(--secondary); }
.committee-member span { color: var(--primary); font-size: .84rem; margin-top: 2px; }

/* ---- FAQ accordion ---- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: var(--surface); }
.faq-q { width: 100%; text-align: start; padding: 18px 22px; font-weight: 700; color: var(--secondary); background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 1rem; }
.faq-q i { transition: transform .25s; color: var(--primary); flex-shrink: 0; }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 22px 20px; color: var(--muted); line-height: 1.8; }

/* ---- downloads ---- */
.dl-group { margin-bottom: 34px; }
.dl-group-title { font-size: 1.05rem; font-weight: 700; color: var(--secondary); margin-bottom: 16px; }
.dl-item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; text-decoration: none; color: inherit; transition: .2s; }
.dl-item:hover { border-color: var(--brand-primary); transform: translateX(-3px); }
.dl-icon { font-size: 1.5rem; color: var(--primary); flex-shrink: 0; }
.dl-info b { display: block; color: var(--secondary); }
.dl-info span { color: var(--muted); font-size: .86rem; }
.dl-arrow { margin-inline-start: auto; color: var(--muted); }

/* ---- media center ---- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.media-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: .2s; }
.media-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.media-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-body { padding: 18px; }
.media-meta { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.media-title { font-weight: 700; color: var(--secondary); line-height: 1.5; }
.media-more { margin-top: 12px; color: var(--primary); font-size: .88rem; font-weight: 600; }

/* ---- strategic alignment (about) ---- */
.align-wrap { display: grid; grid-template-columns: 1fr 140px; gap: 30px; align-items: start; margin-bottom: 34px; }
.align-badge { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.align-badge img { max-width: 100%; }
.align-point { border-radius: 14px; padding: 26px 30px; margin-bottom: 18px; display: flex; gap: 22px; align-items: flex-start; }
.align-point.point-1 { background: var(--brand-primary); color: var(--on-primary); }
.align-point.point-2 { background: var(--surface); border: 1px solid var(--line); }
.align-point .ap-num { font-size: 2.4rem; font-weight: 800; opacity: .35; line-height: 1; flex-shrink: 0; }
.align-point.point-2 .ap-num { color: var(--secondary); }
.align-point-body { flex: 1; }
.align-point-body p { line-height: 1.8; margin: 0; }
.align-list { list-style: none; padding: 0; margin: 14px 0 0; }
.align-list li { position: relative; padding-inline-start: 22px; margin-bottom: 14px; line-height: 1.7; color: var(--ink); }
.align-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); }
@media (max-width: 720px){ .align-wrap { grid-template-columns: 1fr; } }

/* ---- research areas ---- */
.research-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.research-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.research-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.research-ord { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--brand-primary); color: var(--on-primary); padding: 4px 10px; border-radius: 6px; }
.research-name { font-weight: 700; color: var(--secondary); }
.research-items { list-style: none; padding: 16px 22px; margin: 0; }
.research-items li { position: relative; padding-inline-start: 18px; margin-bottom: 10px; color: var(--muted); line-height: 1.6; font-size: .95rem; }
.research-items li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); }

/* ---- conference themes timeline ---- */
.themes-rail { max-width: 900px; margin: 0 auto; position: relative; }
.themes-rail::before { content: ""; position: absolute; inset-inline-start: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.theme-node { position: relative; padding-inline-start: 40px; padding-bottom: 30px; }
.theme-node::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand-primary); }
.theme-ord { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
/* Optional icon on the rail — the same icon the homepage grid uses, so the
   two views of these rows stay recognisably the same content. */
.theme-icon { display:inline-grid; place-items:center; width:34px; height:34px; margin:6px 0 2px;
  border-radius:10px; background:color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color:var(--primary); font-size:.9rem; }
.theme-title { font-weight: 700; color: var(--secondary); margin: 4px 0 6px; font-size: 1.08rem; }
.theme-desc { color: var(--muted); line-height: 1.75; font-size: .96rem; }

/* ---- objectives grid ---- */
.objectives-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.objective { display: flex; gap: 16px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.objective .obj-num { font-size: 1.8rem; font-weight: 800; color: var(--primary-soft); line-height: 1; flex-shrink: 0; }
.objective p { margin: 0; line-height: 1.7; color: var(--ink); }

/* ---- target audience pills ---- */
.audience-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 900px; margin: 0 auto; }
.audience-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; padding: 12px 20px; font-weight: 600; color: var(--secondary); }
.audience-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); }

/* ---- participation fields ---- */
.participation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; max-width: 800px; margin: 0 auto 30px; }
.participation-card { text-align: center; padding: 30px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.participation-card .pc-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--brand-primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 14px; }
.participation-card b { color: var(--secondary); font-size: 1.02rem; }

/* ---- venue ---- */
.venue-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.venue-img { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.venue-img img { width: 100%; display: block; }
.venue-info h2 { font-size: 1.6rem; color: var(--secondary); margin: 0 0 14px; }
.venue-detail { display: flex; gap: 12px; margin-bottom: 14px; color: var(--ink); line-height: 1.7; }
.venue-detail i { color: var(--primary); margin-top: 4px; flex-shrink: 0; }
@media (max-width: 720px){ .venue-wrap { grid-template-columns: 1fr; } }

/* ---- registration CTA page ---- */
.reg-cta { text-align: center; max-width: 640px; margin: 0 auto; padding: 50px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.reg-cta h2 { font-size: 1.8rem; color: var(--secondary); margin: 0 0 14px; }
.reg-cta p { color: var(--muted); line-height: 1.8; margin-bottom: 26px; }
.reg-note { margin-top: 18px; font-size: .9rem; color: var(--muted); }

/* ---- promo banner card (home) ---- */
.promo-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center;
  background: var(--promo-bg, linear-gradient(135deg, var(--brand-primary), var(--secondary)));
  color: var(--promo-fg, #fff); border-radius: 18px; padding: 30px 34px;
}
.promo-logo { width: 130px; height: 130px; border-radius: 16px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; padding: 16px; }
.promo-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.promo-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; background: rgba(255,255,255,.18); padding: 5px 12px; border-radius: 20px; margin-bottom: 10px; }
.promo-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .9; }
.promo-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; }
.promo-sub { opacity: .9; }
/* Button + display-only URL stacked, so the URL sits under the button
   exactly like the ICDR banner. */
.promo-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.promo-url { font-size: .72rem; color: var(--promo-fg, #fff); opacity: .55; direction: ltr; unicode-bidi: plaintext; }
@media (max-width: 720px){ .promo-card { grid-template-columns: 1fr; text-align: center; } .promo-logo { margin: 0 auto; } .promo-cta { width: 100%; } .promo-cta .btn { width: 100%; justify-content: center; } }

/* ---- home gallery block ---- */
.home-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.home-gallery-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hg-tile { aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; position: relative; }
.hg-tile img { width: 100%; height: 100%; object-fit: cover; }
.hg-more { display: flex; align-items: center; justify-content: center; flex-direction: column; background: var(--brand-primary); color: var(--on-primary); font-weight: 800; }
.hg-more span { font-size: 1.8rem; }
.hg-more small { font-weight: 500; opacity: .85; }
@media (max-width: 720px){
  .home-gallery { grid-template-columns: 1fr; }
  /* The mosaic keeps two tiles across on phones — one huge photo per row
     wastes the screen — but the gap tightens so the tiles stay usable. */
  .home-gallery-mosaic { gap: 8px; }
}
@media (max-width: 380px){
  /* On the narrowest phones two tiles become too small to read, so the
     mosaic goes single-file. */
  .home-gallery-mosaic { grid-template-columns: 1fr; }
}

/* ---- announcements / media list cards ---- */
.ann-list { display: grid; gap: 18px; }
.ann-row { display: grid; grid-template-columns: 200px 1fr; gap: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: .2s; }
.ann-row:hover { box-shadow: 0 12px 30px rgba(0,0,0,.07); }
.ann-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); }
.ann-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ann-body { padding: 20px 22px; }
.ann-meta { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.ann-title { font-weight: 700; color: var(--secondary); font-size: 1.1rem; line-height: 1.5; }
.ann-excerpt { color: var(--muted); margin-top: 8px; line-height: 1.7; font-size: .93rem; }
@media (max-width: 620px){ .ann-row { grid-template-columns: 1fr; } }

/* article/detail body */
.article-body { max-width: 760px; margin: 0 auto; line-height: 1.9; color: var(--ink); font-size: 1.05rem; }
.article-body p { margin: 0 0 1.2em; }
.article-hero-img { max-width: 900px; margin: 0 auto 30px; border-radius: 16px; overflow: hidden; }
.article-hero-img img { width: 100%; display: block; }

/* archive editions */
.editions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.edition-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: .2s; }
.edition-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.09); }
.edition-cover { aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); }
.edition-cover img { width: 100%; height: 100%; object-fit: cover; }
.edition-body { padding: 20px; }
.edition-year { font-weight: 800; color: var(--secondary); font-size: 1.1rem; }
.edition-theme { color: var(--muted); margin-top: 6px; line-height: 1.6; }

/* Utility classes referenced by views that had no definition */
.btn-lg{padding:14px 30px;font-size:1.02rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}


/* ---- agenda: participant role + session type ---- */
.session-role { display: block; font-size: .72rem; color: var(--muted); font-weight: 500; margin-top: 1px; }
.session-badge.type { background: var(--secondary); color: #fff; }

/* ══ archive edition detail ═══════════════════════════════════════════ */
.ed-theme { text-align:center; font-size:1.15rem; color:var(--primary); font-weight:600; max-width:760px; margin:0 auto 26px; }

.ed-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-bottom:30px; }
.ed-fact { display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.ed-fact i { color:var(--primary); margin-top:3px; flex-shrink:0; }
.ed-fact-label { font-size:.76rem; color:var(--muted); margin-bottom:3px; }
.ed-fact-value { font-weight:600; color:var(--secondary); line-height:1.6; }

.ed-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:30px; }
.ed-stat { text-align:center; background:var(--primary-soft); border-radius:14px; padding:22px 16px; }
.ed-stat i { color:var(--primary); font-size:1.3rem; display:block; margin-bottom:8px; }
.ed-stat-num { font-size:1.9rem; font-weight:800; color:var(--primary); line-height:1; }
.ed-stat-label { margin-top:6px; color:var(--muted); font-size:.86rem; }

.ed-lists { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; margin:30px 0; }
.ed-list { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 26px; }
.ed-list h3 { font-size:1.05rem; color:var(--secondary); margin:0 0 14px; }
.ed-list h3 i { color:var(--primary); }
.ed-list ul { list-style:none; padding:0; margin:0; }
.ed-list li { position:relative; padding-inline-start:20px; margin-bottom:11px; line-height:1.75; color:var(--ink); font-size:.95rem; }
.ed-list li::before { content:""; position:absolute; inset-inline-start:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--brand-primary); }

.ed-block { margin:30px 0; }
.ed-block-title { font-size:1.1rem; color:var(--secondary); text-align:center; margin-bottom:18px; }
.ed-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.ed-photo { margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
.ed-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.ed-photo figcaption { padding:9px 12px; font-size:.8rem; color:var(--muted); }

/* ---- inner-page sponsors strip ---- */
.sponsor-strip { padding: 34px 0; background: var(--surface-2); border-top: 1px solid var(--line); }
.sponsor-strip .container { text-align: center; }
.sponsor-strip-label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.sponsor-strip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.sponsor-strip-logo { background: #fff; border: 1px solid var(--line); border-radius: 10px; width: 118px; height: 66px; display: flex; align-items: center; justify-content: center; padding: 10px; transition: .2s; }
.sponsor-strip-logo:hover { box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.sponsor-strip-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor-strip-more { display: inline-block; margin-top: 16px; font-size: .86rem; font-weight: 600; color: var(--primary); }

/* ══ organisational structure ══════════════════════════════════════════
   Leadership reads as a short row of wide cards (photo panel + role badge
   + optional bio); everyone else sits in one uniform member grid. Colours
   come from the theme tokens so this adapts to any client brand.        */

/* Leadership cards. Always two across on desktop: these are the two most
   senior figures and a single wide card, or three squeezed ones, both lose
   that reading. */
.leadership-row { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:36px; }
.leader-card { display:flex; background:var(--surface); border-radius:16px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--brand-primary) 10%, var(--line));
  box-shadow:0 4px 20px rgba(0,0,0,.05); }
.leader-photo-wrap { position:relative; width:180px; min-width:180px; background:var(--primary-soft); overflow:hidden; }
/* Fixed height rather than stretching to the text: two cards side by side
   should show the same size portrait even when one person holds three roles
   and the other holds one. */
.leader-photo { width:100%; height:240px; object-fit:cover; object-position:top center; display:block; }
.leader-photo-ph { display:flex; align-items:center; justify-content:center; height:240px;
  font-size:2.6rem; color:var(--primary); opacity:.35; }
/* The role sits on a gradient rising from the photo's foot, so the pill
   reads clearly whatever the photograph behind it looks like. */
.leader-photo-overlay { position:absolute; inset-inline:0; bottom:0;
  display:flex; justify-content:center; padding:24px 12px 14px;
  background:linear-gradient(to top, color-mix(in srgb, var(--brand-primary) 90%, transparent), transparent); }
.leader-role { display:inline-block; background:#fff; color:var(--primary); font-size:.72rem; font-weight:700;
  padding:5px 14px; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.12); }
/* The green rule across the head of the text column is what ties the card
   to the brand; without it the white panel reads as unfinished. */
.leader-info { flex:1; padding:28px; display:flex; flex-direction:column; justify-content:center;
  border-top:3px solid var(--brand-primary); }
.leader-honorific { font-size:.82rem; color:var(--muted); font-weight:600; margin-bottom:6px; }
.leader-name { font-size:1.25rem; font-weight:900; color:var(--secondary); margin:0 0 14px; line-height:1.25; }
/* One role per line, ruled off from the name above. */
.leader-desc { font-size:.75rem; color:var(--muted); line-height:1.6;
  border-top:1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent); padding-top:12px; }

/* These are <section> elements nested INSIDE the page's own section, so the
   global `section { padding: 90px 0 }` applied on top of the row's margin —
   producing a ~118px gap under the leadership cards. They are blocks within
   a page, not page-level sections, so the inherited padding is removed. */
.committee-section { padding:0; margin-bottom:44px; }
.committee-header { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.committee-title { font-size:.86rem; font-weight:700; color:var(--on-primary); margin:0;
  background:linear-gradient(135deg, var(--brand-primary), var(--secondary)); padding:9px 24px; border-radius:5px; }
.committee-line { flex:1; height:1px; background:linear-gradient(to left, var(--primary-soft), transparent); }
[dir="ltr"] .committee-line { background:linear-gradient(to right, var(--primary-soft), transparent); }

/* Three across on desktop. An explicit cap rather than auto-fill, which
   fitted four at the 1200px container and left the names cramped. */
.members-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .members-grid { grid-template-columns:repeat(2,1fr); } }
.member-card { display:flex; align-items:flex-start; gap:14px; padding:16px; background:var(--surface);
  border-radius:12px; border:1px solid var(--line); transition:border-color .2s, box-shadow .2s; }
.member-card:hover { border-color:var(--brand-primary); box-shadow:0 8px 22px -12px rgba(0,0,0,.3); }
.member-avatar, .member-avatar-placeholder { width:52px; height:52px; min-width:52px; border-radius:50%; }
.member-avatar { object-fit:cover; }
.member-avatar-placeholder { background:var(--primary-soft); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.member-info { min-width:0; }
.member-honorific { font-size:.74rem; color:var(--muted); font-weight:600; margin-bottom:3px; }
.member-name { font-size:.94rem; font-weight:800; color:var(--secondary); line-height:1.35; margin-bottom:4px; }
.member-title { font-size:.76rem; color:var(--muted); line-height:1.55; }

@media (max-width:720px){
  /* .leadership-row is a fixed 1fr 1fr on desktop, so it needs an explicit
     reset here or the two cards stay side by side and crush. */
  .leadership-row { grid-template-columns:1fr; gap:20px; }
  .leader-card { flex-direction:column; }
  .leader-photo-wrap { width:100%; min-width:0; height:260px; }
  .leader-photo, .leader-photo-ph { height:260px; }
  .leader-info { padding:20px; }
  .members-grid { grid-template-columns:1fr; }
}

/* ══ Arabic typography guard ═══════════════════════════════════════════
   letter-spacing breaks Arabic: the script is cursive, so tracking pulls
   joined letters apart and can clip the final glyph (e.g. "الراعي"
   rendering as ا ل ر اعي with a cut ي). text-transform:uppercase is
   likewise a no-op for Arabic.

   These properties are wanted on Latin eyebrows/labels, so instead of
   stripping them everywhere we neutralise them for Arabic pages. The
   * selector reaches every element (including ones added later) without
   having to maintain a class list; anything explicitly marked dir="ltr"
   (Latin field values, URLs, code) keeps its own tracking.             */
html[lang="ar"] body,
html[lang="ar"] body * {
  letter-spacing: normal;
  text-transform: none;
}
/* Latin islands inside an Arabic page opt back in. */
html[lang="ar"] [dir="ltr"] { letter-spacing: revert; }

/* ══ accent colour: make the third brand colour actually visible ═══════
   The accent was only wired to a couple of hover states and some dead
   sports classes, so changing it in Theme & Colors appeared to do
   nothing. These are the places where a third colour genuinely helps:
   small highlights that shouldn't compete with the primary.           */
.date-chip i,
.ed-stat i,
.participation-card .pc-icon { color: var(--accent); }
.participation-card .pc-icon { background: var(--accent-soft); }
.research-ord { background: var(--brand-accent); color: var(--on-accent, #fff); }
.audience-pill::before,
.align-list li::before,
.research-items li::before { background: var(--brand-accent); }
.theme-node::before { border-color: var(--brand-accent); }
.evt-intro.evt-quote { border-inline-start-color: var(--brand-accent); }
.stat-cell i { color: var(--accent); }
.leader-role { color: var(--accent); }
.ux-nothing{}

/* ---- hero: optional supporting image --------------------------------
   Modelled on the ICDR hero: the image is a half-width panel anchored to
   the bottom of the section, not a small inline picture, so a portrait
   reads at full height. It sits on the side opposite the text — left in
   Arabic (RTL), right in English — and its inner edge is masked so it
   melts into the background instead of ending on a hard line.        */
/* The side panel now lives inside the text column so that on a phone it
   falls between the subtitle and the countdown. On desktop it must still
   anchor to the SECTION, not the container, or it would stop 4% short of
   the page edge. style.css gives .hero > .container `position:relative`
   purely to carry z-index — but .container is a flex item of .hero, and
   z-index applies to flex items without positioning, so dropping the
   position costs nothing and hands the containing block back to .hero.
   Scoped to the classic layout; the other two are untouched. */
.hero-classic > .container { position: static; }

.hero-side {
  /* The image occupies the half OPPOSITE the text: the text starts at the
     reading edge (right in RTL), so the panel is pinned to the far edge
     (inset-inline-end). Sized to 46% so it never reaches the text column.

     --hero-side-edge names the INNER edge (the one facing the text), so the
     mask always fades the side that meets the copy regardless of language:
     in RTL the image is on the left and its inner edge is the right ("left"
     value fades the right side of the gradient run); in LTR it flips. */
  --hero-side-edge: left;
  /* Positive offset nudges the photo toward the text column. In RTL the
     photo is on the left, so "toward text" = move right (+X). In LTR it's
     on the right, so toward text = move left (-X). --hero-side-dir flips
     the sign per language. */
  --hero-side-dir: 1;
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
  width: var(--hero-side-width, 46%); display: flex; align-items: flex-end; justify-content: center;
  transform: translateX(calc(var(--hero-side-offset, 0%) * var(--hero-side-dir)));
  pointer-events: none; z-index: 1;
}
html[dir="ltr"] .hero-side { --hero-side-edge: right; --hero-side-dir: -1; }
/* English mirrors the mask as well as the position. Without this the LTR
   hero kept the RTL mask and the image ended on a hard vertical seam. */
html[dir="ltr"] .hero-side img {
  -webkit-mask-image: var(--hero-side-mask-ltr, none);
          mask-image: var(--hero-side-mask-ltr, none);
}
.hero-side img {
  /* Opacity + edge mask are owner-controlled via the theme page. The mask
     melts the inner edge into the hero background instead of ending on a
     hard line (issue #1). Falls back to a clean default if vars are unset. */
  opacity: var(--hero-side-opacity, 1);
  -webkit-mask-image: var(--hero-side-mask, none);
          mask-image: var(--hero-side-mask, none);
}
.hero-side-caption {
  position: absolute; bottom: 16px; inset-inline: 0; text-align: center;
  font-size: .82rem; color: rgba(255,255,255,.85);
}

/* Optional: stretch the side photo to the full hero height.
   Default (off) is unchanged — the panel is align-items:flex-end, so the
   image keeps its natural height and sits on the hero floor. On, the image
   fills the panel top to bottom and object-fit:cover crops rather than
   squashes, so the aspect ratio is never distorted.
   Desktop only by design: below 900px the panel already leaves the absolute
   layout and becomes a modest image above the copy, where a full-height
   stretch would push the text off the screen. */
.hero-side.is-full-height { align-items: stretch; }
.hero-side.is-full-height img {
  width: 100%; height: 100%; object-fit: cover; max-height: none;
}
@media (max-width: 900px){
  /* .hero is a flex container (display:flex; align-items:center). Taking the
     panel out of absolute positioning therefore turns it into a flex ITEM
     sitting in the SAME ROW as .container — the image beside the copy, not
     above it, with the text column crushed to whatever is left (~187px at a
     390px viewport). Stacking the hero is the actual fix; making the panel
     static is only half of it. align-items must also be released from
     `center`, which in a column flow shrink-wraps the children instead of
     letting them fill the width. */
  .hero { flex-direction: column; align-items: stretch; }
  /* No absolute side panel below this width, so the desktop 55% cap on the
     text column has nothing left to reserve room for. */
  .hero-grid > div { max-width: 100%; width: 100%; }

  /* On a phone the panel leaves absolute positioning and becomes a
     full-width banner in the flow of the copy — a 320px-capped picture in
     a 390px viewport reads as a stamp, not as art. The edge mask is
     dropped because there is no adjacent text column to melt into. */
  .hero-side, .hero-side.is-full-height {
    position: static; width: 100%; max-width: 100%; transform: none;
    display: block; margin: 22px 0 6px;
  }
  .hero-side img, .hero-side.is-full-height img {
    width: 100%; height: auto; max-height: 420px; object-fit: cover;
    border-radius: 16px; opacity: 1;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-side-caption { position: static; margin-top: 8px; display: block; text-align: center; }
}

/* ── Hero video ───────────────────────────────────────────────────────
   Background mode: the video sits above the background image (which acts
   as poster/fallback) and below the overlay + content. YouTube iframes
   can't be object-fit, so the frame is oversized and centred to cover. */
.hero-video-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-video-bg video { width:100%; height:100%; object-fit:cover; display:block; }
.hero-video-bg iframe {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw;            /* 16:9 — wide enough to cover */
  min-height:100%; min-width:177.77vh;    /* …and tall enough on narrow screens */
  border:0; pointer-events:none;
}
/* Respect reduced-motion: hide the moving background, keep the still image. */
@media (prefers-reduced-motion: reduce){ .hero-video-bg { display:none; } }

/* Play button (button mode) — sits alongside the register CTA. */
.hero-play {
  display:inline-flex; align-items:center; gap:11px; cursor:pointer;
  background:rgba(255,255,255,.14); color:var(--hero-text,#fff);
  border:1.5px solid rgba(255,255,255,.35); border-radius:50px;
  padding:11px 22px; font-family:inherit; font-weight:700; font-size:.95rem;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:.2s;
}
.hero-play:hover { background:rgba(255,255,255,.24); transform:translateY(-2px); }
.hero-play-icon {
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--hero-text,#fff); color:var(--secondary,#0d1e1c); font-size:.7rem;
  padding-inline-start:2px;             /* optical centring of the ▶ glyph */
}

/* Video lightbox */
.hero-video-modal {
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  background:rgba(0,0,0,.88); padding:24px;
}
.hero-video-modal[hidden] { display:none; }
.hero-video-frame { width:min(1100px,100%); aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.hero-video-frame iframe, .hero-video-frame video { width:100%; height:100%; border:0; display:block; }
.hero-video-close {
  position:absolute; top:20px; inset-inline-end:20px; width:44px; height:44px;
  border-radius:50%; border:none; cursor:pointer; font-size:1.2rem;
  background:rgba(255,255,255,.15); color:#fff; display:grid; place-items:center; transition:.2s;
}
.hero-video-close:hover { background:rgba(255,255,255,.3); }

/* ---- hero location --------------------------------------------------
   Single location line modelled on the ICDR hero: a frosted pill centred
   at the bottom of the WHOLE hero section (not the text column), so it sits
   under the photo half. Absolutely positioned relative to .hero. */
.hero-location {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 5; width: max-content; max-width: 92%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .9rem; font-weight: 700; white-space: nowrap;
  color: var(--secondary, #0d1e1c);
  background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 8px 20px; border-radius: 100px; border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.hero-location i { color: var(--primary, #00a29a); font-size: 1rem; }
/* Mobile inline variant lives inside the text column; hidden on desktop. */
.hero-location-mobile { display: none; }
@media (max-width: 900px){
  .hero-location { display: none; }
  .hero-location-mobile {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    font-size: .92rem; font-weight: 600;
    color: var(--hero-text, rgba(255,255,255,.92));
  }
  .hero-location-mobile i { color: var(--accent-soft, #8dd1e0); }
}

/* Hero title size (issue #2): the ceiling of the responsive clamp is now
   owner-controlled via the theme page; the fluid min/preferred are kept so
   it still scales down gracefully on small screens. Overrides style.css. */
.hero .hero-title { font-size: clamp(2.4rem, 6vw, var(--hero-title-size, 4.4rem)); }

/* ---- hero countdown -------------------------------------------------
   Frosted tiles on the hero image. Numbers use tabular figures so the
   digits don't jitter as they tick. */
/* Spacing (issue #3): clear separation above the countdown and a real gap
   before the actions row below it, so the hero doesn't feel cramped. The
   themeable border lives on the individual units (.countdown-unit) and the
   date pill (.hero-pill), NOT as a frame around the whole group. */
.countdown { display:flex; align-items:center; gap:10px; margin:26px 0 22px; flex-wrap:wrap; }
.countdown-unit { display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--hero-pill-bg,rgba(255,255,255,.14)); border:var(--hero-group-border,1px solid rgba(255,255,255,.24));
  border-radius:14px; padding:12px 16px; min-width:76px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.countdown-num { font-size:1.75rem; font-weight:800; color:var(--hero-pill-fg,#fff); line-height:1;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.countdown-label { font-size:.72rem; color:var(--hero-pill-fg,#fff); opacity:.82; }
.countdown-sep { color:rgba(255,255,255,.55); font-size:1.3rem; font-weight:700; }
.countdown.is-done .countdown-num { opacity:.55; }

/* hero-actions (issue #3): breathing room above the row so the date pill +
   register button group reads as a set. The border is on the pill itself. */
.hero .hero-actions { margin-top:22px; align-items:center; }
@media (max-width:620px){
  .countdown { gap:6px; }
  .countdown-unit { min-width:60px; padding:9px 10px; border-radius:11px; }
  .countdown-num { font-size:1.3rem; }
  .countdown-sep { font-size:1rem; }
}

/* ---- homepage preview rows: centre the items -------------------------
   These sections show only a few cards, so an auto-fill grid left them
   hugging the start edge (right, in RTL). Flex-centring keeps the row
   balanced regardless of how many items the owner has published. The
   full listing pages keep their normal grid. */
[data-section="speakers"] .speakers-grid,
[data-section="history"] .history-rail,
[data-section="media"] .media-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
}
[data-section="speakers"] .speaker-card { flex: 0 1 240px; }
[data-section="history"] .history-node  { flex: 0 0 auto; }
/* The listing rail scrolls horizontally with asymmetric padding; on the
   homepage preview it is centred instead, so even it out. */
[data-section="history"] .history-rail { padding-inline: 0; overflow-x: visible; }
[data-section="media"] .media-card      { flex: 0 1 320px; }

/* ---- homepage archive timeline -------------------------------------
   Ported from the reference conference layout: a labelled divider, a row
   of edition cards each under its own dot, and a filled "active" card for
   the most recent edition. Brand colours come from the theme tokens so
   this follows whatever palette the client sets.                      */
.arch-wrap { display:flex; flex-direction:column; align-items:center; gap:18px; }

.arch-divider { width:100%; max-width:860px; display:flex; align-items:center; gap:16px; margin-top:8px; }
.arch-divider-line { flex:1; height:1px; background:var(--line); }
.arch-divider-label { font-size:.7rem; font-weight:800; color:var(--primary);
  white-space:nowrap; opacity:.7; }

.arch-timeline { width:100%; max-width:860px; position:relative; display:flex;
  justify-content:space-between; gap:8px; overflow-x:auto; padding-bottom:8px; }

.arch-card { flex:1; min-width:88px; display:flex; flex-direction:column; align-items:center;
  cursor:pointer; text-decoration:none; position:relative; z-index:1; padding:0 4px;
  transition:transform .2s; }
.arch-card:hover { transform:translateY(-2px); }

.arch-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--brand-primary);
  background:var(--surface); margin-bottom:10px; transition:background .2s; flex-shrink:0; }
.arch-card:hover .arch-dot,
.arch-card.arch-active .arch-dot { background:var(--brand-primary); }

.arch-card-inner { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px 10px 12px; width:100%; text-align:center;
  transition:border-color .2s, box-shadow .2s; }
.arch-card:hover .arch-card-inner { border-color:var(--brand-primary);
  box-shadow:0 4px 16px rgba(0,0,0,.08); }
/* Active edition reads as a filled card. */
.arch-card.arch-active .arch-card-inner { background:var(--brand-primary); border-color:var(--brand-primary); }

.arch-ordinal { font-size:.7rem; font-weight:800; color:var(--primary); margin-bottom:4px; }
.arch-card.arch-active .arch-ordinal { color:rgba(255,255,255,.7); }

.arch-year { font-size:1.3rem; font-weight:900; color:var(--secondary); line-height:1;
  font-variant-numeric:tabular-nums; }
.arch-card.arch-active .arch-year { color:var(--on-primary); }

.arch-cta { display:inline-flex; align-items:center; gap:8px; background:var(--brand-primary);
  color:var(--on-primary); font-size:.85rem; font-weight:700; padding:10px 24px;
  border-radius:8px; text-decoration:none; margin-top:8px;
  transition:background .2s, transform .15s; }
.arch-cta:hover { background:var(--primary-hover,var(--secondary)); transform:translateY(-1px); color:var(--on-primary); }

@media (max-width:720px){
  .arch-timeline { justify-content:flex-start; }
  .arch-card { min-width:104px; }
}

/* ---- sticky shortcut (homepage only) --------------------------------
   Floating pills pinned to the trailing edge at mid-height. Hidden on
   narrow screens where they would cover content, and hidden for print. */
/* Pinned to the reading-start edge: right in Arabic (RTL), left in English
   (LTR). The hover nudge moves each pill inward, toward the page content. */
.sticky-shortcut { position:fixed; top:50%; transform:translateY(-50%);
  inset-inline-start:14px; z-index:900; display:flex; flex-direction:column; gap:10px; }
.ss-pill { display:flex; align-items:center; gap:9px; padding:11px 18px; border-radius:30px;
  font-size:.85rem; font-weight:700; text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.16); transition:transform .2s, box-shadow .2s; }
.ss-pill:hover { transform:translateX(-3px); box-shadow:0 8px 22px rgba(0,0,0,.22); }
[dir="ltr"] .ss-pill:hover { transform:translateX(3px); }
.ss-pill i { font-size:1rem; flex-shrink:0; }
.ss-sponsor { background:var(--brand-accent); color:var(--on-accent,#3a2a06); }
.ss-booth   { background:var(--brand-primary); color:var(--on-primary); }
@media (max-width:1100px){ .sticky-shortcut { display:none; } }
@media print { .sticky-shortcut { display:none; } }


/* ---- hero date pill --------------------------------------------------
   Shares the countdown's colour tokens so the whole hero furniture can be
   themed together, rather than inheriting the generic ghost button. */
.hero-pill { display:inline-flex; align-items:center; gap:9px; padding:12px 22px;
  border-radius:50px; font-weight:700; font-size:.95rem;
  background:var(--hero-pill-bg,rgba(255,255,255,.14));
  color:var(--hero-pill-fg,#fff);
  border:var(--hero-group-border,1px solid rgba(255,255,255,.24));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hero-pill i { opacity:.9; }

/* ── محاور المؤتمر: square grid ───────────────────────────────────────
   The same rows the About page lists, presented as cards. A large ghost
   number sits behind the content; on hover the card lifts, the number
   brightens and drifts, the icon chip fills with the brand colour, and a
   thin accent line sweeps the top edge. All transform/opacity work so it
   stays smooth, and it stands still for reduced-motion visitors. */
.axes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.axis-card {
  position:relative; overflow:hidden; isolation:isolate;
  background:#fff; border:1px solid var(--line,#e6ecea); border-radius:16px;
  padding:30px 26px 26px; text-align:start;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
/* Accent line that sweeps in along the top edge. */
.axis-card::before {
  content:''; position:absolute; inset-inline:0; top:0; height:3px; z-index:2;
  background:linear-gradient(to left, var(--brand-primary), var(--brand-accent, var(--brand-primary)));
  transform:scaleX(0); transform-origin:var(--axis-origin, right);
  transition:transform .38s cubic-bezier(.22,.9,.3,1);
}
html[dir="ltr"] .axis-card { --axis-origin:left; }
.axis-card:hover {
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--brand-primary) 35%, var(--line,#e6ecea));
  box-shadow:0 18px 44px rgba(0,0,0,.10);
}
.axis-card:hover::before { transform:scaleX(1); }

/* Ghost number: large, faint, behind everything. */
.axis-num {
  position:absolute; top:14px; inset-inline-end:20px; z-index:0;
  font-size:3.2rem; font-weight:900; line-height:1;
  color:var(--primary); opacity:.10; letter-spacing:-.02em;
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.axis-card:hover .axis-num { opacity:.20; transform:translateY(-4px); }

.axis-icon {
  position:relative; z-index:1;
  width:46px; height:46px; margin-bottom:16px;
  display:grid; place-items:center; border-radius:13px;
  background:color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color:var(--primary); font-size:1.15rem;
  transition:background .28s ease, color .28s ease, transform .28s ease;
}
.axis-card:hover .axis-icon {
  background:var(--brand-primary); color:var(--on-primary,#fff); transform:scale(1.08);
}
.axis-title {
  position:relative; z-index:1;
  font-size:1.02rem; font-weight:800; color:var(--secondary); margin:0 0 8px; line-height:1.5;
}
.axis-desc {
  position:relative; z-index:1;
  font-size:.88rem; line-height:1.85; color:var(--muted); margin:0;
}
@media (max-width:900px){ .axes-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .axes-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .axis-card, .axis-card::before, .axis-num, .axis-icon { transition:none; }
  .axis-card:hover { transform:none; }
  .axis-card:hover .axis-num { transform:none; }
  .axis-card:hover .axis-icon { transform:none; }
}

/* ── About feature strip (homepage) ──────────────────────────────── */
.about-features { display:flex; flex-direction:column; gap:10px; margin:22px 0 6px; }
.feat {
  display:flex; align-items:center; gap:13px;
  background:#fff; border:1px solid var(--line,#e6ecea);
  border-inline-start:3px solid var(--brand-primary);
  border-radius:12px; padding:13px 16px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.feat:hover { transform:translateX(calc(var(--feat-shift, -4px))); box-shadow:0 8px 22px rgba(0,0,0,.07); }
html[dir="ltr"] .feat { --feat-shift:4px; }
.feat-icon {
  width:36px; height:36px; flex-shrink:0; display:grid; place-items:center;
  border-radius:10px; background:color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color:var(--primary); font-size:.95rem;
}
.feat h4 { margin:0 0 2px; font-size:.92rem; font-weight:800; color:var(--secondary); }
.feat p  { margin:0; font-size:.82rem; color:var(--muted); line-height:1.6; }


/* ── Section eyebrow (small label with rules, above a heading) ────── */
.sec-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:800; letter-spacing:.06em;
  color:var(--primary); margin-bottom:14px;
}
.sec-eyebrow::before, .sec-eyebrow::after {
  content:''; width:26px; height:2px; border-radius:2px; background:currentColor; opacity:.55;
}

/* ── Registration block ───────────────────────────────────────────
   There is no built-in registration system, so the panel adapts: a
   linked poster, an embedded third-party form, or a plain CTA. The
   copy and benefits list sit beside it either way. */
.reg-sec { background:var(--secondary); color:#fff; }
.reg-cols { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.reg-panel { min-width:0; }
.reg-embed {
  width:100%; border:0; display:block; border-radius:16px; background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.reg-image-link { display:block; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.22); transition:transform .25s ease; }
.reg-image-link:hover { transform:translateY(-4px); }
.reg-panel img { width:100%; height:auto; display:block; border-radius:16px; }
.reg-btn-wrap { display:flex; justify-content:center; padding:30px 0; }
.btn-lg { font-size:1.05rem; padding:16px 38px; }

.reg-title { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; color:#fff; margin:0 0 14px; line-height:1.35; }
.reg-lead  { color:rgba(255,255,255,.88); font-size:1rem; line-height:1.9; margin:0 0 22px; }
.reg-sec .sec-eyebrow { color:var(--accent-soft,#c9a24a); }  /* dark section: --accent is darkened for light pages */
.reg-benefits { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.reg-benefits li {
  display:flex; align-items:flex-start; gap:11px;
  color:rgba(255,255,255,.94); font-size:.95rem; line-height:1.7;
}
.reg-tick {
  width:24px; height:24px; flex-shrink:0; margin-top:1px;
  display:grid; place-items:center; border-radius:50%;
  border:1.5px solid var(--brand-accent,#c9a24a); color:var(--accent-soft,#c9a24a); font-size:.65rem;
}
@media (max-width:900px){ .reg-cols { grid-template-columns:1fr; gap:30px; } }

/* ── Venue & time block ──────────────────────────────────────────── */
.venue-cols { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.venue-image img { width:100%; height:auto; display:block; border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.14); }
.venue-title { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; color:var(--secondary); margin:0 0 14px; line-height:1.35; }
.venue-lead  { color:var(--muted); font-size:1rem; line-height:1.9; margin:0 0 24px; }
.venue-grid  { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:24px; }
.venue-cell {
  background:#fff; border:1px solid var(--line,#e6ecea);
  border-inline-end:3px solid var(--brand-primary);
  border-radius:12px; padding:15px 18px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.venue-cell:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.08); }
.venue-cell-label { display:block; font-size:.76rem; color:var(--muted); margin-bottom:6px; }
.venue-cell-label i { margin-inline-end:5px; opacity:.75; }
.venue-cell b { font-size:.95rem; color:var(--secondary); font-weight:800; }
.venue-map-btn { display:inline-flex; }
@media (max-width:900px){ .venue-cols { grid-template-columns:1fr; gap:28px; } }
@media (max-width:520px){ .venue-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════
   HERO — mobile
   The desktop hero caps its text column at 55% so the side portrait has
   room. That cap was never lifted on small screens, which squeezed the
   copy into a ~200px column: two words per line, the countdown stacked
   vertically, and the buttons wrapped into blobs. Below the breakpoint
   the hero becomes a single full-width column and the portrait moves
   from an absolutely-positioned side panel to normal flow above the
   text, so nothing overlaps.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .hero { min-height: auto; padding: 40px 0 48px; }

  /* The root cause: release the desktop 55% cap. */
  .hero-grid > div { max-width: 100% !important; width: 100%; }
  .hero-grid { gap: 0; }

  .hero-classic .hero-title,
  .hero .hero-title { font-size: clamp(1.75rem, 7.5vw, 2.5rem); line-height: 1.25; margin-bottom: 14px; }
  .hero .hero-text,
  .hero .hero-subtitle { font-size: 1rem; line-height: 1.85; margin-bottom: 22px; max-width: 100%; }

  /* The side image is handled once, in the 900px block above: full width,
     in the flow of the copy after the subtitle. A second set of rules here
     only competed with it. */

  /* Countdown: four units + separators need ~380px, so on a phone they
     become an even 4-across grid and the ":" separators are dropped. */
  .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0 18px; }
  .countdown-sep { display: none; }
  .countdown-unit { min-width: 0; padding: 10px 4px; border-radius: 12px; }
  .countdown-num { font-size: 1.25rem; }
  .countdown-label { font-size: .68rem; }

  /* Actions stack full-width instead of wrapping into narrow blobs. */
  .hero .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
  .hero .hero-actions .btn,
  .hero .hero-actions .hero-pill,
  .hero .hero-play { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .hero-pill { padding: 12px 16px; }

  .hero-location-mobile { justify-content: center; width: 100%; text-align: center; margin-top: 14px; }
}

/* Very small phones: three-across countdown reads better than four. */
@media (max-width: 380px) {
  .countdown { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .countdown-unit { padding: 9px 2px; }
  .countdown-num { font-size: 1.1rem; }
  .countdown-label { font-size: .62rem; }
}

/* Embedded registration form on phones. The owner sets a desktop height
   (often ~780px); on a short screen that becomes a tall scroll-trap, so
   the frame is capped to the viewport and scrolls internally instead. */
@media (max-width: 820px) {
  .reg-embed { height: min(var(--reg-embed-h, 780px), 78vh) !important; }
  .reg-sec { padding-block: 40px; }
}

/* About media column. Mirrors the portrait 4:5 frame the reference design
   uses — a widescreen 16:9 box left a lot of dead space beside the text.
   A video here is a silent looping visual (autoplay + muted + loop, no
   controls), not something the visitor has to press play on. */
.about-video-only { position:relative; border-radius:16px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.15);
  background:linear-gradient(135deg, var(--secondary), var(--brand-primary));
  aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; }
.about-video-only iframe,
.about-video-only video { width:100%; height:100%; border:0; display:block; object-fit:cover; }
/* A YouTube embed can't be cropped to portrait without losing the frame, so
   that case keeps the video's own ratio inside the portrait box. */
.about-video-only.is-embed { aspect-ratio:4/5; }
.about-video-only.is-embed iframe { object-fit:contain; }
@media (max-width:860px){ .about-video-only { aspect-ratio:16/9; } }

/* ── Cookie consent bar ───────────────────────────────────────────
   Anchored to the bottom, above everything, but never covering the whole
   screen: a consent notice that blocks the page is hostile, and visitors
   dismiss it without reading. */
.cookie-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:1200;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:16px 22px; background:var(--secondary,#0d1e1c); color:#fff;
  box-shadow:0 -6px 30px rgba(0,0,0,.28);
}
.cookie-bar[hidden]{ display:none; }
.cookie-text{ margin:0; flex:1 1 320px; font-size:.9rem; line-height:1.8; }
.cookie-text a{ color:var(--accent-soft,#c9a24a); text-decoration:underline; margin-inline-start:6px; }  /* bar sits on --secondary */
.cookie-actions{ display:flex; gap:10px; flex:0 0 auto; }
.cookie-actions .btn{ padding:10px 22px; font-size:.88rem; }
@media (max-width:600px){
  .cookie-bar{ padding:14px 16px; }
  .cookie-actions{ width:100%; }
  .cookie-actions .btn{ flex:1; justify-content:center; }
}

/* ── Legal pages (privacy) ───────────────────────────────────────── */
.legal-body{ max-width:860px; margin:0 auto; line-height:1.95; color:var(--secondary); }
.legal-body h2{ font-size:1.25rem; font-weight:800; margin:28px 0 10px; color:var(--primary); }
.legal-body h3{ font-size:1.05rem; font-weight:800; margin:22px 0 8px; }
.legal-body p{ margin:0 0 14px; }
.legal-body ul,.legal-body ol{ margin:0 0 14px; padding-inline-start:22px; }
.legal-body li{ margin-bottom:7px; }
.legal-updated{ margin-top:28px; padding-top:16px; border-top:1px solid var(--line,#e6ecea);
  font-size:.85rem; color:var(--muted); }

/* Footer legal link — sits inline in the copyright line, so it inherits its
   size and colour and reads as part of that sentence rather than a stray
   centred link beneath the bar. */
.ftr-legal-link{ color:inherit; opacity:.85; text-decoration:underline; text-underline-offset:2px; }
.ftr-legal-link:hover{ opacity:1; }

/* ── Country flags ────────────────────────────────────────────────
   Bundled, not loaded from a CDN. Sized by width with automatic height:
   flags carry different aspect ratios (2:1, 3:2, a couple square), so
   forcing a fixed height would distort them. Source images are 40px wide
   and shown at ~22px, which keeps them sharp on high-density screens. */
.flag{
  display:inline-block; vertical-align:middle; height:auto;
  margin-inline-start:8px; border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  /* Nudged up slightly so it sits on the text's optical centre. */
  position:relative; top:-1px;
}
h1 .flag{ margin-inline-start:10px; top:-2px; }

/* ══════════════════════════════════════════════════════════════════
   SPEAKERS DIRECTORY
   Featured speakers get wide horizontal cards above the grid: a patron
   or minister carries different weight to a workshop presenter, and an
   identical tile flattens that distinction.
   ══════════════════════════════════════════════════════════════════ */
.spk-featured{ display:flex; flex-direction:column; gap:18px; margin-bottom:36px; }

/* Featured card. A gold rule down the leading edge, a fixed photo column and
   generous padding — the weight signals "this person matters" without needing
   a bigger tile than the grid below. */
.spk-vip{
  display:flex; min-height:240px; background:#fff; border-radius:18px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--brand-accent,#c9a24a) 25%, #fff);
  box-shadow:0 4px 28px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.spk-vip:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.11); }
.spk-vip-strip{
  width:6px; flex-shrink:0;
  background:linear-gradient(to bottom, var(--brand-accent,#c9a24a), color-mix(in srgb, var(--brand-accent,#c9a24a) 68%, #fff), var(--brand-accent,#c9a24a));
}
.spk-vip-photo{
  width:220px; flex-shrink:0; order:2; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--secondary,#1a3a28), var(--brand-primary,#1c7b43));
}
/* Slightly above centre and a touch softened: portraits are framed with the
   head high, and the transparency lets the card's own colour read through. */
.spk-vip-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; opacity:.9; }
.spk-vip-body{ flex:1; order:1; padding:32px 40px; display:flex; flex-direction:column;
  justify-content:center; gap:10px; align-items:flex-start; }

.spk-vip-badge{
  display:inline-flex; align-items:center; gap:7px; width:fit-content;
  background:linear-gradient(135deg, var(--brand-accent,#c9a24a), color-mix(in srgb, var(--brand-accent,#c9a24a) 68%, #fff));
  color:var(--on-accent,#5a3800); font-size:.68rem; font-weight:800;
  padding:4px 14px; border-radius:20px;
}
.spk-vip-name{
  display:flex; flex-direction:row; align-items:flex-start; gap:10px; width:100%;
  font-size:1.5rem; font-weight:900; color:var(--secondary); line-height:1.25; margin:0;
}
.spk-vip-divider{
  width:40px; height:3px; border-radius:2px;
  background:linear-gradient(to left, var(--brand-accent,#c9a24a), transparent);
}
html[dir="ltr"] .spk-vip-divider{ background:linear-gradient(to right, var(--brand-accent,#c9a24a), transparent); }

/* Several roles, ranked: the main one leads, the rest follow lighter, each
   with a rule down the reading edge so they read as a list not a run-on. */
.spk-vip-titles{ display:flex; flex-direction:column; gap:4px; }
.spk-vip-title{
  font-size:.82rem; font-weight:600; color:var(--ink); line-height:1.5;
  padding-inline-start:10px;
  border-inline-start:2px solid color-mix(in srgb, var(--brand-accent,#c9a24a) 30%, transparent);
}
.spk-vip-title.is-main{
  font-size:.92rem; font-weight:700; color:var(--ink);
  border-inline-start:2px solid var(--brand-accent,#c9a24a);
}
.spk-vip-org{ font-size:.75rem; color:var(--muted); margin:0; }
.spk-vip-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:800; color:var(--primary);
}
.spk-vip-link:hover{ text-decoration:underline; }

@media (max-width:760px){
  .spk-vip{ flex-direction:column; min-height:auto; }
  .spk-vip-strip{ width:100%; height:5px; }
  .spk-vip-photo{ width:100%; height:200px; order:1; }
  .spk-vip-body{ order:2; padding:24px 20px; }
  .spk-vip-name{ font-size:1.1rem; }
}

/* The boxed topic treatment belongs to the FEATURED band and the profile
   page only. Grid cards use the plain label + text above, which is what
   keeps them compact — an earlier version applied this box everywhere and
   made every card look heavy. */
.spk-vip .spk-topic, .spk-topic-profile{
  width:100%; border-inline-start:3px solid var(--brand-accent,#c9a24a);
  background:var(--surface,#f7faf9); border-radius:0 10px 10px 0;
  padding:10px 14px; margin:0 0 16px;
}
.spk-vip .spk-topic-label, .spk-topic-profile .spk-topic-label{
  display:block; font-size:.7rem; font-weight:800; color:var(--accent-ink,#7a5b12); margin-bottom:3px; }
.spk-vip .spk-topic-text, .spk-topic-profile .spk-topic-text{
  display:block; font-size:.86rem; line-height:1.7; color:var(--secondary); }

/* Divider between the featured band and the full list. */
.spk-divider{ position:relative; text-align:center; margin:8px 0 26px; }
.spk-divider::before{ content:''; position:absolute; inset-inline:0; top:50%; height:1px; background:var(--line,#e6ecea); }
.spk-divider span{ position:relative; background:var(--bg,#fff); padding:0 18px; font-size:.82rem; font-weight:800; color:var(--muted); }

/* Filters */
.spk-filters{ margin-bottom:24px; }
.spk-filters[hidden]{ display:none; }
.spk-filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.spk-filter-label{ font-size:.82rem; font-weight:800; color:var(--muted); margin-inline-end:6px; }
.spk-filter-btn{
  cursor:pointer; font-family:inherit; font-size:.82rem; font-weight:700;
  background:#fff; color:var(--secondary); border:1.5px solid var(--line,#e6ecea);
  border-radius:50px; padding:7px 18px; transition:.18s;
}
.spk-filter-btn:hover{ border-color:var(--brand-primary); }
.spk-filter-btn.is-active{ background:var(--brand-primary); color:var(--on-primary,#fff); border-color:var(--brand-primary); }
.spk-count{ margin:4px 0 0; font-size:.82rem; color:var(--muted); }

/* Card tags */
.speaker-card[hidden]{ display:none; }
.spk-noresults{ text-align:center; color:var(--muted); padding:30px 0; }
.spk-noresults[hidden]{ display:none; }

@media (max-width:760px){
  .spk-vip{ grid-template-columns:1fr; }
  .spk-vip-photo{ order:1; }
  .spk-vip-photo img{ min-height:0; max-height:260px; }
  .spk-vip-body{ order:2; padding:20px; }
}

/* ── Agenda depth: axes, participant slots, TBA ──────────────────── */

/* Sub-topics with their minute budget. Compact by design: a panel with six
   axes should read as a plan, not compete with the session title. */
.session-axes{ list-style:none; margin:12px 0 0; padding:0;
  border-inline-start:2px solid var(--line,#e6ecea); }
.session-axes li{ position:relative; padding:7px 0 7px 0; padding-inline-start:16px; }
.session-axes li::before{ content:''; position:absolute; inset-inline-start:-5px; top:14px;
  width:8px; height:8px; border-radius:50%; background:var(--brand-primary); }
.ax-title{ font-weight:700; font-size:.9rem; color:var(--secondary); }
.ax-mins{ display:inline-block; margin-inline-start:8px; font-size:.72rem; font-weight:700;
  background:color-mix(in srgb, var(--brand-primary) 12%, #fff); color:var(--primary);
  border-radius:5px; padding:2px 8px; }
.ax-content{ display:block; font-size:.82rem; line-height:1.75; color:var(--muted); margin-top:3px; }

/* A participant's own time inside a session. */
.session-slot{ display:inline-block; margin-inline-end:7px; font-size:.72rem; font-weight:800;
  color:var(--primary); background:color-mix(in srgb, var(--brand-primary) 10%, #fff);
  border-radius:5px; padding:2px 7px; }

/* Time not announced yet. */
.st-tba{ font-size:.78rem; font-weight:700; color:var(--muted); line-height:1.5; }

/* Talk topic on the profile page: roomier than the card version, since
   here it is primary information rather than a teaser. */
.spk-topic-profile{ margin:16px 0 4px; padding:14px 18px; }
.spk-topic-profile .spk-topic-label{ font-size:.75rem; margin-bottom:5px; }
.spk-topic-profile .spk-topic-text{ font-size:1rem; line-height:1.8; }

/* ══════════════════════════════════════════════════════════════════
   PROGRAMME — three tiers
   A coffee break and a keynote panel should not look alike. Each tier
   has its own weight: quiet rows for logistics, a full card for the
   flagship sessions, and a grid for anything running in parallel.
   ══════════════════════════════════════════════════════════════════ */

/* ── Day tabs ─────────────────────────────────────────────────────── */
.pg-daytabs{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:30px; }
.pg-daytab{ cursor:pointer; font-family:inherit; text-align:center; min-width:112px;
  background:#fff; border:1.5px solid var(--line,#e6ecea); border-radius:12px;
  padding:12px 20px; transition:.18s; }
.pg-daytab:hover{ border-color:var(--brand-primary); }
.pg-daytab.is-active{ background:var(--brand-primary); border-color:var(--brand-primary); color:var(--on-primary,#fff); }
.pg-daytab .d-num{ display:block; font-size:1.4rem; font-weight:900; line-height:1.1; color:var(--primary); }
.pg-daytab.is-active .d-num{ color:var(--on-primary,#fff); }
.pg-daytab .d-day{ display:block; font-size:.72rem; margin-top:2px; opacity:.8; }
.pg-panel[hidden]{ display:none; }

/* ── Tier 1: timeline rows ───────────────────────────────────────── */
.tl-block{ display:flex; align-items:stretch; gap:0; background:#fff;
  border:1px solid var(--line,#e6ecea); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.tl-time{ display:flex; align-items:center; gap:10px; padding:14px 18px; flex-shrink:0;
  background:var(--surface,#f7faf9); border-inline-end:1px solid var(--line,#e6ecea); }
.tl-time > i{ color:var(--muted); font-size:.9rem; }
.tl-times{ display:flex; flex-direction:column; gap:2px; }
.tl-row{ display:flex; align-items:baseline; gap:7px; }
.tl-row b{ font-size:.86rem; font-weight:800; color:var(--secondary); font-variant-numeric:tabular-nums; }
.tl-lbl{ font-size:.62rem; color:var(--muted); }
.tl-tba{ font-size:.76rem; font-weight:700; color:var(--muted); }
.tl-body{ display:flex; align-items:center; gap:14px; padding:14px 18px; flex:1; }
.tl-icon{ width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; border-radius:10px;
  background:color-mix(in srgb, var(--brand-primary) 12%, #fff); color:var(--primary); font-size:.95rem; }
.tl-title{ font-size:.95rem; font-weight:800; color:var(--secondary); }
.tl-hall{ font-size:.76rem; color:var(--muted); margin-top:2px; }
.tl-people{ margin-top:4px; font-size:.76rem; }
.tl-people a{ color:var(--primary); }
.tl-people a:not(:last-child)::after{ content:'، '; color:var(--muted); }

/* ── Tier 2: the main panel ──────────────────────────────────────── */
.mp-wrap{ margin:26px 0; }
.mp-label{ text-align:center; font-size:.78rem; font-weight:800; color:var(--accent,#c9a24a); margin-bottom:10px; }
.mp-hero{ background:linear-gradient(150deg, var(--secondary), var(--brand-primary));
  color:#fff; border-radius:16px; padding:26px 30px; }
.mp-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.mp-pill{ font-size:.72rem; font-weight:700; border-radius:20px; padding:4px 14px; }
.mp-pill-gold{ background:var(--brand-accent,#c9a24a); color:var(--on-accent,#5a3800); }
.mp-pill-soft{ background:rgba(255,255,255,.16); color:#fff; }
.mp-h1{ font-size:clamp(1.05rem,2.2vw,1.4rem); font-weight:800; line-height:1.55; margin:0; color:#fff; }
.mp-lead{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); }
.mp-role-label{ font-size:.68rem; font-weight:800; color:var(--accent-soft,#c9a24a); margin-bottom:8px; }  /* inside the dark .mp-hero gradient */
.mp-person{ display:flex; align-items:center; gap:14px; color:#fff; }
.mp-avatar{ width:56px; height:56px; flex-shrink:0; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 2px var(--brand-accent,#c9a24a); }
.mp-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.mp-p-name{ display:block; font-size:.95rem; font-weight:800; line-height:1.45; }
.mp-p-role{ display:block; font-size:.76rem; opacity:.85; margin-top:2px; }

/* Two columns when both cards exist; a single card spans the full width
   rather than leaving an empty half — which is what happened when a session
   had participants but no objective. */
.mp-mid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; align-items:start; }
.mp-mid.is-single{ grid-template-columns:1fr; }
.mp-mid:has(> .mp-card:only-child){ grid-template-columns:1fr; }
.mp-card{ background:#fff; border:1px solid var(--line,#e6ecea); border-radius:14px; padding:20px 22px; }
.mp-card-label{ font-size:.7rem; font-weight:800; color:var(--accent-ink,#7a5b12); margin-bottom:12px; }
.mp-objective{ font-size:.82rem; line-height:1.9; color:var(--ink); }
.mp-panelist{ display:flex; align-items:center; gap:11px; padding:7px 0; color:inherit; }
.mp-pan-avatar{ width:38px; height:38px; flex-shrink:0; border-radius:50%; overflow:hidden;
  background:var(--surface,#f2f5f4); }
.mp-pan-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.mp-pan-name{ display:block; font-size:.84rem; font-weight:700; color:var(--secondary); line-height:1.45; }
.mp-pan-role{ display:block; font-size:.72rem; color:var(--muted); margin-top:1px; }
.mp-mod-divider{ height:1px; background:var(--line,#e6ecea); margin:12px 0; }
.mp-mod-label{ font-size:.72rem; font-weight:800; color:var(--primary); margin-bottom:6px; }

/* Axes: collapsed by default, the count tells you what is inside. */
.mp-axes{ background:#fff; border:1px solid var(--line,#e6ecea); border-radius:14px; margin-top:14px; overflow:hidden; }
.mp-axes-head{ width:100%; cursor:pointer; font-family:inherit; background:none; border:0;
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 22px; text-align:start; }
.mp-axes-head-r{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mp-axes-head .mp-card-label{ margin:0; }
.mp-axes-count{ font-size:.74rem; color:var(--muted); }
.mp-axes-chev{ color:var(--muted); transition:transform .22s ease; }
.mp-axes-head.is-open .mp-axes-chev{ transform:rotate(180deg); }
.mp-axes-body{ padding:0 22px 18px; }
.mp-axes-body[hidden]{ display:none; }
.mp-axis{ display:flex; align-items:flex-start; gap:12px; padding:10px 0;
  border-top:1px solid color-mix(in srgb, var(--brand-primary) 8%, transparent); }
.mp-axis-dot{ width:8px; height:8px; margin-top:7px; flex-shrink:0; border-radius:50%; background:var(--brand-primary); }
.mp-axis-min{ flex-shrink:0; font-size:.68rem; font-weight:800; color:var(--primary);
  background:color-mix(in srgb, var(--brand-primary) 10%, #fff); border-radius:6px; padding:3px 9px; }
.mp-axis-title{ font-size:.86rem; font-weight:800; color:var(--secondary); line-height:1.5; }
.mp-axis-content{ font-size:.78rem; line-height:1.8; color:var(--muted); margin-top:3px; }

/* ── Tier 3: parallel sessions ───────────────────────────────────── */
.tb-section{ margin-top:30px; }
.tb-divider{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.tb-divider .line{ flex:1; height:1px; background:var(--line,#e6ecea); }
.tb-divider .txt{ font-size:.8rem; font-weight:800; color:var(--accent,#c9a24a); }
.tb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.sc{ background:#fff; border:1px solid var(--line,#e6ecea); border-radius:14px; overflow:hidden; }
.sc-head{ background:linear-gradient(150deg, var(--secondary), var(--brand-primary)); color:#fff; padding:18px 20px; }
.sc-type{ display:inline-block; background:rgba(255,255,255,.9); color:var(--primary);
  font-size:.66rem; font-weight:800; border-radius:20px; padding:3px 12px; margin-bottom:10px; }
.sc-title{ font-size:.95rem; font-weight:800; line-height:1.5; margin:0 0 10px; color:#fff; }
.sc-meta-bar{ display:flex; flex-wrap:wrap; gap:8px; }
.sc-meta-time, .sc-meta-place{ display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16); border-radius:20px; padding:3px 11px; font-size:.7rem; }
.sc-agenda{ padding:8px 14px 14px; }
.sc-slot{ display:flex; align-items:center; gap:10px; padding:9px 4px; color:inherit;
  border-bottom:1px solid color-mix(in srgb, var(--brand-primary) 7%, transparent); }
.sc-slot:last-child{ border-bottom:0; }
.sc-time{ flex-shrink:0; font-size:.68rem; font-weight:800; color:var(--primary);
  background:color-mix(in srgb, var(--brand-primary) 10%, #fff); border-radius:6px;
  padding:3px 8px; font-variant-numeric:tabular-nums; }
.sc-avatar{ width:34px; height:34px; flex-shrink:0; border-radius:50%; overflow:hidden; background:var(--surface,#f2f5f4); }
.sc-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-name{ display:block; font-size:.8rem; font-weight:700; color:var(--secondary); line-height:1.4; }
.sc-role{ display:block; font-size:.7rem; color:var(--muted); margin-top:1px; }

@media (max-width:1000px){ .tb-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){
  .mp-mid{ grid-template-columns:1fr; }
  .tb-grid{ grid-template-columns:1fr; }
  .mp-hero{ padding:20px; }
  .tl-block{ flex-direction:column; }
  .tl-time{ border-inline-end:0; border-bottom:1px solid var(--line,#e6ecea); }
  .tl-times{ flex-direction:row; gap:16px; }
}

/* --- About page: vision/mission headings + intro photo ----------------- */
.research-card-title{font-size:1.15rem;font-weight:800;color:var(--ink);margin:0 0 12px}
/* The intro photo is the same about.image_url the homepage uses; capped so a
   large upload cannot dominate the page it introduces. */
.about-intro-media{max-width:820px;margin:0 auto 26px;text-align:center}
.about-intro-media img{width:100%;height:auto;max-height:420px;object-fit:cover;
  border-radius:14px;display:block}
.about-intro-media .about-caption{margin-top:10px}

/* --- About: vision / mission statement panels -------------------------- */
/* An institutional vision statement is a declaration, not body copy, so it is
   set as one composed panel: brand-tinted ground, an oversized quote mark for
   weight, the heading inside the panel with the section icon. Reading width is
   capped — a single sentence stretched across 1100px is hard to scan. */
.vm-panel{position:relative;max-width:900px;margin:0 auto;padding:42px 46px;
  border-radius:20px;overflow:hidden;
  background:color-mix(in srgb, var(--brand-primary, #1c7b43) 7%, var(--surface, #fff));
  border:1px solid color-mix(in srgb, var(--brand-primary, #1c7b43) 14%, transparent)}
/* Distinct tint per section so two consecutive panels never read as one
   repeated block, whichever order the owner puts them in. */
.vm-panel--mission{
  background:color-mix(in srgb, var(--brand-accent, #c9a24a) 9%, var(--surface, #fff));
  border-color:color-mix(in srgb, var(--brand-accent, #c9a24a) 20%, transparent)}
/* Decorative only; hidden from assistive tech in the markup.
   Kept on the CLOSING side of the panel, away from the heading. It used to
   sit at inset-inline-start, which in RTL is the same edge as the icon chip
   and title — the glyph landed directly behind them and read as a pair of
   ears sprouting from the icon. Anchored to the opposite corner it stays
   decorative and never overlaps content. */
.vm-quote{position:absolute;bottom:-34px;inset-inline-end:28px;font-size:7rem;
  line-height:1;font-weight:900;pointer-events:none;user-select:none;
  color:color-mix(in srgb, var(--primary, #1c7b43) 10%, transparent)}
.vm-panel--mission .vm-quote{
  color:color-mix(in srgb, var(--accent, #c9a24a) 14%, transparent)}
.vm-panel-head{position:relative;display:flex;align-items:center;gap:12px;
  margin-bottom:16px}
.vm-ic{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;font-size:1.05rem;
  background:color-mix(in srgb, var(--brand-primary, #1c7b43) 14%, transparent);
  color:var(--primary, #1c7b43)}
.vm-panel--mission .vm-ic{
  background:color-mix(in srgb, var(--brand-accent, #c9a24a) 20%, transparent);
  color:var(--accent, #c9a24a)}
.vm-title{position:relative;margin:0;font-size:1.5rem;font-weight:800;
  color:var(--ink);line-height:1.4}
.vm-lead{position:relative;margin:0 0 14px;font-size:.9rem;line-height:1.9;
  color:var(--muted)}
.vm-body{position:relative;margin:0;max-width:680px;font-size:1.22rem;
  line-height:2.05;color:var(--ink);text-align:start}
@media (max-width:640px){
  .vm-panel{padding:28px 22px;border-radius:16px}
  .vm-quote{font-size:4.5rem;bottom:-24px;inset-inline-end:14px}
  .vm-title{font-size:1.25rem}
  .vm-ic{width:36px;height:36px;font-size:.95rem}
  .vm-body{font-size:1.05rem;line-height:1.95}
}