/* =============================================================================
   components.css — Shared section, card, list & form components
   ============================================================================= */

/* -----------------------------------------------------------------------------
   PAGE BANNER (inner pages — sits under the floating glass header)
----------------------------------------------------------------------------- */

.page-banner {
  position: relative;
  padding: calc(1.25rem + 72px + 4.5rem) 1.5rem 4rem;
  background: linear-gradient(180deg, #0cc0df 0%, #4ed6ea 60%, #bdeef6 100%);
  text-align: center;
  overflow: hidden;
}

.page-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 64px;
  background: var(--brand-white);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.page-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}

.page-banner .eyebrow {
  color: rgba(0, 0, 0, 0.6);
}

.page-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  color: var(--brand-white);
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.page-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(0, 0, 0, 0.72);
  max-width: 620px;
  margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   SECTION HEADINGS
----------------------------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 0.85rem;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-head.align-left {
  margin-left: 0;
  text-align: left;
}

.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}

.section-title .accent {
  color: var(--brand-blue);
}

.section-lead {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: rgba(0, 0, 0, 0.72);
}

/* -----------------------------------------------------------------------------
   TAGLINE STRIP (sits right under the hero)
----------------------------------------------------------------------------- */

.tagline-strip {
  position: relative;
  padding: 3rem 1.5rem;
  text-align: center;
  /* Flat tint matching the very top of the About section's gradient
     (css/about-section.css) so the two sections read as one continuous
     wash instead of showing a seam where white meets blue again. */
  background: #eefbfd;
  overflow: hidden;
  isolation: isolate;
}

/* Light-touch decoration so the strip doesn't read as a flat white bar —
   a couple of soft, blurred brand-colour glows and a faint spinning sun
   ring, echoing the animated backdrop used in the About Peedhiya section. */
.tagline-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tagline-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  will-change: transform;
}

.tagline-blob--blue {
  width: 260px;
  height: 260px;
  top: -120px;
  left: -60px;
  background: rgba(12, 192, 223, 0.28);
  animation: tagline-drift 15s ease-in-out infinite alternate;
}

.tagline-blob--yellow {
  /* Mirrors the blue blob's top placement (top-left) on the opposite side,
     and stays pulled inward so the blur fades out before it reaches the
     section boundary instead of getting clipped mid-glow. */
  width: 200px;
  height: 200px;
  top: -90px;
  right: 8%;
  background: rgba(255, 222, 89, 0.3);
  animation: tagline-drift 18s ease-in-out infinite alternate-reverse;
}

.tagline-sun {
  position: absolute;
  width: 130px;
  height: 130px;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(226, 189, 84, 0.45);
  animation: tagline-spin 46s linear infinite;
}

@keyframes tagline-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, 25px) scale(1.08); }
  100% { transform: translate(-20px, -15px) scale(0.96); }
}

@keyframes tagline-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

@media (max-width: 640px) {
  .tagline-sun { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tagline-blob,
  .tagline-sun {
    animation: none;
  }
}

.tagline-words {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 0.75rem;
}

.tagline-divider {
  color: var(--brand-yellow);
  margin: 0 0.35em;
}

.tagline-text {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.72);
}

/* -----------------------------------------------------------------------------
   GRIDS
----------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.75rem;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-3,
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   CARD
----------------------------------------------------------------------------- */

.card {
  padding: 2rem 1.75rem;
  background: var(--brand-white);
  border: 1px solid rgba(12, 192, 223, 0.28);
  border-radius: 24px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.card:hover {
  transform: translateY(-7px);
  border-color: var(--brand-blue);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12),
              0 0 22px rgba(12, 192, 223, 0.18);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  border-radius: 18px;
  background: rgba(255, 222, 89, 0.35);
  color: var(--brand-black);
}

.card-icon svg {
  width: 28px;
  height: 28px;
}

.card-title {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.card-text {
  font-size: 0.97rem;
  color: rgba(0, 0, 0, 0.72);
}

/* Card on a blue section */
.section-blue .card {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-color: rgba(255, 255, 255, 0.35);
}

.section-blue .card-text {
  color: rgba(255, 255, 255, 0.92);
}

.section-blue .card-icon {
  background: rgba(255, 222, 89, 0.9);
}

.section-blue .eyebrow {
  color: var(--brand-yellow);
}

/* -----------------------------------------------------------------------------
   GALLERY CARD (photo grid, e.g. the home page "Glimpses" section)
   Same hover lift as .card, sized as a frame around a photo instead of text.
----------------------------------------------------------------------------- */

/* Wider than the standard .container and with slimmer side padding, so the
   photos spread across more of the viewport instead of sitting in a narrow
   column with heavy gutters. */
.gallery-wrap {
  max-width: 1600px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.gallery-grid {
  gap: 1rem;
}

.gallery-card {
  margin: 0;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
}

/* Natural landscape shape, uncropped — width fills the grid cell and height
   follows from the image's own aspect ratio. */
.gallery-card img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

@media (max-width: 640px) {
  .gallery-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .gallery-card {
    border-radius: 22px;
  }
}

/* -----------------------------------------------------------------------------
   STAT STRIP
----------------------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 1.5rem 1rem;
}

.stat-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4em;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-black);
  white-space: nowrap;
}

/* Mobile/tablet: inherits the same font-size as the other stat values (no
   override) so all four numbers match. It's allowed to wrap onto its two
   natural halves here — .stat-value's min-height + centered alignment
   already keep that wrap visually balanced with its single-line siblings. */
.stat-value--compact {
  white-space: normal;
}

/* Desktop only: break the stat row out of the .container's 1200px cap so it
   spans the full viewport, and switch it from equal grid columns to a
   space-between flex row so each stat keeps only the width its own content
   needs (letting "6months–6years" stay on one line at full size) while the
   leftover space becomes generous, even gaps between items. Below this
   width .grid-4 stacks into 2/1 columns, so the mobile/tablet layout above
   is untouched. */
@media (min-width: 901px) {
  .stat-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
  }

  /* Default flex sizing (grow:0, shrink:1, and the browser's automatic
     min-width: auto, which floors a shrinking item at its content's
     min-content) on purpose: the short stats can shrink — their labels
     simply wrap onto more lines — so the age-range stat's single-line,
     nowrap value is never forced narrower than the text itself. */

  .stat-label {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .stat-value--compact {
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
}

.stat-label {
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 0.4rem;
}

.section-yellow .stat-value { color: var(--brand-black); }

/* -----------------------------------------------------------------------------
   SPLIT (text + visual)
----------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.5rem;
  align-items: center;
}

.split-media img {
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* -----------------------------------------------------------------------------
   CHECK LIST
----------------------------------------------------------------------------- */

.check-list {
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.check-list li {
  position: relative;
  padding-left: 2.1rem;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.78);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-yellow);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0.48rem;
  width: 6px;
  height: 11px;
  border-right: 2.5px solid var(--brand-black);
  border-bottom: 2.5px solid var(--brand-black);
  transform: rotate(42deg);
}

.section-blue .check-list li { color: rgba(255, 255, 255, 0.94); }

/* -----------------------------------------------------------------------------
   QUOTE
----------------------------------------------------------------------------- */

.quote {
  padding: 2.25rem 2rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1.5px solid rgba(12, 192, 223, 0.5);
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.quote-text {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 1.25rem;
}

.quote-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.66);
}

.quote-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-yellow);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-black);
  flex-shrink: 0;
}

.quote-author strong {
  display: block;
  font-family: var(--font-heading);
  color: var(--brand-black);
}

/* -----------------------------------------------------------------------------
   CTA BAND
----------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  padding: 4.5rem 1.5rem;
  background: var(--brand-yellow);
  text-align: center;
  overflow: hidden;
}

.cta-band-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.cta-band .section-title { margin-bottom: 0.75rem; }

.cta-band p {
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 1.75rem;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

.cta-band .btn-secondary {
  background: var(--brand-black);
}

/* -----------------------------------------------------------------------------
   ACCORDION (FAQ)
----------------------------------------------------------------------------- */

.accordion {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0.9rem;
}

.accordion-item {
  background: var(--brand-white);
  border: 1px solid rgba(12, 192, 223, 0.3);
  border-radius: 20px;
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--brand-black);
  text-align: left;
}

.accordion-trigger .accordion-sign {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-yellow);
  position: relative;
  transition: transform 0.3s ease;
}

.accordion-trigger .accordion-sign::before,
.accordion-trigger .accordion-sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--brand-black);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.accordion-trigger .accordion-sign::before { width: 11px; height: 2px; }
.accordion-trigger .accordion-sign::after { width: 2px; height: 11px; }

.accordion-item.open .accordion-sign { transform: rotate(135deg); }

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.accordion-panel p {
  padding: 0 1.5rem 1.35rem;
  font-size: 0.97rem;
  color: rgba(0, 0, 0, 0.72);
}

/* -----------------------------------------------------------------------------
   FORM
----------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field.full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-black);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--brand-black);
  background: var(--brand-white);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(12, 192, 223, 0.18);
}

.form-note {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
}

.form-status {
  display: none;
  padding: 0.9rem 1.15rem;
  border-radius: 14px;
  background: rgba(255, 222, 89, 0.4);
  border: 1px solid var(--brand-yellow);
  font-size: 0.95rem;
}

.form-status.visible { display: block; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   DAY TIMELINE
----------------------------------------------------------------------------- */

.timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  list-style: none;
  display: grid;
  gap: 1.5rem;
  padding-left: 2.5rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(12, 192, 223, 0.35);
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-yellow);
  border: 3px solid var(--brand-white);
  box-shadow: 0 0 0 2px rgba(12, 192, 223, 0.45);
}

.timeline-time {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 0.2rem;
}

.timeline-title {
  font-size: 1.08rem;
  margin-bottom: 0.3rem;
}

.timeline-text {
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.7);
}

/* -----------------------------------------------------------------------------
   SCROLL REVEAL
----------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}