/* ============================================================
   BRAHMASTRA GYM — pages.css
   Page hero · Inner-page layouts · Responsive page tweaks
   ============================================================ */

/* ---------- Narrow container ---------- */
.container--narrow{ max-width:860px; }

/* ---------- Section head extra row (header + "view all" link) ---------- */
.section-head__more{ margin-top:28px; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  position:relative;
  min-height:62vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--color-bg);
  padding-top:calc(var(--header-h) + 20px);
}
.page-hero__bg{ position:absolute; inset:0; z-index:0; }
.page-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,7,8,.46) 0%, rgba(7,7,8,.55) 42%, var(--color-bg) 100%);
}
.page-hero .container{ position:relative; z-index:2; padding-bottom:clamp(40px,7vw,84px); }
.page-hero__crumb{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-label); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--color-mist);
}
.page-hero__crumb a{ color:var(--color-mist); transition:color var(--fast) var(--ease); }
.page-hero__crumb a:hover{ color:var(--color-red); }
.page-hero__crumb svg{ color:var(--color-red); }
.page-hero__crumb span{ color:var(--color-text-dim); }
.page-hero__title{ margin-top:22px; font-size:clamp(2.4rem,7vw,5.2rem); }
.page-hero__sub{ margin-top:18px; max-width:60ch; font-size:1.05rem; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,76px); align-items:start; }
.about-story__lead{ margin-top:24px; font-size:clamp(1.15rem,2vw,1.4rem); }
.about-story p{ margin-top:16px; font-size:1rem; }
.about-story .btn{ margin-top:30px; }
.about-story .intro__media{ position:sticky; top:calc(var(--header-h) + 24px); }

/* ============================================================
   PROGRAMS PAGE
   ============================================================ */
.program-stack{ display:flex; flex-direction:column; gap:clamp(40px,6vw,84px); }
.program-detail{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; }
.program-detail:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
.program-detail:nth-child(even) .program-detail__media{ order:2; }
.program-detail__media{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/2; }
.program-detail__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.program-detail:hover .program-detail__media img{ transform:scale(1.04); }
.program-detail__num{
  position:absolute; top:16px; left:18px;
  font-family:var(--font-display); font-size:1.3rem;
  color:#fff; background:rgba(7,7,8,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:6px 12px; border-radius:8px; border:1px solid var(--color-line);
}
.program-detail__tagline{ font-family:var(--font-label); font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--color-red); }
.program-detail__title{ margin-top:10px; font-size:clamp(1.7rem,3vw,2.6rem); }
.program-detail__desc{ margin-top:12px; font-size:1rem; }
.program-detail__meta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px 26px; padding-top:20px; border-top:1px solid var(--color-line); }
.program-detail__meta strong{ display:block; font-family:var(--font-label); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-text); }
.program-detail__meta span{ display:block; margin-top:4px; font-size:.9rem; color:var(--color-mist); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,4vw,48px); align-items:start; }
.contact-form-panel{ min-width:0; }
.contact-form-panel .sec-head__title{ font-size:var(--text-2xl); }
.contact-form-panel .sec-head__sub{ color:var(--color-mist); font-size:var(--text-sm); }
.contact-info-panel{
  background:var(--color-panel); border:1px solid var(--color-line);
  border-radius:var(--radius-md); padding:clamp(1.5rem,3vw,2.25rem);
  display:flex; flex-direction:column; gap:26px;
}
.contact-info-panel .contact-card{ padding:0; background:transparent; border:0; border-radius:0; }
.contact-info-panel .contact-card + .contact-card{ border-top:1px solid var(--color-line); padding-top:24px; }

.map-frame{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:16/10; border:1px solid var(--color-line);
  background:var(--color-graphite);
}
.map-frame__label{
  position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:14px;
  text-align:center; color:var(--color-mist); font-size:.9rem; padding:20px;
  font-family:var(--font-label); letter-spacing:.08em; text-transform:uppercase;
}
.map-frame__label a{ display:inline-block; margin-top:4px; color:var(--color-text-dim); letter-spacing:.04em; text-transform:none; font-family:var(--font-body); }
.map-frame__label a:hover{ color:var(--color-red); }
.map-frame__pin{
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:50%; background:rgba(229,6,18,.14); color:var(--color-red);
  border:1px solid rgba(229,6,18,.32);
  animation:pin-pulse 2.4s var(--ease) infinite;
}
@keyframes pin-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(229,6,18,.35); }
  50%{ box-shadow:0 0 0 14px rgba(229,6,18,0); }
}

/* ============================================================
   RESPONSIVE (pages)
   ============================================================ */
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .about-story .intro__media{ position:static; }
  .program-detail{ grid-template-columns:1fr; }
  .program-detail:nth-child(even){ grid-template-columns:1fr; }
  .program-detail:nth-child(even) .program-detail__media{ order:0; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .page-hero{ min-height:44vh; padding-top:calc(var(--header-h) + 16px); }
  .page-hero__title{ font-size:clamp(2rem, 7vw, 3.5rem); }
  .contact-info-panel{ padding:20px; }
}