/* ===========================
   Shared CTA component
   =========================== */
:root{
  --nv-noir:#0f172a; --nv-rose:#e11d48; --nv-roseDark:#be123c;
  --nv-dove:#faf7f5; --nv-porcelain:#ffffff; --nv-champagne:#f4e7d6;
  --il-black:#0b1220; --il-ink:#111827;

  /* control how WIDE the bordered box can get */
  --cta-max: 1180px;       /* tweak to 1120/1200 if you prefer */
  --cta-side-gutter: 24px; /* inner side padding so border never hugs edges */
}

/* The *section strip* is full width and white to match neighbors */
.cta-section{
  background:#fff;
  padding-block: 24px;       /* top/bottom rhythm relative to neighbors */
}
@media (min-width:900px){
  .cta-section{ padding-block: 32px; }
}

/* center the bordered box and make it narrower than the viewport */
.cta-section > .ctaLux{
  width: min(var(--cta-max), 100% - (var(--cta-side-gutter) * 2));
  margin-inline: auto;       /* centers the box */
}

/* The bordered CTA box */
.ctaLux{
  position:relative; overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,#fff,#faf7f5);
  box-shadow:0 12px 30px rgba(2,6,23,.08);
  padding:28px 36px;
}
@media (min-width:900px){ .ctaLux{ padding:36px 48px; } }

/* NOVAE rose */
.ctaLux--rose{
  background:
    radial-gradient(880px 360px at 85% -10%, rgba(225,29,72,.10), transparent 60%),
    radial-gradient(820px 300px at -10% -20%, rgba(244,231,214,.28), transparent 60%),
    linear-gradient(180deg,#fff,#faf7f5);
  border-color:rgba(225,29,72,.12);
}

/* Innovationline neutral */
.ctaLux--neutral{
  background:
    radial-gradient(840px 300px at 85% -10%, rgba(2,6,23,.06), transparent 60%),
    linear-gradient(180deg,#fff,#faf7f5);
  border-color:rgba(2,6,23,.06);
}

/* Layout */
.ctaLux .grid{ display:grid; gap:24px; align-items:center; grid-template-columns:1.05fr .95fr; }
@media (max-width:980px){ .ctaLux .grid{ grid-template-columns:1fr; } }

/* Typography */
.ctaLux h2{
  font-family:"Playfair Display", ui-serif, Georgia, serif;
  font-weight:700; letter-spacing:-0.01em; line-height:1.12;
  font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  color:var(--nv-noir); margin:10px 0 8px;
}
.ctaLux p{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system;
  color:#6b7280; font-size:clamp(.98rem, .92rem + .3vw, 1.06rem);
  max-width:60ch;
}

/* Pill + buttons */
.ctaLux .pill{ display:inline-flex; align-items:center; gap:.5rem; font:600 11px/1 Inter,ui-sans-serif,system-ui; padding:.38rem .62rem; border-radius:9999px; background:#fbe9ef; color:var(--nv-noir); border:1px solid var(--nv-champagne); }
.ctaLux .pill .dot{ width:8px;height:8px;border-radius:9999px;background:#16a34a;display:inline-block; }
.ctaLux .actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:14px; }
.ctaLux .btn, .ctaLux .btnPrimary{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:14px; font-weight:700; border:1px solid rgba(15,23,42,.12); background:#fff; color:var(--nv-noir); text-decoration:none; transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease; }
.ctaLux .btn:hover{ background:#f8fafc; transform:translateY(-1px); }
.ctaLux--rose    .btnPrimary{ background:var(--nv-rose); color:#fff; border-color:var(--nv-rose); }
.ctaLux--rose    .btnPrimary:hover{ background:var(--nv-roseDark); }
.ctaLux--neutral .btnPrimary{ background:var(--il-black); color:#fff; border-color:var(--il-black); }
.ctaLux--neutral .btnPrimary:hover{ background:#000; }

/* Media thumbs */
.ctaLux .media{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(120px,1fr); justify-content:end; align-items:center; gap:16px; }
@media (max-width:980px){ .ctaLux .media{ justify-content:start; } }
.ctaLux .thumb{ aspect-ratio:1/1; width:100%; max-width:136px; border-radius:18px; background:#fff; border:1px solid rgba(15,23,42,.08); box-shadow:0 12px 28px rgba(2,6,23,.06); display:grid; place-items:center; overflow:hidden; }
.ctaLux .thumb img{ max-width:80%; max-height:80%; width:auto; height:auto; object-fit:contain; object-position:center; display:block; margin:auto; }
@media (max-width:640px){ .ctaLux .thumb{ max-width:112px; border-radius:16px; } }

/* ===========================
   MOBILE POLISH (<=640px)
   =========================== */
@media (max-width:640px){

  /* Safer spacing + no side-scroll */
  .cta-section{ padding-block:18px; }
  .cta-section, .ctaLux, .ctaLux * { max-width:100%; }
  html, body { overflow-x: hidden; }

  /* Card: slightly tighter, still luxe */
  .ctaLux{
    padding:18px 16px;
    border-radius:18px;
    box-shadow:0 10px 24px rgba(2,6,23,.08);
  }

  /* Layout stack + compact gaps */
  .ctaLux .grid{ gap:14px; grid-template-columns:1fr; }

  /* Pill sizing (no wrap) */
  .ctaLux .pill{
    font-size:10px; padding:.32rem .56rem; white-space:nowrap;
    border-radius:9999px;
  }

  /* Headline and copy: smaller, tighter line-height */
  .ctaLux h2{
    font-size:clamp(1.28rem, 1.05rem + 2.2vw, 1.6rem);
    line-height:1.15; margin:8px 0 6px;
  }
  .ctaLux p{
    font-size:.95rem; line-height:1.45; margin:0;
  }

  /* Button: full-width, comfy touch target */
  .ctaLux .actions{ margin-top:10px; }
  .ctaLux .btnPrimary, .ctaLux .btn{
    width:100%;
    padding:12px 16px;
    border-radius:12px;
  }

  /* Thumbs: horizontal scroll with snap; smaller cards */
  .ctaLux .media{
    grid-auto-columns:minmax(96px, 1fr);
    gap:12px;
    overflow-x:auto;
    padding-bottom:6px; /* avoid scrollbar kiss */
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .ctaLux .thumb{
    max-width:108px;
    border-radius:14px;
    scroll-snap-align:start;
  }
  .ctaLux .thumb img{
    max-width:78%; max-height:78%;
  }
}

/* Slightly roomier on small tablets (641–980px) without touching desktop */
@media (min-width:641px) and (max-width:980px){
  .ctaLux{ padding:28px 28px; }
  .ctaLux .grid{ gap:18px; grid-template-columns:1fr; }
  .ctaLux .media{ justify-content:start; }
}