/* Fixes and layout-variant styles for the Clicky page.
   Loaded after the exported Next.js stylesheets so it can override them. */

/* Swiper's base CSS sets .swiper-slide to block, which broke the
   two-column "get more calls" slide. Restore the module layout. */
.swiper-slide.GetMore_slide__qYBgP {
  display: flex;
  align-items: center;
}
@media (max-width: 1023px) {
  .swiper-slide.GetMore_slide__qYBgP {
    flex-direction: column;
  }
}

/* ---------- Layout variants ----------
   Each variant restyles the whole section so the difference is obvious. */

.lv-sec {
  transition: background-color 0.2s ease;
}

/* 2 — Centred: everything centred, generous air, accent rule under headings */
.lv-sec[data-lv="2"] h1,
.lv-sec[data-lv="2"] h2,
.lv-sec[data-lv="2"] h3,
.lv-sec[data-lv="2"] h4,
.lv-sec[data-lv="2"] h5,
.lv-sec[data-lv="2"] h6,
.lv-sec[data-lv="2"] p,
.lv-sec[data-lv="2"] li,
.lv-sec[data-lv="2"] span {
  text-align: center;
}
.lv-sec[data-lv="2"] .GetMore_side____Mff,
.lv-sec[data-lv="2"] .MarketingPlan_leftSide__yHGD_,
.lv-sec[data-lv="2"] .Hero_content__nRW_a {
  align-items: center;
  margin-inline: auto;
  max-width: 820px;
}
.lv-sec[data-lv="2"] button,
.lv-sec[data-lv="2"] .Button_button__zjxVH {
  margin-inline: auto;
}
.lv-sec[data-lv="2"] > section,
.lv-sec[data-lv="2"] > div {
  padding-block: 4rem;
}
.lv-sec[data-lv="2"] h5.Heading_h5__SSEcv::after,
.lv-sec[data-lv="2"] h3::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: #f08c00;
  margin: 1rem auto 0;
}

/* 3 — Mirrored: swap columns and reverse grids/rows */
@media (min-width: 1024px) {
  .lv-sec[data-lv="3"] .GetMore_slide__qYBgP,
  .lv-sec[data-lv="3"] .MarketingPlan_wrap__bBDtK,
  .lv-sec[data-lv="3"] .WhatIncluded_included__Lg6BQ,
  .lv-sec[data-lv="3"] > section > .wrap,
  .lv-sec[data-lv="3"] > div > .wrap,
  .lv-sec[data-lv="3"] > section > div[class*="flex"],
  .lv-sec[data-lv="3"] .grid {
    flex-direction: row-reverse;
    direction: rtl;
  }
  .lv-sec[data-lv="3"] .grid > *,
  .lv-sec[data-lv="3"] > section > div[class*="flex"] > * {
    direction: ltr;
  }
}
.lv-sec[data-lv="3"] h1,
.lv-sec[data-lv="3"] h2,
.lv-sec[data-lv="3"] h3,
.lv-sec[data-lv="3"] h5 {
  text-align: right;
}

/* 4 — Compact: tight measure, small type, dense spacing */
.lv-sec[data-lv="4"] > section,
.lv-sec[data-lv="4"] > div {
  padding-block: 1.25rem !important;
}
.lv-sec[data-lv="4"] .wrap,
.lv-sec[data-lv="4"] .GetMore_slide__qYBgP,
.lv-sec[data-lv="4"] .MarketingPlan_wrap__bBDtK {
  max-width: 1040px;
  margin-inline: auto;
  gap: 1rem;
}
.lv-sec[data-lv="4"] h1,
.lv-sec[data-lv="4"] h2,
.lv-sec[data-lv="4"] h3,
.lv-sec[data-lv="4"] h5.Heading_h5__SSEcv {
  font-size: clamp(22px, 2.4vw, 34px) !important;
  line-height: 1.05;
}
.lv-sec[data-lv="4"] h4 {
  font-size: 1.05rem !important;
}
.lv-sec[data-lv="4"] p,
.lv-sec[data-lv="4"] li {
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
}
.lv-sec[data-lv="4"] img {
  max-height: 340px;
  object-fit: contain;
}

/* 5 — Panel: white card floating on a tinted band */
.lv-sec[data-lv="5"] {
  display: block;
  background: linear-gradient(180deg, #f7f3ec 0%, #efe9e0 100%);
  padding: 2.5rem 1rem;
}
.lv-sec[data-lv="5"] > section,
.lv-sec[data-lv="5"] > div {
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  max-width: 1280px;
  margin-inline: auto;
  padding: 2.5rem 2rem;
  overflow: hidden;
}


/* "We help market" carousel: every card the same size and baseline,
   regardless of one- or two-line labels. */
.swiper-wrapper:has(> .WeHelp_slide__6IFfL) {
  align-items: stretch;
}
.swiper-slide.WeHelp_slide__6IFfL {
  display: flex;
  height: 120px;
  align-self: flex-start;
  box-sizing: border-box;
}
.swiper-slide.WeHelp_slide__6IFfL p {
  font-size: clamp(13px, 1.1vw, 16px);
}