/**
 * pages.css — Page-specific overrides and layout micro-adjustments
 */

/* ════════════════════════════════════════
   HOME PAGE
   ════════════════════════════════════════ */
.home-hero { padding-block: var(--space-16); }
@media (min-width: 768px) { .home-hero { padding-block: var(--space-20); } }

/* ── Spotlights inline divider between dark bands ── */
.eu-trust-divider { border: none; border-top: 1px solid var(--color-border-inverse); margin-block: 0; }

/* ════════════════════════════════════════
   CATEGORY PAGE
   ════════════════════════════════════════ */
.cat-hero-wrap {
  position: relative;
  background: var(--color-surface-1);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}
.cat-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.cat-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-12);
}
@media (min-width: 768px) { .cat-hero-content { padding-block: var(--space-16); } }
.cat-hero-content h1 { font-size: var(--text-display-lg); margin-bottom: var(--space-3); }
@media (max-width: 767px) { .cat-hero-content h1 { font-size: var(--text-display-md); } }
.cat-hero-tagline { font-size: var(--text-body-lg); color: var(--color-text-secondary); }

/* ════════════════════════════════════════
   PRODUCT PAGE
   ════════════════════════════════════════ */
.product-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (min-width: 1024px) {
  .product-page-layout { grid-template-columns: 55fr 45fr; }
}

.product-gallery-main {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--color-surface-2);
  position: relative;
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(26,25,23,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 150ms ease;
}
.gallery-nav-btn:hover { background: rgba(26,25,23,0.8); }
.gallery-nav-btn--prev { left: var(--space-3); }
.gallery-nav-btn--next { right: var(--space-3); }
.gallery-nav-btn:focus-visible { outline: 2px solid white; }

/* How-to-use steps */
.how-to-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) { .how-to-steps { grid-template-columns: repeat(3, 1fr); } }
.how-step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.how-step__num { font-size: var(--text-display-md); font-family: var(--font-display); color: var(--color-accent); }
.how-step__title { font-size: var(--text-heading-md); font-weight: 600; color: var(--color-text-primary); }
.how-step__desc { font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* Features + License two-col */
.features-license-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 768px) { .features-license-grid { grid-template-columns: 1fr 1fr; } }

.features-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.features-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-body-md); color: var(--color-text-primary); }
.features-list svg { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

/* ════════════════════════════════════════
   BLOG POST
   ════════════════════════════════════════ */
.post-body { padding: var(--space-12) 0; }

/* ════════════════════════════════════════
   ABOUT PAGE — EU DARK BAND
   ════════════════════════════════════════ */
.about-eu-band { padding-block: var(--space-20); }
.about-eu-band h2 { font-size: var(--text-display-md); }
@media (max-width: 767px) { .about-eu-band h2 { font-size: var(--text-display-sm); } }

/* ════════════════════════════════════════
   TEMPLATES INDEX BENTO
   ════════════════════════════════════════ */
.bento-cell--placeholder {
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
}

/* ════════════════════════════════════════
   FREE RESOURCES GRID
   ════════════════════════════════════════ */
.free-resources-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) { .free-resources-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .free-resources-grid { grid-template-columns: repeat(3, 1fr); } }

/* ════════════════════════════════════════
   CONTACT 2-COL
   ════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 768px) { .contact-layout { grid-template-columns: 55fr 45fr; } }

.contact-form-wrap { display: flex; flex-direction: column; gap: var(--space-5); }
.common-questions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.common-questions li { font-size: var(--text-body-sm); color: var(--color-text-secondary); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.common-questions li:last-child { border-bottom: none; }

/* ════════════════════════════════════════
   NEWSLETTER PARTIAL
   ════════════════════════════════════════ */
.newsletter-wrap { max-width: 540px; margin-inline: auto; text-align: center; }
.newsletter-wrap h2 { margin-bottom: var(--space-3); }
.newsletter-wrap p  { margin-bottom: var(--space-5); }

/* ════════════════════════════════════════
   SECTION HEADINGS & EYEBROWS
   ════════════════════════════════════════ */
.section-heading { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400; line-height: 1.15; margin-bottom: var(--space-4); }
.section-sub { font-size: var(--text-body-lg); color: var(--color-text-secondary); margin-bottom: var(--space-8); max-width: 600px; margin-inline: auto; }
.section-eyebrow { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-2); }
.section-reassurance { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-6); }
.section--dark .section-sub, .section--dark .section-reassurance { color: var(--color-text-inverse-muted); }
.section--dark .section-eyebrow { color: var(--color-accent-on-dark, var(--color-accent)); }
.text-center { text-align: center; }
.trust-tagline { font-size: var(--text-body-md); color: var(--color-text-secondary); padding-block: var(--space-4); }

/* ════════════════════════════════════════
   HERO COMPONENTS
   ════════════════════════════════════════ */
.hero-centered__inner { text-align: center; max-width: 760px; margin-inline: auto; }
.hero-heading { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; line-height: 1.1; margin-bottom: var(--space-4); color: var(--color-text-inverse); }
.hero-sub { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--color-text-inverse-muted); max-width: 620px; margin-inline: auto; margin-bottom: var(--space-6); }
.hero-eyebrow { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-2); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-5); }
.hero-trust-line { font-size: var(--text-sm); color: var(--color-text-inverse-muted); display: flex; align-items: center; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.hero-trust-line svg { flex-shrink: 0; }
.cat-hero-body { color: var(--color-text-inverse-muted); max-width: 600px; margin-bottom: var(--space-5); }

/* Home hero showcase image (sits below the centered hero copy) */
.hero-showcase { max-width: 640px; margin: var(--space-10) auto 0; }
.hero-showcase img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
@media (min-width: 768px) { .hero-showcase { margin-top: var(--space-12); } }

/* ════════════════════════════════════════
   HOW-IT-WORKS STEPS
   ════════════════════════════════════════ */
.how-to-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 640px) { .how-to-steps { grid-template-columns: repeat(3, 1fr); } }
.how-to-step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6); background: var(--color-surface-2); border-radius: var(--radius-lg); }
.how-to-step__number { font-size: var(--text-display-md); font-family: var(--font-display); color: var(--color-accent); line-height: 1; }
.how-to-step__icon { color: var(--color-accent); }
.how-to-step__title { font-size: var(--text-heading-sm); font-weight: 600; color: var(--color-text-primary); margin: 0; }
.how-to-step__body { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin: 0; }

/* ════════════════════════════════════════
   SPLIT LAYOUTS
   ════════════════════════════════════════ */
.split-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }
@media (min-width: 768px) { .split-layout { grid-template-columns: 1fr 1fr; } }
.split-layout--right .split-layout__media { order: 2; }
.split-layout--right .split-layout__content { order: 1; }
@media (max-width: 767px) { .split-layout--right .split-layout__media, .split-layout--right .split-layout__content { order: unset; } }
.split-layout__img { border-radius: var(--radius-lg); width: 100%; height: auto; display: block; }
.split-layout__content h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-4); }
.split-layout__content p { color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.split-layout__content .btn { display: inline-flex; }

/* ════════════════════════════════════════
   PILLARS GRID (About page)
   ════════════════════════════════════════ */
.pillars-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 640px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding: var(--space-6); background: var(--color-surface-2); border-radius: var(--radius-lg); }
.pillar__icon { color: var(--color-accent); margin-bottom: var(--space-3); }
.pillar__title { font-size: var(--text-heading-sm); font-weight: 600; margin-bottom: var(--space-3); }
.pillar__body { font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* ════════════════════════════════════════
   CTA BAND
   ════════════════════════════════════════ */
.cta-band__inner { max-width: 680px; margin-inline: auto; text-align: center; }
.cta-band__heading { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--color-text-inverse); margin-bottom: var(--space-4); }
.cta-band__body { color: var(--color-text-inverse-muted); margin-bottom: var(--space-6); font-size: var(--text-body-lg); }
.cta-band__reassurance { font-size: var(--text-sm); color: var(--color-text-inverse-muted); margin-top: var(--space-4); }

/* ════════════════════════════════════════
   NEWSLETTER SECTION
   ════════════════════════════════════════ */
.newsletter-section { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 768px) { .newsletter-section { grid-template-columns: 1fr 1fr; } }
.newsletter-headline { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-text-inverse); margin-bottom: var(--space-2); }
.newsletter-subline { color: var(--color-text-inverse-muted); margin-bottom: 0; }
.newsletter-form.form-inline { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.newsletter-form .form-input { flex: 1; min-width: 0; }

/* ════════════════════════════════════════
   FEATURE LIST
   ════════════════════════════════════════ */
.feature-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.feature-list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-body-md); }
.feature-list svg { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

/* ════════════════════════════════════════
   RELATED LIST (category pages)
   ════════════════════════════════════════ */
.related-list { list-style: none; padding: 0; margin: var(--space-6) auto 0; max-width: 640px; display: flex; flex-direction: column; gap: var(--space-3); }
.related-list__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-primary); font-weight: 500; transition: background 150ms ease; }
.related-list__link:hover { background: var(--color-surface-1); }
.related-list__link svg { color: var(--color-accent); flex-shrink: 0; }

/* ════════════════════════════════════════
   BLOG POST LAYOUT
   ════════════════════════════════════════ */
.blog-post-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) { .blog-post-layout { grid-template-columns: 1fr 280px; } }
.blog-post-body { font-size: var(--text-body-md); line-height: 1.75; max-width: 720px; }
.blog-post-body h2 { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-block: var(--space-8) var(--space-4); }
.blog-post-body h3 { font-size: var(--text-heading-sm); font-weight: 600; margin-block: var(--space-5) var(--space-3); }
.blog-post-body p { margin-bottom: var(--space-4); color: var(--color-text-secondary); }
.blog-post-body ul, .blog-post-body ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.blog-post-body li { margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.blog-post-body a { color: var(--color-accent); text-decoration: underline; }
.blog-post-body strong { color: var(--color-text-primary); }
.blog-grid--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 639px) { .blog-grid--2col { grid-template-columns: 1fr; } }
.blog-post-hero-img { margin-bottom: -1px; }
.blog-post-hero-img img { width: 100%; max-height: 480px; object-fit: cover; display: block; }

/* Sidebar cards */
.sidebar-card { background: var(--color-surface-2); border-radius: var(--radius-lg); padding: var(--space-5); }
.sidebar-card__eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-2); }
.sidebar-card__heading { font-size: var(--text-heading-sm); font-weight: 600; margin-bottom: var(--space-2); }
.sidebar-card__body { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }

/* In-article product CTA */
.post-product-cta { background: var(--color-accent-subtle); border-left: 3px solid var(--color-accent); padding: var(--space-4); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-block: var(--space-6); }
.post-product-cta p { margin: 0; display: flex; gap: var(--space-2); align-items: center; }

/* ════════════════════════════════════════
   PRODUCT PAGE ADDITIONS
   ════════════════════════════════════════ */
/* Note: .product-purchase-block base styles in components.css; top override only */
.product-price-block { margin-block: var(--space-5); display: flex; align-items: baseline; gap: var(--space-3); }
.product-price { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--color-ink); }
.product-price-was { font-size: var(--text-body-lg); color: var(--color-text-secondary); text-decoration: line-through; }
.product-tagline { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.product-summary { font-size: var(--text-body-md); color: var(--color-text-secondary); margin-bottom: var(--space-4); line-height: 1.7; }
.product-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.product-trust-micro { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.product-trust-micro svg { flex-shrink: 0; }
.buy-now-form { margin-bottom: var(--space-3); }

/* Spec tabs */
.spec-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); }
.spec-dl dt { font-weight: 600; font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.spec-dl dd { font-size: var(--text-body-sm); color: var(--color-text-primary); margin: 0; }
.spec-detail { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-top: var(--space-3); }

/* ════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════ */
.contact-dl { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.contact-dl dt { font-weight: 600; font-size: var(--text-body-sm); color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.contact-dl dd { font-size: var(--text-body-md); margin-left: var(--space-6); }
.contact-common h3 { font-size: var(--text-heading-sm); font-weight: 600; margin-bottom: var(--space-4); }
.common-reasons-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.common-reasons-list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.common-reasons-list svg { flex-shrink: 0; margin-top: 2px; }
.form-reassurance { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-3); }
.form-label-optional { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: 400; }

/* ════════════════════════════════════════
   LEGAL PAGES
   ════════════════════════════════════════ */
.legal-footer-links { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--text-sm); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.legal-footer-links a { color: var(--color-text-secondary); }
.legal-footer-links a:hover { color: var(--color-accent); }
.legal-nav ol { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.legal-nav li { font-size: var(--text-body-sm); }
.legal-nav { background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-block: var(--space-6); }

/* ════════════════════════════════════════
   HEADER ADDITIONS (base in components.css)
   ════════════════════════════════════════ */
.logo-mark { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-accent); }
.logo-text { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-primary); }
.header-cta { display: none; }
@media (min-width: 768px) { .header-cta { display: inline-flex; } }

/* nav-list additions */
.nav-item { position: relative; }
.nav-chevron { transition: transform 200ms ease; }
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Mega-menu multi-column layout */
.mega-menu-inner { display: flex; gap: var(--space-6); padding: var(--space-5); }
.mega-menu-col { flex: 1; min-width: 0; }
.mega-menu-col-heading { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-secondary); font-weight: 700; margin-bottom: var(--space-3); }
.mega-menu-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mega-menu-link-icon { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.mega-menu-link-label { font-size: var(--text-body-sm); font-weight: 600; display: block; }
.mega-menu-link-desc { font-size: var(--text-xs); color: var(--color-text-secondary); display: block; margin-top: 1px; }
.mega-menu-featured { min-width: 180px; border-left: 1px solid var(--color-border); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.mega-menu-featured-eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); font-weight: 700; }
.mega-menu-featured-img-wrap { border-radius: var(--radius-md); overflow: hidden; }
.mega-menu-featured-img { width: 100%; height: auto; display: block; }
.mega-menu-featured-title { font-size: var(--text-body-sm); font-weight: 600; }

/* Drawer additions (base in components.css) */
.drawer-body { padding: var(--space-4) var(--space-5) var(--space-8); flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.drawer-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.drawer-nav-link { display: flex; align-items: center; padding: var(--space-3); border-radius: var(--radius-md); text-decoration: none; font-size: var(--text-body-md); font-weight: 500; color: var(--color-text-primary); }
.drawer-nav-link:hover { background: var(--color-surface-2); }
.drawer-submenu-link { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-body-sm); text-decoration: none; color: var(--color-text-secondary); }
.drawer-submenu-link:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.drawer-submenu-link--all { color: var(--color-accent); font-weight: 600; }
.drawer-cta-wrap { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

/* Footer brand col */
.footer-brand-col { margin-bottom: var(--space-8); }
.footer-logo .logo-text { color: var(--color-text-inverse); }
.footer-tagline { font-size: var(--text-body-sm); color: var(--color-text-inverse-muted); margin-top: var(--space-2); margin-bottom: var(--space-5); max-width: 320px; }
.footer-newsletter-label { font-size: var(--text-body-sm); color: var(--color-text-inverse-muted); margin-bottom: var(--space-3); }