/* ==========================================================================
   GROWLAND — page-level section patterns
   Built on brand.css tokens + app.css primitives.
   ========================================================================== */

/* --------------------------------------------------------------- hero extras */
.gl-hero__pills { display: flex; flex-wrap: wrap; gap: var(--gl-sp-2); }

/* ------------------------------------------------------------ intro / split */
.gl-intro {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--gl-sp-16);
  align-items: start;
}
.gl-intro__title { margin-top: var(--gl-sp-4); }
.gl-intro__body > * + * { margin-top: var(--gl-sp-5); }

/* ------------------------------------------------------------- showcase */
.gl-showcase {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--gl-sp-12);
  align-items: center;
}
.gl-showcase__media {
  position: relative;
  border-radius: var(--gl-r-xl);
  overflow: hidden;
  box-shadow: var(--gl-shadow-xl);
  aspect-ratio: 4 / 3;
}
.gl-showcase__media img { width: 100%; height: 100%; object-fit: cover; }
.gl-showcase__badge {
  position: absolute;
  left: var(--gl-sp-5);
  bottom: var(--gl-sp-5);
  padding: var(--gl-sp-4) var(--gl-sp-5);
  background: rgba(10, 10, 12, .78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--gl-r-md);
  color: #fff;
}
.gl-showcase__badge-label {
  font-size: var(--gl-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--gl-ember-500);
}
.gl-showcase__badge-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; }
.gl-showcase__body > * + * { margin-top: var(--gl-sp-6); }

.gl-ticks { list-style: none; padding: 0; display: grid; gap: var(--gl-sp-3); }
.gl-ticks li { display: flex; gap: var(--gl-sp-3); align-items: flex-start; font-weight: 600; }
.gl-ticks svg { flex: none; margin-top: 4px; color: var(--gl-primary); }

.gl-subsection { margin-top: var(--gl-sp-16); }
.gl-subsection > .gl-h3 + * { margin-top: var(--gl-sp-6); }

/* --------------------------------------------------------------- blocks */
.gl-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gl-sp-3);
  margin-top: var(--gl-sp-6);
}
.gl-block {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gl-sp-3);
  padding: var(--gl-sp-4) var(--gl-sp-5);
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-md);
  transition: border-color var(--gl-dur) var(--gl-ease), transform var(--gl-dur) var(--gl-ease), box-shadow var(--gl-dur) var(--gl-ease);
}
.gl-block:hover { border-color: var(--gl-primary); transform: translateY(-2px); box-shadow: var(--gl-shadow-sm); }
.gl-block__name { font-weight: 700; letter-spacing: -.02em; min-width: 0; }

/* ------------------------------------------------------- opportunity cards */
.gl-opp {
  position: relative;
  display: flex; flex-direction: column; gap: var(--gl-sp-4);
  padding: var(--gl-sp-8);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--gl-r-lg);
  background: rgba(255, 255, 255, .03);
  transition: background-color var(--gl-dur) var(--gl-ease), border-color var(--gl-dur) var(--gl-ease), transform var(--gl-dur) var(--gl-ease);
}
.gl-opp:hover { background: rgba(242, 107, 33, .1); border-color: var(--gl-primary); transform: translateY(-4px); }
.gl-opp__icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: var(--gl-r-md);
  background: rgba(242, 107, 33, .16);
  color: var(--gl-orange-400);
}
.gl-opp__title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; }
.gl-opp__text { color: rgba(255, 255, 255, .64); font-size: var(--gl-fs-sm); line-height: 1.65; flex: 1; }
.gl-opp__count {
  font-size: var(--gl-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--gl-ember-500);
}
.gl-opp__go {
  position: absolute; top: var(--gl-sp-6); right: var(--gl-sp-6);
  color: rgba(255, 255, 255, .35);
  transition: color var(--gl-dur) var(--gl-ease), transform var(--gl-dur) var(--gl-ease);
}
.gl-opp:hover .gl-opp__go { color: var(--gl-primary); transform: translate(3px, -3px); }

/* ------------------------------------------------------------------ CTA */
.gl-cta {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: var(--gl-sp-16);
  align-items: start;
}
.gl-contact-list { list-style: none; padding: 0; margin-top: var(--gl-sp-8); display: grid; gap: var(--gl-sp-4); }
.gl-contact-list li { display: flex; align-items: flex-start; gap: var(--gl-sp-4); color: rgba(255, 255, 255, .78); }
.gl-contact-list svg { flex: none; color: var(--gl-primary); margin-top: 2px; }
.gl-contact-list a:hover { color: var(--gl-orange-400); }

/* The inquiry card sits on dark here, so it keeps its own light surface. */
.gl-section--ink .gl-inquiry { color: var(--gl-ink-900); }

/* ------------------------------------------------------------- filter bar */
.gl-filters {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-lg);
  padding: var(--gl-sp-5);
  box-shadow: var(--gl-shadow-sm);
}
.gl-filters__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--gl-sp-4);
}
.gl-filters__search { display: flex; gap: var(--gl-sp-3); margin-bottom: var(--gl-sp-4); }
.gl-filters__search .gl-input { flex: 1; min-width: 0; }
.gl-filters__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--gl-sp-4);
  margin-top: var(--gl-sp-5);
  padding-top: var(--gl-sp-5);
  border-top: 1px solid var(--gl-border);
}
.gl-filters__types { display: flex; flex-wrap: wrap; gap: var(--gl-sp-2); }

.gl-results-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--gl-sp-4);
  margin-bottom: var(--gl-sp-6);
}
.gl-results-bar__count { font-weight: 700; letter-spacing: -.02em; }

/* --------------------------------------------------------------- pagination */
.gl-pagination { margin-top: var(--gl-sp-12); }
.gl-pagination nav { display: flex; justify-content: center; }
.gl-pagination svg { width: 18px; height: 18px; }

/* --------------------------------------------------------- detail layout */
.gl-detail { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--gl-sp-12); align-items: start; }
.gl-detail__main > * + * { margin-top: var(--gl-sp-12); }
.gl-detail__aside > * + * { margin-top: var(--gl-sp-6); }

.gl-prose { max-width: 72ch; }
.gl-prose > * + * { margin-top: var(--gl-sp-5); }
.gl-prose h2 { font-size: var(--gl-fs-h3); margin-top: var(--gl-sp-10); }
.gl-prose h3 { font-size: var(--gl-fs-h4); margin-top: var(--gl-sp-8); }
.gl-prose ul, .gl-prose ol { padding-left: 1.35rem; display: grid; gap: var(--gl-sp-2); }
.gl-prose li::marker { color: var(--gl-primary); }
.gl-prose a { color: var(--gl-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gl-prose strong { font-weight: 700; }
.gl-prose em { font-style: italic; }

.gl-headline-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--gl-sp-6);
}

.gl-pricebox {
  background: var(--gl-ink-900);
  color: #fff;
  border-radius: var(--gl-r-lg);
  padding: var(--gl-sp-6);
}
.gl-pricebox__label {
  font-size: var(--gl-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--gl-ember-500);
}
.gl-pricebox__value {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 800; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--gl-sp-1);
}
.gl-pricebox__note { color: rgba(255, 255, 255, .6); font-size: var(--gl-fs-sm); margin-top: var(--gl-sp-2); }
.gl-pricebox__actions { display: grid; gap: var(--gl-sp-3); margin-top: var(--gl-sp-5); }

.gl-map {
  position: relative;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-lg);
  overflow: hidden;
  background: var(--gl-bg-subtle);
}
.gl-map iframe { display: block; width: 100%; height: 420px; border: 0; }
.gl-map__fallback { display: grid; place-items: center; gap: var(--gl-sp-3); padding: var(--gl-sp-16) var(--gl-sp-6); text-align: center; }

.gl-feature-list {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gl-sp-3);
}
.gl-feature-list li {
  display: flex; align-items: center; gap: var(--gl-sp-3);
  padding: var(--gl-sp-3) var(--gl-sp-4);
  background: var(--gl-bg-subtle);
  border-radius: var(--gl-r-md);
  font-size: var(--gl-fs-sm); font-weight: 600;
}
.gl-feature-list svg { flex: none; color: var(--gl-primary); }

.gl-nearby {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gl-sp-4);
}
.gl-nearby__item {
  padding: var(--gl-sp-5);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-md);
  text-align: center;
}
.gl-nearby__value {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--gl-primary);
}
.gl-nearby__label { font-size: var(--gl-fs-sm); color: var(--gl-text-muted); margin-top: var(--gl-sp-1); }

/* ------------------------------------------------------------- blog */
.gl-post-head { max-width: 74ch; }
.gl-post-meta { display: flex; flex-wrap: wrap; gap: var(--gl-sp-4); align-items: center; color: var(--gl-text-muted); font-size: var(--gl-fs-sm); }

/* ------------------------------------------------------ contact page cards */
.gl-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gl-sp-5); }
.gl-contact-card {
  padding: var(--gl-sp-6);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-lg);
  background: var(--gl-bg);
  display: flex; flex-direction: column; gap: var(--gl-sp-3);
  transition: border-color var(--gl-dur) var(--gl-ease), box-shadow var(--gl-dur) var(--gl-ease);
}
.gl-contact-card:hover { border-color: var(--gl-primary); box-shadow: var(--gl-shadow-md); }
.gl-contact-card__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--gl-r-md); background: var(--gl-orange-50); color: var(--gl-primary);
}
.gl-contact-card__label { font-size: var(--gl-fs-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--gl-text-muted); }
.gl-contact-card__value { font-weight: 700; letter-spacing: -.02em; word-break: break-word; }

/* ---------------------------------------------------------- video sections */
.gl-videos__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--gl-sp-6);
  margin-bottom: var(--gl-sp-8);
}
.gl-carousel { position: relative; }
.gl-carousel__track {
  /* Flex, not grid: a percentage flex-basis resolves predictably against the
     scroll container, whereas grid-auto-columns percentages collapse here. */
  display: flex;
  gap: var(--gl-sp-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: var(--gl-sp-3);
  /* The <ul> needs its list affordances removed explicitly. */
  list-style: none;
  margin: 0;
  padding-inline: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gl-ink-300) transparent;
}
.gl-carousel__track::-webkit-scrollbar { height: 6px; }
.gl-carousel__track::-webkit-scrollbar-thumb { background: var(--gl-ink-300); border-radius: 99px; }
.gl-carousel__track::-webkit-scrollbar-track { background: transparent; }
.gl-carousel__item {
  flex: 0 0 calc((100% - var(--gl-sp-6) * 3) / 4);
  scroll-snap-align: start;
  min-width: 0;
}

/* --- Meet Our Team -------------------------------------------------------
   Lives in the right-hand column of .gl-intro, which is roughly half the
   container, so this is a wrapping grid rather than a slider. */
.gl-team__heading {
  font-size: var(--gl-fs-h3);
  line-height: var(--gl-lh-heading);
  letter-spacing: var(--gl-track-heading);
  font-weight: 800;
  text-align: center;
}
.gl-team__grid {
  display: grid;
  /* auto-fit + minmax: two across in the column today, and a third or fourth
     person wraps on their own without touching this file. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gl-sp-8) var(--gl-sp-6);
  list-style: none;
  margin: var(--gl-sp-6) 0 0;
  padding: 0;
}
.gl-team__card { margin: 0; text-align: center; }
.gl-team__avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gl-border);
  background: var(--gl-ink-50);
  display: grid;
  place-items: center;
}
/* Portraits are rarely square and rarely centred on the face; cover + a top-ish
   focal point keeps heads in frame instead of cropping them. */
.gl-team__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.gl-team__initials {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--gl-ink-400);
}
.gl-team__name {
  margin-top: var(--gl-sp-5);
  font-size: var(--gl-fs-h4);
  font-weight: 700;
  color: var(--gl-primary);
}
.gl-team__role { margin-top: var(--gl-sp-2); color: var(--gl-text-muted); }
@media (max-width: 560px) {
  .gl-team__item { flex-basis: 60%; }
}

.gl-carousel__nav { display: flex; gap: var(--gl-sp-3); flex: none; }
.gl-carousel__btn {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--gl-r-pill);
  border: 1px solid var(--gl-border-strong);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--gl-dur) var(--gl-ease),
              border-color var(--gl-dur) var(--gl-ease),
              opacity var(--gl-dur) var(--gl-ease);
}
.gl-carousel__btn:hover:not(:disabled) { background: var(--gl-primary); border-color: var(--gl-primary); color: #fff; }
.gl-carousel__btn:disabled { opacity: .3; cursor: not-allowed; }
.gl-section--ink .gl-carousel__btn { border-color: rgba(255,255,255,.26); }

/* --------------------------------------------------------- featured deal */
.gl-deal {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--gl-sp-12);
  align-items: center;
  padding: var(--gl-sp-12);
  border-radius: var(--gl-r-2xl);
  background: var(--gl-grad-ink);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  overflow: hidden;
}
/* Ember wash so the offer reads as premium rather than as a discount banner. */
.gl-deal::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 92% 8%, rgba(242,107,33,.28) 0%, rgba(242,107,33,0) 58%);
  pointer-events: none;
}
.gl-deal > * { position: relative; }
.gl-deal__badge {
  display: inline-flex; align-items: center; gap: var(--gl-sp-2);
  padding: .4375rem .875rem;
  border-radius: var(--gl-r-pill);
  background: rgba(242, 107, 33, .16);
  border: 1px solid rgba(242, 107, 33, .42);
  color: var(--gl-ember-500);
  font-size: var(--gl-fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.gl-deal__title { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -.04em; font-weight: 600; margin-top: var(--gl-sp-5); }
.gl-deal__lead { color: rgba(255,255,255,.72); margin-top: var(--gl-sp-4); font-size: var(--gl-fs-lead); max-width: 52ch; }
.gl-deal__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gl-sp-4); margin-top: var(--gl-sp-8); }
.gl-deal__fact {
  padding: var(--gl-sp-4) var(--gl-sp-5);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--gl-r-md);
  background: rgba(255,255,255,.04);
}
.gl-deal__fact-label { font-size: var(--gl-fs-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: rgba(255,255,255,.55); }
.gl-deal__fact-value { font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.gl-deal__fact--accent .gl-deal__fact-value { color: var(--gl-ember-500); }
.gl-deal__actions { display: flex; flex-wrap: wrap; gap: var(--gl-sp-3); margin-top: var(--gl-sp-8); }

/* Payment schedule */
.gl-plan {
  background: var(--gl-bg);
  color: var(--gl-text);
  border-radius: var(--gl-r-xl);
  padding: var(--gl-sp-8);
  box-shadow: var(--gl-shadow-xl);
}
.gl-plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gl-sp-4); flex-wrap: wrap; }
.gl-plan__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; }
.gl-plan__total { font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--gl-primary); }
.gl-plan__steps { list-style: none; padding: 0; margin-top: var(--gl-sp-6); display: grid; gap: 0; }
.gl-plan__step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: var(--gl-sp-4);
  padding: var(--gl-sp-4) 0;
  border-top: 1px solid var(--gl-border);
  align-items: start;
}
.gl-plan__step:first-child { border-top: 0; padding-top: 0; }
.gl-plan__marker {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--gl-r-pill);
  background: var(--gl-ink-100); color: var(--gl-ink-600);
  font-size: var(--gl-fs-xs); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.gl-plan__step--key .gl-plan__marker { background: var(--gl-primary); color: #fff; }
.gl-plan__stage { font-weight: 700; letter-spacing: -.02em; }
.gl-plan__when { font-size: var(--gl-fs-sm); color: var(--gl-text-muted); margin-top: 1px; }
.gl-plan__note { font-size: var(--gl-fs-xs); color: var(--gl-text-muted); margin-top: var(--gl-sp-2); line-height: 1.5; }
.gl-plan__amount { font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.gl-plan__foot {
  margin-top: var(--gl-sp-6); padding-top: var(--gl-sp-5);
  border-top: 2px solid var(--gl-ink-900);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gl-sp-4);
}
.gl-plan__foot-label { font-weight: 700; }
.gl-plan__foot-value { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.gl-whatsapp {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .32);
}
.gl-whatsapp:hover { background: #1fba59 !important; border-color: #1fba59 !important; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .gl-detail { grid-template-columns: minmax(0, 1fr) 350px; gap: var(--gl-sp-8); }
  .gl-cta { grid-template-columns: 1fr 420px; gap: var(--gl-sp-10); }
  .gl-intro { gap: var(--gl-sp-10); }
}

@media (max-width: 1024px) {
  .gl-intro,
  .gl-showcase,
  .gl-cta,
  .gl-detail { grid-template-columns: minmax(0, 1fr); gap: var(--gl-sp-8); }
  .gl-showcase__media { aspect-ratio: 16 / 9; }
  .gl-detail__aside { position: static; }
  .gl-deal { grid-template-columns: minmax(0, 1fr); gap: var(--gl-sp-8); padding: var(--gl-sp-8); }
  .gl-carousel__item { flex-basis: calc((100% - var(--gl-sp-6) * 2) / 2.4); }
}

@media (max-width: 820px) {
  .gl-carousel__item { flex-basis: calc((100% - var(--gl-sp-6)) / 1.8); }
}

@media (max-width: 640px) {
  .gl-filters { padding: var(--gl-sp-4); }
  .gl-filters__search { flex-direction: column; }
  .gl-filters__foot { flex-direction: column; align-items: stretch; }
  .gl-showcase__badge { left: var(--gl-sp-3); bottom: var(--gl-sp-3); padding: var(--gl-sp-3) var(--gl-sp-4); }
  .gl-showcase__badge-value { font-size: 1.25rem; }
  .gl-blocks { grid-template-columns: minmax(0, 1fr); }
  .gl-headline-row { flex-direction: column; gap: var(--gl-sp-4); }
  .gl-nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-map iframe { height: 300px; }

  .gl-carousel__track { gap: var(--gl-sp-4); }
  .gl-carousel__item { flex-basis: 86%; }
  .gl-carousel__nav { display: none; }          /* swipe is the affordance on touch */
  .gl-videos__head { margin-bottom: var(--gl-sp-6); }
  .gl-deal { padding: var(--gl-sp-5); border-radius: var(--gl-r-xl); }
  .gl-deal__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gl-sp-3); }
  .gl-deal__fact { padding: var(--gl-sp-3) var(--gl-sp-4); }
  .gl-deal__fact-value { font-size: 1.125rem; }
  .gl-deal__actions .gl-btn { flex: 1 1 100%; }
  .gl-plan { padding: var(--gl-sp-5); }
  .gl-plan__step { grid-template-columns: 26px minmax(0, 1fr); row-gap: var(--gl-sp-2); }
  .gl-plan__amount { grid-column: 2; text-align: left; }
  .gl-video--lg .gl-video__play { width: 64px; height: 64px; }
}