/* ============================================================================
   POUYA EDITS — /chess-video-editor/ landing page

   The du-* components below are the shared landing-page kit, written first for
   /video-editor-dubai/ and reused here unchanged: hero, stat bar, section,
   cards, price list, FAQ accordion, CTA band. They are duplicated rather than
   shared because render.php gives each page exactly one stylesheet of its own
   and every page CSS in this theme already carries the same reset and header
   block. Edit both files, or extract them, but do not half-do it.

   Hand-written, not part of the design export. Every value here comes from
   css/tokens.css; nothing hardcodes a colour, radius or shadow that has a
   token. Structure follows the same rhythm as the other interior pages:
   centred max-1200 container, 48-96px section padding, hairline cards.
   ============================================================================ */

/* ---- SHARED RESET + HEADER ----------------------------------------------
   Byte-identical to the block every other exported page CSS carries. The
   header markup is swapped in by pe_resolve(), but its styles live in the
   per-page stylesheet, so a page without this block renders the nav unstyled.
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--surface-page); }
body { font-family: var(--font-body); }
a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
.site-header .bar { max-width: 1160px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header .logo { display: flex; align-items: center; gap: 10px; }
.site-header .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--text-primary); }
.site-header .nav-desktop { display: flex; align-items: center; gap: 28px; }
.site-header .nav-desktop a { font-family: var(--font-body); font-weight: 500; font-size: 14.5px; color: var(--text-secondary); transition: color 0.2s ease; }
.site-header .nav-desktop a:hover { color: var(--blue-600); }
.site-header .nav-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border-subtle); background: var(--white); border-radius: 10px; cursor: pointer; color: var(--text-primary); }
@media (max-width: 720px) { .site-header .nav-desktop { display: none !important; } .site-header .nav-burger { display: inline-flex !important; } }

/* ---- HERO ---------------------------------------------------------------- */

.du-hero {
  padding: 72px 32px 56px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.du-locale {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.du-hero h1 {
  color: var(--text-primary);
  margin: 0 0 18px;
}

.du-hero p {
  color: var(--text-secondary);
  margin: 0 auto 28px;
  max-width: 620px;
}

.du-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- STAT BAR ------------------------------------------------------------ */

.du-stats {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px 72px;
}

.du-stats-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.du-stat {
  background: var(--surface-card);
  padding: 28px 24px;
  text-align: center;
}

.du-stat-num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 2rem;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-accent);
  margin-bottom: 6px;
}

.du-stat-label {
  color: var(--text-muted);
}

/* ---- GENERIC SECTION ----------------------------------------------------- */

.du-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 88px;
}

.du-section-head {
  max-width: 720px;
  margin: 0 0 36px;
}

.du-section-head h2 {
  color: var(--text-primary);
  margin: 10px 0 14px;
}

.du-section-head p {
  color: var(--text-secondary);
  margin: 0;
}

.du-alt {
  background: var(--surface-alt);
  border-top: 1px solid var(--accent-soft-border);
  border-bottom: 1px solid var(--accent-soft-border);
  padding-top: 72px;
  margin-bottom: 88px;
}

.du-alt .du-section {
  padding-bottom: 72px;
}

/* ---- AUDIENCE CARDS ------------------------------------------------------ */

.du-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.du-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.du-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.du-card h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0 0 10px;
}

.du-card p {
  color: var(--text-secondary);
  margin: 0;
}

.du-card-tag {
  margin-bottom: 14px;
}

/* ---- SERVICE / PRICE LIST ------------------------------------------------ */

.du-price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.du-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.du-price:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.du-price-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  color: var(--text-primary);
}

.du-price-desc {
  color: var(--text-muted);
  margin: 4px 0 0;
  display: block;
}

.du-price-tag {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.125rem;
  color: var(--text-accent);
  white-space: nowrap;
}

/* ---- CASE ROW ------------------------------------------------------------ */

.du-cases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.du-case {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.du-case:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.du-case-num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.5rem;
  letter-spacing: var(--tracking-tight);
  color: var(--text-accent);
  margin-bottom: 8px;
}

.du-case-txt {
  color: var(--text-secondary);
}

/* ---- FAQ ----------------------------------------------------------------- */

.du-faq {
  max-width: 820px;
}

.du-faq details {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 12px;
}

.du-faq details[open] {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-xs);
}

.du-faq summary {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.du-faq summary::-webkit-details-marker { display: none; }

.du-faq summary::after {
  content: '+';
  font-weight: var(--weight-regular);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-accent);
  flex: none;
}

.du-faq details[open] summary::after { content: '\2013'; }

.du-faq details p {
  color: var(--text-secondary);
  margin: 14px 0 0;
}

/* ---- CTA BAND ------------------------------------------------------------ */

.du-cta {
  max-width: 1200px;
  margin: 0 auto 96px;
  padding: 0 32px;
}

.du-cta-inner {
  background: var(--surface-dark);
  border-radius: var(--radius-xl);
  padding: 56px 40px;
  text-align: center;
}

.du-cta-inner h2 {
  color: var(--text-inverse);
  margin: 0 0 14px;
}

.du-cta-inner p {
  color: var(--ink-200);
  margin: 0 auto 28px;
  max-width: 520px;
}

/* ---- RESPONSIVE ---------------------------------------------------------- */

@media (max-width: 900px) {
  .du-grid-3,
  .du-price-grid { grid-template-columns: 1fr; }
  .du-cases      { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .du-hero      { padding: 48px 20px 40px; }
  .du-stats     { padding: 0 20px 56px; }
  .du-section   { padding: 0 20px 64px; }
  .du-cta       { padding: 0 20px; }
  .du-stats-inner { grid-template-columns: 1fr; }
  .du-cases     { grid-template-columns: 1fr; }
  .du-cta-inner { padding: 40px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .du-card, .du-price, .du-case { transition: none; }
  .du-card:hover, .du-price:hover, .du-case:hover { transform: none; }
}

/* ---- Inline links in body copy ----------------------------------------

   A link inside a paragraph is set in the accent and nothing else, which
   measures 2:1 against the body colour around it where 3:1 is the minimum
   for distinguishing it by colour alone. Underlining settles it without
   darkening the accent, and only where a link sits in running text: the
   nav, the cards and the price rows are whole clickable blocks and read as
   links from their shape. */

.du-section-head p a,
.du-faq details p a,
.du-cta-inner p a,
.du-hero p a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* The dirham conversion under a price card. */
.du-price-aed { display: block; margin-top: 3px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-muted); }