/* =============================================================
   GMA Hero 2-zone layout + Programs carousel
   Matches Image 1 target design.
   ============================================================= */

/* ── Hero 2-zone ─────────────────────────────────────────────
   Left: eyebrow · headline · CTAs
   Right: photo card (warm tan/gold bg with image)
   ─────────────────────────────────────────────────────────── */
.gma-hero2 {
  background: var(--gma-dark, #102E45);
  padding: 0;
  overflow: hidden;
}

.gma-hero2__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 320px;
  max-width: var(--gma-max-w);
  margin-inline: auto;
}

/* LEFT — text zone */
.gma-hero2__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 3rem 2.5rem 3rem 1.75rem;
  color: #fff;
}

.gma-hero2__eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gma-accent, #B8922E);
  margin: 0;
}
.gma-hero2__eyebrow [lang="te"] {
  font-family: var(--gma-font-telugu, 'Noto Sans Telugu', sans-serif);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.gma-hero2__headline {
  font-family: var(--gma-font-sans, 'Inter', sans-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

.gma-hero2__ctas {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Gold CTA button (Image 1 style) */
.gma-btn--gold {
  background: var(--gma-accent, #B8922E);
  /* Dark ink on gold = 5.41:1 (passes WCAG AA). White-on-gold was only 2.92:1
     and failed contrast (BUG-021); also matches brand.css .gma-btn--gold. */
  color: #3a1a00;
  font-weight: 700;
  border-radius: 999px;
  padding: .75rem 1.5rem;
  text-decoration: none;
  font-size: .95rem;
  transition: background .15s, transform .1s;
}
.gma-btn--gold:hover { background: var(--gma-accent-dark, #8F7022); transform: translateY(-1px); }

/* Secondary text link */
.gma-hero2__link {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: color .12s;
}
.gma-hero2__link:hover { color: #fff; }

/* RIGHT — community slideshow (desktop only) */
.gma-hero2__slideshow {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: var(--gma-dark);
}

/* Individual slides — background-image, crossfade */
.gma-hero2__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.gma-hero2__slide.is-active {
  opacity: 1;
}

/* Subtle dark gradient on left edge to blend into the text zone */
.gma-hero2__slideshow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(16,46,69,.45) 0%, transparent 35%);
  z-index: 1;
  pointer-events: none;
}

/* Placeholder when no images available */
.gma-hero2__photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: rgba(255,255,255,.5);
  font-size: .8rem;
  text-align: center;
  padding: 2rem;
  height: 100%;
  min-height: 280px;
}
.gma-hero2__photo-placeholder svg { opacity: .4; }

/* ── Mobile: hide slideshow, text fills full width ─────────── */
@media (max-width: 768px) {
  .gma-hero2__inner {
    grid-template-columns: 1fr;   /* single column */
  }
  .gma-hero2__slideshow {
    display: none;                /* hidden on mobile — text only */
  }
  .gma-hero2__text {
    padding: 2.5rem 1.25rem;
  }
  .gma-hero2__headline {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    /* prevent word-break on small screens */
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}


/* ── Programs & Services carousel ────────────────────────────
   Section below the hero. Horizontal scrollable card row
   with prev/next arrow buttons. Matches Image 1 layout.
   ─────────────────────────────────────────────────────────── */
.gma-programs-section {
  background: var(--gma-bg, #FAF6EC);
  padding: 2rem 0 2.5rem;
  border-bottom: 1px solid var(--gma-border, #E4E7DD);
}

.gma-programs-section__inner {
  max-width: var(--gma-max-w);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.gma-programs-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.gma-programs-section__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gma-ink, #1C1A19);
  margin: 0;
}

/* Arrow buttons */
.gma-programs-section__arrows {
  display: flex;
  gap: .4rem;
}
.gma-programs-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gma-border, #E4E7DD);
  background: var(--gma-surface, #fff);
  color: var(--gma-ink, #1C1A19);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
}
.gma-programs-arrow:hover {
  background: var(--gma-primary-tint, #EAF1F6);
  border-color: var(--gma-primary, #154D79);
}

/* Scrollable track */
.gma-programs-track-wrap {
  overflow: hidden;   /* clip; JS scrolls via scrollLeft */
}
.gma-programs-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;   /* hide scrollbar — use arrows */
  -ms-overflow-style: none;
  padding-bottom: .25rem;
}
.gma-programs-track::-webkit-scrollbar { display: none; }

/* ── Individual program card ─────────────────────────────── */
.gma-prog-card {
  flex: 0 0 175px;
  background: var(--gma-surface, #fff);
  border-radius: var(--gma-radius-sm, 8px);
  border: 1px solid var(--gma-border, #E4E7DD);
  overflow: hidden;
  text-decoration: none;
  color: var(--gma-ink, #1C1A19);
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s;
  border-top: 3px solid var(--card-accent, var(--gma-primary));
}
.gma-prog-card:hover {
  box-shadow: var(--gma-shadow, 0 4px 14px rgba(28,26,25,.07));
  transform: translateY(-3px);
  text-decoration: none;
}

/* Color-coded accent per card */
.gma-prog-card--blue   { --card-accent: #154D79; --card-chip-bg: #EAF1F6; --card-chip-fg: #154D79; }
.gma-prog-card--green  { --card-accent: #5E7E2A; --card-chip-bg: #EEF2E2; --card-chip-fg: #5E7E2A; }
.gma-prog-card--red    { --card-accent: #C55E3E; --card-chip-bg: #F7E3DC; --card-chip-fg: #C55E3E; }
.gma-prog-card--gold   { --card-accent: #B8922E; --card-chip-bg: #F4EFD9; --card-chip-fg: #8F7022; }
.gma-prog-card--teal   { --card-accent: #1A7A7A; --card-chip-bg: #E0F2F2; --card-chip-fg: #1A7A7A; }
.gma-prog-card--purple { --card-accent: #6B3FA0; --card-chip-bg: #EDE7F6; --card-chip-fg: #6B3FA0; }

/* Photo area */
.gma-prog-card__photo {
  height: 100px;
  background: var(--card-chip-bg, #EAF1F6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gma-prog-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder when no photo */
.gma-prog-card__photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: var(--card-chip-fg, var(--gma-primary));
  font-size: .7rem;
  text-align: center;
  padding: .75rem;
}
.gma-prog-card__photo-placeholder svg { opacity: .5; }

/* Card body */
.gma-prog-card__body {
  padding: .75rem .85rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
}
.gma-prog-card__name {
  font-weight: 700;
  font-size: .88rem;
  color: var(--gma-ink, #1C1A19);
  margin: 0;
  line-height: 1.3;
}
.gma-prog-card__tagline {
  font-size: .78rem;
  color: var(--gma-text-muted, #6B6354);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gma-prog-card__cta {
  font-size: .78rem;
  font-weight: 700;
  color: var(--card-accent, var(--gma-primary));
  margin-top: auto;
  padding-top: .4rem;
  display: block;
}

/* Mobile: allow natural scroll */
@media (max-width: 600px) {
  .gma-prog-card { flex: 0 0 150px; }
  .gma-programs-arrow { display: none; }  /* swipe-native on mobile */
}

/* ══ HOME HUB — 3 aligned columns (Programs · Events · Connect) ══════════ */
.gma-home-hub { padding: 1.5rem 0 1.75rem; background: var(--gma-bg, #FAF6EC); }
.gma-home-hub__grid {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr;   /* programs · events · connect */
  gap: 1.75rem;
  align-items: start;   /* every column top-aligns; no tall empty column */
}
/* CRITICAL: grid/flex children default to min-width:auto, which refuses to
   shrink below their content's intrinsic width and overflows on narrow
   screens. Force every hub column (and the lists inside) to be allowed to
   shrink so the nowrap blurb text truncates instead of blowing out the page. */
.gma-hub-col { min-width: 0; }

/* Column heads — consistent across all 3 */
.gma-hub-col__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .9rem;
  border-bottom: 2px solid var(--gma-primary);
  padding-bottom: .4rem;
}
.gma-hub-col__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gma-primary);
  margin: 0;
}
.gma-hub-col__more {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gma-primary);
  text-decoration: none;
  white-space: nowrap;
}
.gma-hub-col__more:hover { text-decoration: underline; }

/* ── COL 1: Programs — compact horizontal cards, all shown (no scroll) ── */
.gma-hub-programs { display: flex; flex-direction: column; gap: .4rem; }
.gma-hub-prog {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--gma-surface, #fff);
  border: 1px solid var(--gma-border);
  border-left: 3px solid var(--card-accent, var(--gma-primary));
  border-radius: 8px;
  padding: .5rem .65rem;
  text-decoration: none;
  color: var(--gma-ink);
  transition: box-shadow .15s, transform .15s;
}
.gma-hub-prog:hover { box-shadow: var(--gma-shadow-sm); transform: translateX(2px); text-decoration: none; }
.gma-hub-prog--blue   { --card-accent: #154D79; }
.gma-hub-prog--green  { --card-accent: #5E7E2A; }
.gma-hub-prog--red    { --card-accent: #C55E3E; }
.gma-hub-prog--gold   { --card-accent: #B8922E; }
.gma-hub-prog--teal   { --card-accent: #1A7A7A; }
.gma-hub-prog--purple { --card-accent: #6B3FA0; }
.gma-hub-prog__thumb {
  flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 6px; overflow: hidden; background: var(--gma-primary-tint);
}
.gma-hub-prog__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gma-hub-prog__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.gma-hub-prog__name { font-size: .85rem; font-weight: 700; color: var(--gma-ink); line-height: 1.25; }
.gma-hub-prog__blurb {
  font-size: .74rem; color: var(--gma-text-muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── COL 2: Events — compact rows (soonest-first), all shown (no scroll) ── */
.gma-hub-events {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .4rem;
}
.gma-hub-event {
  display: flex;
  gap: .65rem;
  background: var(--gma-surface, #fff);
  border: 1px solid var(--gma-border);
  border-left: 3px solid var(--gma-primary);
  border-radius: 8px;
  padding: .55rem .65rem;
}
.gma-hub-event__date {
  flex: 0 0 52px;
  background: var(--gma-primary);
  color: #fff;
  border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: .25rem;
  min-height: 44px;
}
.gma-hub-event__day { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.gma-hub-event__mon { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gma-hub-event__when { font-size: .62rem; font-weight: 700; line-height: 1.2; }
.gma-hub-event__body { display: flex; flex-direction: column; gap: .15rem; justify-content: center; min-width: 0; }
.gma-hub-event__title { font-size: .85rem; font-weight: 700; color: var(--gma-ink); text-decoration: none; line-height: 1.3; }
a.gma-hub-event__title:hover { color: var(--gma-primary); }
.gma-hub-event__loc { font-size: .74rem; color: var(--gma-text-muted); }

/* ── COL 3: Connect & Act — WhatsApp + quick actions + Follow, stacked ──
   A vertical stack that fills the column to the same height as Programs, so
   there is no empty bottom-right void. Each block is full-width in the narrow
   column. */
.gma-hub-col--connect { display: flex; flex-direction: column; }
.gma-hub-connect-stack { display: flex; flex-direction: column; gap: .5rem; }
.gma-hub-connect {
  display: flex; flex-direction: column;
  background: var(--gma-surface, #fff);
  border: 1px solid var(--gma-border);
  border-radius: 8px;
  padding: .7rem .8rem;
}

/* WhatsApp — compact horizontal card: icon · text · subscribe */
.gma-hub-connect--whatsapp {
  background: var(--gma-primary);
  border: none; color: #fff;
  flex-direction: row; align-items: center; gap: .65rem;
}
.gma-hub-connect__icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 7px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.gma-hub-connect__wa-text { flex: 1 1 auto; min-width: 0; }
.gma-hub-connect--whatsapp .gma-hub-connect__title { color: #fff; margin: 0; }
.gma-hub-connect__title { font-size: .85rem; font-weight: 700; margin: 0 0 .35rem; color: var(--gma-ink); }
.gma-hub-connect__body { font-size: .72rem; margin: .1rem 0 0; line-height: 1.3; color: rgba(255,255,255,.85); }
.gma-hub-connect__link {
  flex: 0 0 auto; white-space: nowrap;
  font-size: .78rem; font-weight: 700; color: #fff;
  text-decoration: none; display: inline-flex; align-items: center; gap: .2rem;
  border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 1px;
}
.gma-hub-connect__link:hover { border-bottom-color: #fff; }

/* Quick actions — 2×2 grid of high-intent links. align-content:start keeps
   each row its natural height even when the grid sits in a tall flex column
   (prevents the tiles ballooning into big squares). */
.gma-hub-quick { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-content: start; }
.gma-hub-quick__item {
  display: flex; align-items: center; gap: .45rem;
  background: var(--gma-surface, #fff);
  border: 1px solid var(--gma-border);
  border-radius: 8px;
  padding: .55rem .6rem;
  font-size: .82rem; font-weight: 700;
  color: var(--gma-ink); text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
}
.gma-hub-quick__item svg { flex: 0 0 auto; color: var(--gma-primary); }
.gma-hub-quick__item:hover { box-shadow: var(--gma-shadow-sm); border-color: var(--gma-primary); text-decoration: none; }
.gma-hub-quick__item--gold { background: var(--gma-accent); border-color: var(--gma-accent); color: #fff; }
.gma-hub-quick__item--gold svg { color: #fff; }
.gma-hub-quick__item--gold:hover { box-shadow: var(--gma-shadow-sm); border-color: var(--gma-accent-dark); }

/* Follow — round icon buttons on one row */
.gma-hub-follow-row { display: flex; gap: .55rem; flex-wrap: wrap; }
.gma-hub-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gma-primary-tint);
  color: var(--gma-primary);
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.gma-hub-social:hover { background: var(--gma-primary); color: #fff; transform: translateY(-2px); text-decoration: none; }
/* Brand-tinted hover per platform (optional polish). */
.gma-hub-social--facebook:hover  { background: #1877F2; }
.gma-hub-social--instagram:hover { background: #E1306C; }
.gma-hub-social--linkedin:hover  { background: #0A66C2; }
.gma-hub-social--youtube:hover   { background: #FF0000; }

/* ── Responsive ── */

/* TABLET: Programs + Events two-up; Connect becomes a full-width row of
   three blocks side-by-side. align-items:start keeps each block its natural
   height (no stretching the quick-action tiles tall). */
@media (max-width: 1000px) {
  .gma-home-hub__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .gma-hub-col--connect { grid-column: 1 / -1; }
  .gma-hub-connect-stack { flex-direction: row; align-items: start; flex-wrap: wrap; }
  .gma-hub-connect--whatsapp { flex: 1 1 260px; flex-direction: row; align-items: center; }
  .gma-hub-quick { flex: 2 1 300px; }
  .gma-hub-connect--follow { flex: 1 1 200px; }
}

/* MOBILE: single column everywhere. Reset the connect children back to
   natural height — undo the tablet flex grow/basis so nothing stretches. */
@media (max-width: 640px) {
  .gma-home-hub__grid { grid-template-columns: 1fr; }
  .gma-hub-connect-stack { flex-direction: column; align-items: stretch; }
  .gma-hub-connect-stack > * { flex: 0 0 auto; }   /* natural height, no stretch */
  /* Quick actions stay a 2-up grid of COMPACT rows (not tall squares). */
  .gma-hub-quick__item { padding: .6rem .7rem; }
}