/*
  layout.css — Grid & Section Architecture
  A=3: Single-column editorial, 560px column, full-bleed accents
  D=7: Hard geometric cutouts via clip-path polygon borders
*/

/* =====================================================
   EDITORIAL COLUMN SYSTEM
   Reading pattern: contemplative vertical descent
   ===================================================== */

/* Outer page wrapper */
.page-body {
  width: 100%;
  overflow-x: hidden;
}

main {
  padding-inline: var(--page-gutter);
}

/* The editorial column — ultra-narrow 560px */
.col {
  width: min(var(--col-editorial), 100%);
  margin-inline: auto;
}

/* Medium container — for product reveal, reviews */
.col-wide {
  width: min(var(--col-wide), 100%);
  margin-inline: auto;
}

/* Full outer container — for nav, footer */
.col-max {
  width: min(var(--col-max), 100%);
  margin-inline: auto;
}

/* Break-out: images extend slightly past the editorial column */
.breakout {
  width: 100%;
  max-width: var(--col-wide);
  margin-inline: auto;
}

/* Full-bleed sections span edge-to-edge within the padded main area */
.full-bleed {
  width: calc(100% + 2 * var(--page-gutter));
  margin-inline: calc(-1 * var(--page-gutter));
  position: relative;
}

/* =====================================================
   HERO SECTION
   Geometric split: narrow left (meta/byline) + dominant headline
   ===================================================== */

.hero {
  padding-top: var(--space-9);
  padding-bottom: var(--space-10);
  position: relative;
  overflow: visible;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.hero__eyebrow-line {
  width: 2.5rem;
  height: 1.5px;
  background-color: var(--brand-secondary);
  flex-shrink: 0;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  font-optical-sizing: auto;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-feature-settings: var(--ff-display);
  margin-bottom: var(--space-6);
  max-width: 28ch;
}

.hero__deck {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 44ch;
  margin-bottom: var(--space-5);
  border-left: 2px solid var(--brand-accent);
  padding-left: var(--space-4);
}

.hero__byline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.hero__byline strong {
  color: var(--text-primary);
  font-weight: 500;
}

/* Hero image — breaks out of column */
.hero__image-wrap {
  position: relative;
  overflow: hidden;
  /* Clip-path: top-right corner cut */
  clip-path: polygon(0 0, calc(100% - 2.5rem) 0, 100% 2.5rem, 100% 100%, 0 100%);
}

.hero__image-wrap img {
  width: 100%;
  height: clamp(280px, 50vw, 520px);
  object-fit: cover;
  object-position: center 30%;
  /* Image treatment: high-contrast tint */
  filter: contrast(1.1) brightness(0.9) saturate(0.85);
  transition: transform var(--transition-slow);
}

.hero__image-wrap:hover img {
  transform: scale(1.03);
}

.hero__image-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-3);
  padding-left: var(--space-2);
}

/* =====================================================
   INTRO BAND — full-bleed lavender strip
   ===================================================== */

.intro-band {
  background-color: var(--surface-mid);
  padding: var(--space-7) 0;
  margin: var(--space-9) 0;
  clip-path: var(--clip-exit-down);
  position: relative;
}

.intro-band p {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 46ch;
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.intro-band strong {
  font-weight: 700;
  color: var(--brand-primary);
}

/* =====================================================
   CONTENT BLOCKS (5 editorial articles)
   Each block has unique internal layout
   ===================================================== */

.article-section {
  padding: var(--space-9) 0;
  border-top: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}

.article-section + .article-section {
  /* No double border */
}

/* Section number — background numeral (D=7 decorative) */
.article-section__number-bg {
  position: absolute;
  right: -0.1em;
  top: -0.1em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22vw;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
  z-index: var(--z-below);
  font-feature-settings: "onum" 1;
}

.article-section__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-primary);
  font-feature-settings: var(--ff-display);
  margin-bottom: var(--space-6);
}

.article-section__body p {
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

.article-section__body p:last-child {
  margin-bottom: 0;
}

/* Block image: breaks out */
.article-section__image-wrap {
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
  clip-path: var(--clip-wedge-right);
}

.article-section__image-wrap img {
  width: 100%;
  height: clamp(220px, 40vw, 420px);
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.08) brightness(0.92) saturate(0.88);
  transition: transform var(--transition-slow);
}

.article-section__image-wrap:hover img {
  transform: scale(1.04);
}

.article-section__image-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-3);
  padding-inline: var(--space-2);
}

/* Alternate: image right, then left, etc. — use class modifiers */
.article-section--alt .article-section__image-wrap {
  clip-path: var(--clip-wedge-left);
}

/* =====================================================
   CONNECTOR — full-bleed violet pull-quote
   ===================================================== */

.connector-section {
  background-color: var(--brand-primary);
  color: var(--text-inverse);
  padding: var(--space-10) 0;
  clip-path: polygon(0 3rem, 100% 0, 100% calc(100% - 3rem), 0 100%);
  margin: var(--space-10) 0;
  position: relative;
  overflow: hidden;
}

.connector-section::before {
  content: '\201C';
  position: absolute;
  left: 50%;
  top: -0.1em;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 30vw;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  user-select: none;
}

.connector-section p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 300;
  font-style: italic;
  font-optical-sizing: auto;
  line-height: 1.55;
  color: var(--text-inverse);
  text-align: center;
  max-width: 36ch;
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.connector-section strong {
  font-weight: 700;
  color: var(--brand-accent);
  font-style: normal;
}

/* =====================================================
   PRODUCT REVEAL — DryWear
   Asymmetric: large image left, text right, or stacked
   ===================================================== */

.product-reveal {
  padding: var(--space-9) 0;
}

.product-reveal__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin-bottom: var(--space-5);
}

.product-reveal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 768px) {
  .product-reveal__grid {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    gap: var(--space-8);
  }
}

.product-reveal__image-wrap {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), calc(100% - 3rem) 100%, 0 100%);
}

.product-reveal__image-wrap img {
  width: 100%;
  height: clamp(280px, 50vw, 580px);
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.05) brightness(0.95);
  transition: transform var(--transition-slow);
}

.product-reveal__image-wrap:hover img {
  transform: scale(1.03);
}

.product-reveal__content {
  padding-top: var(--space-4);
}

.product-reveal__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-primary);
  font-feature-settings: var(--ff-display);
  margin-bottom: var(--space-4);
}

.product-reveal__intro {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.product-reveal__list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-6);
}

.product-reveal__list li {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.65;
  color: var(--text-primary);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.product-reveal__list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--brand-accent);
  flex-shrink: 0;
  margin-top: 0.55em;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.product-reveal__list li:last-child {
  border-bottom: none;
}

.product-reveal__body-text {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* =====================================================
   REVIEWS — editorial stacked format
   Not a card row — each review occupies full width,
   typographic emphasis on the quote
   ===================================================== */

.reviews-section {
  padding: var(--space-9) 0;
  border-top: 1px solid var(--border-subtle);
}

.reviews-section__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-7);
}

.review-item {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.review-item:last-child {
  border-bottom: none;
}

.review-item__quote {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  font-weight: 300;
  font-style: italic;
  font-optical-sizing: auto;
  line-height: 1.5;
  color: var(--text-primary);
  font-feature-settings: var(--ff-display);
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  border-left: 3px solid var(--brand-accent);
}

.review-item__meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  padding-left: var(--space-5);
}

/* =====================================================
   CTA SECTION — full-bleed violet, oversized type
   ===================================================== */

.cta-section {
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
  padding: var(--space-10) 0;
  clip-path: polygon(0 3.5rem, 100% 0, 100% 100%, 0 100%);
  margin-top: var(--space-10);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Large background text — decorative */
.cta-section::before {
  content: '90';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 50vw;
  line-height: 1;
  color: rgba(255,255,255,0.03);
  pointer-events: none;
  user-select: none;
}

.cta-section__inner {
  position: relative;
  z-index: var(--z-raised);
  padding: var(--space-6) var(--space-6) 0;
}

.cta-section__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-inverse);
  font-feature-settings: var(--ff-display);
  max-width: 22ch;
  margin: 0 auto var(--space-5);
}

.cta-section__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  color: rgba(245, 242, 251, 0.75);
  margin-bottom: var(--space-7);
  max-width: 38ch;
  margin-inline: auto;
  line-height: 1.7;
}

.cta-section__price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(245, 242, 251, 0.5);
  margin-top: var(--space-4);
  letter-spacing: 0.08em;
}

/* =====================================================
   FOOTER
   ===================================================== */

.site-footer {
  background-color: var(--brand-primary);
  color: rgba(245, 242, 251, 0.7);
  padding: var(--space-10) 0 var(--space-7);
  position: relative;
  overflow: hidden;
}

/* Large background wordmark */
.site-footer::before {
  content: 'Luravix';
  position: absolute;
  bottom: -0.15em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28vw;
  line-height: 1;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.footer-inner {
  position: relative;
  z-index: var(--z-raised);
  padding-inline: var(--page-gutter);
}

.footer-top {
  padding-bottom: var(--space-7);
  margin-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.footer-nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(245, 242, 251, 0.65);
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--brand-accent);
}

.footer-legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-8);
  margin-bottom: var(--space-7);
}

@media (max-width: 680px) {
  .footer-legal-grid {
    grid-template-columns: 1fr;
  }
}

.footer-legal-grid p {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.65;
  color: rgba(245, 242, 251, 0.5);
  margin-bottom: var(--space-2);
}

.footer-legal-grid p:last-child {
  margin-bottom: 0;
}

.footer-legal-grid strong {
  color: rgba(245, 242, 251, 0.8);
}

.footer-legal-grid a {
  color: rgba(245, 242, 251, 0.5);
}

.footer-legal-grid a:hover {
  color: var(--brand-accent);
}

.footer-disclosures {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.footer-disclosures p {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.65;
  color: rgba(245, 242, 251, 0.38);
  margin-bottom: var(--space-3);
}

.footer-disclosures p:last-child {
  margin-bottom: 0;
}

.footer-disclosures strong {
  color: rgba(245, 242, 251, 0.55);
  font-weight: 500;
}

.footer-copyright {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(245, 242, 251, 0.3);
  text-align: center;
  letter-spacing: 0.08em;
}

/* =====================================================
   LEGAL PAGES
   ===================================================== */

.legal-layout {
  padding: var(--space-9) 0 var(--space-10);
}

.legal-layout h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
  font-feature-settings: var(--ff-display);
  margin-bottom: var(--space-4);
}

.legal-layout .updated {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.legal-layout h2 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin: var(--space-7) 0 var(--space-3);
}

.legal-layout p {
  font-size: var(--text-body);
  line-height: 1.8;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.legal-layout ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-5);
}

.legal-layout ul li {
  font-size: var(--text-body);
  line-height: 1.75;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  color: var(--text-primary);
}

.legal-layout ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 6px;
  background-color: var(--brand-accent);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.legal-layout ul li:last-child {
  border-bottom: none;
}

/* Contact page grid */
.contact-grid {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-6);
}

.contact-item {
  background: var(--surface-raised);
  border-left: 2.5px solid var(--brand-accent);
  padding: var(--space-4) var(--space-5);
  clip-path: var(--clip-wedge-right);
}

.contact-item strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.contact-item span,
.contact-item a {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */

@media (max-width: 680px) {
  .hero {
    padding-top: var(--space-7);
    padding-bottom: var(--space-8);
  }

  .cta-section {
    clip-path: polygon(0 2rem, 100% 0, 100% 100%, 0 100%);
    margin-top: var(--space-8);
  }

  .connector-section {
    clip-path: polygon(0 2rem, 100% 0, 100% calc(100% - 2rem), 0 100%);
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 900px) {
  .breakout {
    width: min(var(--col-wide), calc(100% + var(--space-6)));
    margin-inline: auto;
  }
}