/* =========================================================
   Nuni — Campaign Cards widget
   Ports Hero.html .campaign-section design. BEM scope:
   .nuni-cc (Campaign Cards) so it never collides with the
   existing Campaign widget or other widgets on the page.
   ========================================================= */

/* Strip parent padding/margin at any nesting depth so the section sits
   flush against adjacent Nuni v3 sections. Descendant `:has()` matches
   regardless of how deeply Elementor wraps the widget. */
.e-con:has(.elementor-widget-nuni-campaign-cards),
.e-con-inner:has(.elementor-widget-nuni-campaign-cards),
.elementor-section:has(.elementor-widget-nuni-campaign-cards),
.elementor-container:has(.elementor-widget-nuni-campaign-cards),
.elementor-row:has(.elementor-widget-nuni-campaign-cards),
.elementor-column:has(.elementor-widget-nuni-campaign-cards),
.elementor-widget-wrap:has(.elementor-widget-nuni-campaign-cards) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  max-width: none !important;
  min-height: 0 !important;
}
.elementor-widget.elementor-widget-nuni-campaign-cards {
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-widget-nuni-campaign-cards,
.elementor-widget-nuni-campaign-cards + .elementor-widget,
.elementor-widget + .elementor-widget-nuni-campaign-cards {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
/* Break the section out to full viewport width like the other Nuni v3
   widgets. The overflow-x: clip rule in hero-stage.css already covers
   the .nuni-cc selector via :has() — extending it here too defensively. */
.elementor-widget-nuni-campaign-cards,
.elementor-widget-nuni-campaign-cards > .elementor-widget-container {
  width: 100%;
  max-width: none;
}
.elementor-widget-nuni-campaign-cards > .elementor-widget-container { padding: 0; }
.elementor-widget-nuni-campaign-cards > .elementor-widget-container > .nuni-cc {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
}
.elementor-editor-active .elementor-widget-nuni-campaign-cards > .elementor-widget-container > .nuni-cc {
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
}
html:has(.nuni-cc),
body:has(.nuni-cc) {
  overflow-x: clip;
}

.nuni-cc {
  /* Brand tokens with sensible defaults. */
  --nuni-cc-bg:           #FAF9F6;
  --nuni-cc-ink:          #1C140C;
  --nuni-cc-ink-2:        #2D2319;
  --nuni-cc-tag-color:    #B68A42;
  --nuni-cc-img-bg:       #EFEFEF;
  --nuni-cc-line:         rgba(28, 20, 12, 0.06);
  --nuni-cc-line-2:       rgba(28, 20, 12, 0.08);
  /* Standard Nuni primary button: ink fill, sand-deep on hover. Matches
     the hero CTA, About widget primary button, and Newsletter submit. */
  --nuni-cc-cta-bg:       var(--e-global-color-text,      #2A1F14);
  --nuni-cc-cta-bg-hover: var(--e-global-color-secondary, #8A765C);
  --nuni-cc-cta-color:    #F4ECDD;

  background: var(--nuni-cc-bg);
  color: var(--nuni-cc-ink);
  padding: clamp(60px, 8vw, 100px) clamp(24px, 5vw, 80px);
  position: relative;
  /* No hairline borders — the section sits between other full-bleed
     Nuni v3 sections and a 1px border becomes a visible seam against
     the neighbouring colored backgrounds. Hero.html had borders because
     the campaign was standalone there. */
}

.nuni-cc__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 60px);
}

/* ===== Header — title on the left, intro paragraphs on the right ===== */
.nuni-cc__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: left;
}
@media (min-width: 820px) {
  .nuni-cc__header--split {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 40px;
  }
}

.nuni-cc__title {
  font-family: 'Camello Rough', 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 500;
  color: var(--nuni-cc-ink);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.nuni-cc__intro {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.65;
  color: var(--nuni-cc-ink-2);
  max-width: 480px;
}
.nuni-cc__intro p { margin: 0 0 16px; }
.nuni-cc__intro p:last-child { margin: 0; }

/* ===== Cards grid =====
   The `data-cols` attribute on .nuni-cc holds the column count picked
   in the editor (1, 2 or 3). Mobile collapses to one column. */
.nuni-cc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
}
@media (min-width: 768px) {
  .nuni-cc[data-cols="2"] .nuni-cc__grid { grid-template-columns: repeat(2, 1fr); }
  .nuni-cc[data-cols="3"] .nuni-cc__grid { grid-template-columns: repeat(3, 1fr); }
  /* 1-column stays full-width on desktop too — used when the card is a
     single feature spread (e.g. one big hero promo). */
  .nuni-cc[data-cols="1"] .nuni-cc__grid {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
  }
}

.nuni-cc__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.25, .46, .45, .94);
}
.nuni-cc__card:hover { color: inherit; }
/* Non-anchor variant: same look, no pointer */
div.nuni-cc__card { cursor: default; }

.nuni-cc__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--nuni-cc-img-bg);
  position: relative;
  border: 1px solid var(--nuni-cc-line);
  transition: box-shadow .4s ease;
}
.nuni-cc__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.25, .46, .45, .94);
}
.nuni-cc__card:hover .nuni-cc__img-wrap img { transform: scale(1.03); }
.nuni-cc__card:hover .nuni-cc__img-wrap {
  box-shadow: 0 12px 30px rgba(28, 20, 12, 0.08);
}

.nuni-cc__card-info {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nuni-cc__card-tag {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nuni-cc-tag-color);
}

.nuni-cc__card-title {
  font-family: 'Camello Rough', 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 500;
  color: var(--nuni-cc-ink);
  margin: 0;
  line-height: 1.2;
}

.nuni-cc__card-desc {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nuni-cc-ink-2);
  margin: 0;
}
.nuni-cc__card-price {
  font-weight: 700;
  margin-top: 4px;
}

/* ===== CTA button — sage-green matte pill ===== */
.nuni-cc__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(10px, 2vw, 30px);
}
.nuni-cc__cta,
.nuni-cc__cta:link,
.nuni-cc__cta:visited {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--nuni-cc-cta-bg);
  color: var(--nuni-cc-cta-color);
  padding: 13px 28px;
  border: 1.5px solid var(--nuni-cc-cta-bg);
  border-radius: 999px;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Lock down every interactive state so the theme can't paint it pink. */
.nuni-cc__cta:hover,
.nuni-cc__cta:focus,
.nuni-cc__cta:focus-visible,
.nuni-cc__cta:active {
  background: var(--nuni-cc-cta-bg-hover) !important;
  border-color: var(--nuni-cc-cta-bg-hover) !important;
  color: var(--nuni-cc-cta-color) !important;
  outline: 0 !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
.nuni-cc__cta:active { transform: translateY(0); }
.nuni-cc__cta--static { cursor: default; }
.nuni-cc__cta--static:hover {
  background: var(--nuni-cc-cta-bg) !important;
  border-color: var(--nuni-cc-cta-bg) !important;
  transform: none;
}

/* ===== Narrow phones — slightly tighter spacing ===== */
@media (max-width: 520px) {
  .nuni-cc {
    padding: clamp(48px, 12vw, 64px) 20px;
  }
  .nuni-cc__cta {
    padding: 12px 22px;
    font-size: 13px;
  }
}