/* Facilties Page */
/* ---- Scoped to .af so it can be dropped into a WP template ---- */
.af{padding:72px 24px 96px;}
.af-container{max-width:1180px;margin:0 auto;}

/* Page header */
.af-head{margin-bottom:0px;}
.af-head h1{  font-size: clamp(1.55rem, 2.5vw, 2.1rem);   font-weight: 700;   line-height: 1.25;   margin-bottom: .75rem; }
.af-rule{ display: block; width: 48px; height: 3px; background: var(--gold); border-radius: 2px;   margin: .75rem 0 1.5rem; }
.af-intro{ max-width:56ch; margin:22px 0 0; font-size:1.0625rem; line-height:1.7;   color:var(--af-muted); }

/* Facility rows */
.af-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; padding:48px 0; /* border-top:1px solid var(--af-line); */}
.af-row:first-of-type{border-top:none;}

/* Media column with offset frame */
.af-media{ position:relative; margin:0;}
.af-media img,
.af-ph{ position:relative; z-index:1; display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; box-shadow:0 18px 40px -22px rgba(11,46,54,.55); }

/* Placeholder (swap for a real <img>) */
.af-ph{ display:grid; place-content:center; gap:10px; text-align:center; background: radial-gradient(120% 120% at 30% 20%, rgba(35,163,193,.16), transparent 60%),linear-gradient(150deg,var(--af-teal-deep),#123f49); color:#dff0f4; }
.af-ph svg{width:34px;height:34px;opacity:.85;margin:0 auto;}
.af-ph span{ font-size:.78rem; letter-spacing:.02em; opacity:.8; }

/* Text column */
.af-body{max-width:56ch;}
.af-name{ font-family:var(--af-serif); font-weight:600; font-size:clamp(1.35rem,2.4vw,1.7rem); color:var(--af-teal-deep);   margin:0 0 16px;   display:flex;   align-items:center;   gap:12px; }
.af-name::before{   content:"";   width:22px;height:3px;   background:var(--af-gold);   border-radius:2px;  flex:none; }
.af-body p{   margin:0;   font-size:0.92rem;   line-height:1.75;   color:var(--af-ink); }

/* Zigzag: on flipped rows the media sits on the right */
.af-row--flip .af-media{order:2;}
.af-row--flip .af-body{order:1;}

/* Responsive */
@media (max-width:820px){
  .af{padding:48px 20px 64px;}
  .af-row{
    grid-template-columns:1fr;
    gap:24px;
    padding:40px 0;
  }
  .af-media::before,
  .af-row--flip .af-media::before{inset:14px -14px -14px 14px;}
  .af-row--flip .af-media{order:0;}
  .af-row--flip .af-body{order:0;}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;}
}