/* Inner-page hero + shared "inner page" components — used by every v2 page that isn't
   the homepage or an auth page (terms, policies, quality, cakes listing, etc.): the
   banner (background image, dark gradient overlay, title, breadcrumb) plus the
   CounterCardListing/CounterCardCTA/GTAChoose components the design handoff's
   InnerHero.css bundles them with, since multiple inner pages reuse those same
   components (e.g. refund.html's "Limitation of Liability" CTA, services.html's "Why
   Families Choose iCakes" grid). Ported verbatim from InnerHero.css. */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--choco);
  min-height: 50vh;
}

/* Deliberately no vertical centering here — the source design doesn't center this
   content either: .hero isn't a flex container, so .h-slide/.h-cnt (both height:auto,
   sized to their own content) just sit at the natural top-left of the 50vh banner via
   normal block flow, leaving empty space below on a banner this short. */
.h-slide {
  display: flex;
  align-items: center;
  height: auto;
  width: 100%;
}

.h-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}

/* No dark overlay — the source design places dark text directly on the (light)
   banner image with no tint at all. Keep the element for markup stability, just
   render nothing. */
.h-ov {
  display: none;
}

.h-cnt {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 70px clamp(24px, 6vw, 80px);
}

.h-eye {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(226, 50, 125, 0.25);
  border: 1px solid rgba(226, 50, 125, 0.5);
  padding: 6px 14px;
  border-radius: 50px;
  color: var(--gold-l);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.h-eye span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-l);
  display: inline-block;
}

.h-ttl {
  font-family: var(--serif);
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 700;
  color: var(--gray-txt);
  line-height: 1.2;
  margin-bottom: 16px;
}

.h-ttl em {
  font-style: italic;
  color: var(--primary);
}

.h-sub {
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--gray-txt);
  line-height: 1.65;
  margin-bottom: 20px;
  max-width: 640px;
}

.h-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--secondary);
}

.h-crumb a {
  color: var(--gray-txt);
  font-weight: 600;
  transition: color 0.2s;
}

.h-crumb a:hover {
  color: var(--primary);
}

.h-crumb .sep {
  color: var(--secondary);
  font-weight: 600;
}

.h-crumb .cur {
  color: var(--secondary);
  font-weight: 600;
}

/* Small uppercase gold label utility — same definition as content-blocks.css's
   .sec-lbl, duplicated here so terms/refund don't need to load that whole bundle
   just for this one class. Used on a couple of <ul> lists in terms.blade.php that
   carry this class in the source design (an unusual choice for a plain list, but
   that's what the source markup specifies). */
.sec-lbl {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  text-shadow: var(--sh-txt);
}

/* Generic pink section-title utility, reused across several inner pages
   (refund/terms policy headers, quality page section headers, etc.) */
.sec-ttl {
  color: var(--primary);
}

@media (max-width: 768px) {
  .h-cnt {
    padding: 50px 24px;
  }
}

/* CounterCardListing — grid of small icon cards (e.g. "Why Families Choose iCakes") */

.CounterCardListing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .CounterCardListing {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .CounterCardListing {
    grid-template-columns: repeat(1, 1fr);
  }
}

.CounterCard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--white);
  border: 1px solid #8080801a;
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
  position: relative;
  transition: all 0.6s;
}

.CounterCard:hover {
  background: var(--gold-pale);
}

.CounterCard figure {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--gray-soft);
  color: var(--gray-txt);
  padding: 10px;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  width: fit-content;
  transition: all 0.6s;
}

.CounterCard:hover figure {
  background: var(--white);
  color: var(--gold);
}

.CounterCard figure svg {
  aspect-ratio: 1 / 1;
  width: 40px;
  height: 40px;
  object-fit: contain;
  object-position: center;
}

.CounterCardText h3 {
  font-size: 24px;
  font-weight: 500;
  color: var(--gold);
}

.CounterCardText p {
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-txt);
  margin-top: 10px;
}

/* CounterCardCTA — single wide highlight card (e.g. refund page's "Limitation of Liability") */

.CounterCardCTA {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 50px;
  background: var(--gold-pale);
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.CounterCardCTA figure {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white);
  color: var(--gold);
  padding: 10px;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  width: fit-content;
  margin: 0 auto;
}

.CounterCardCTA figure svg {
  aspect-ratio: 1 / 1;
  width: 40px;
  height: 40px;
  object-fit: contain;
  object-position: center;
}

.CounterCardCTAText h3 {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  color: var(--gold);
}

.CounterCardCTAText p {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: var(--gray-txt);
  margin-top: 10px;
}

.CounterCardCTAButton {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.GTAChoose {
  padding: 100px 0;
}

.SpecialCTA {
  padding: 100px 0;
  background: var(--white);
}

@media (max-width: 768px) {
  .GTAChoose {
    padding: 60px 0;
  }
}

@media (max-width: 576px) {
  .CounterCardCTAButton {
    flex-direction: column;
    align-items: stretch;
  }
}