/**
 * AM2027 — Learning Zone.
 * Two-column card grid, each card itself split image-left / copy-right. Kept
 * distinct from the special events page by the two-up grid of equal-weight
 * tinted panels — that page is full-width rows on a plain ground.
 */

/* Top padding trimmed to match the other interior pages: it was sized to
   sit above this page's own heading, which now lives in the sub banner. */
.zone{padding:clamp(18px,2vw,26px) 28px clamp(56px,8vw,88px)}

.zone-head h1{margin:0;font-size:calc((clamp(26px,3.4vw,34px)) * var(--fs,1));font-weight:700;letter-spacing:-.015em}
.zone-head .u{width:56px;height:2px;background:var(--teal);margin:14px 0 0}
/* No 62ch cap. It held this one sentence to 551px and broke it over two
   lines with 593px of empty row beside it; the sentence is short enough that
   the measure is not at risk across the full column. It needs 954px to stay
   on one line, so it still wraps below roughly a 1060px container — nothing
   short of shrinking the type can prevent that. */
.zone-intro{margin:20px 0 0;font-size:calc((15.5px) * var(--fs,1));line-height:1.6;color:var(--slate)}
.zone-empty{margin:32px 0 0;font-size:calc((15px) * var(--fs,1));color:var(--slate)}

.zone-grid{
  list-style:none;margin:38px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
}

.zone-card{
  position:relative;
  display:grid;grid-template-columns:minmax(0,34%) 1fr;gap:20px;align-items:start;
  padding:24px 26px 26px;border-radius:10px;
  background:var(--wash);border:1px solid var(--line);
  /* Top accent reads as a tab on the card, distinct from the section's own
     underline rule. */
  border-top:3px solid var(--teal);
  transition:box-shadow .22s,transform .22s,border-color .22s;
}
/* No image: the copy takes the whole card instead of sitting in a gutter. */
.zone-card.has-no-image{grid-template-columns:1fr}

.zone-shot{margin:0;overflow:hidden;border-radius:7px;background:#fff}
.zone-shot img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}

/* The copy column stacks so the link can still sit at its foot. */
.zone-body{display:flex;flex-direction:column;min-width:0}
.zone-card.has-link:hover{
  box-shadow:0 14px 32px -20px rgba(12,46,78,.5);transform:translateY(-2px);
}
.zone-card.is-new{border-top-color:var(--orange);background:#FDF6EF}

.zone-title{
  margin:0;font-size:calc((16px) * var(--fs,1));font-weight:700;line-height:1.3;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
}
.zone-badge{
  display:inline-block;margin-right:8px;padding:3px 7px;border-radius:3px;
  background:var(--orange);color:#fff;
  font-size:calc((11.5px) * var(--fs,1));font-weight:700;letter-spacing:.1em;vertical-align:2px;
}

.zone-desc{margin:12px 0 0;font-size:calc((14.5px) * var(--fs,1));line-height:1.6;color:var(--slate)}
.zone-desc p{margin:0 0 9px}
.zone-desc p:last-child{margin-bottom:0}

.zone-link{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  color:var(--teal);font-size:calc((13px) * var(--fs,1));font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.zone-link svg{width:15px;height:15px;transition:transform .2s}
.zone-card:hover .zone-link svg{transform:translateX(4px)}
/* Whole card clickable, without nesting the heading inside the anchor. */
.zone-link::after{content:"";position:absolute;inset:0;border-radius:10px}
.zone-link:focus-visible{outline:none}
.zone-card:has(.zone-link:focus-visible){outline:2px solid var(--teal);outline-offset:3px}

@media(max-width:820px){
  .zone-grid{grid-template-columns:1fr;gap:14px;margin-top:28px}
  .zone-card{padding:22px 22px 24px}
}

/* One column of cards but still roomy: keep the image beside the copy until
   the card itself is genuinely narrow, then stack it on top. */
@media(max-width:520px){
  .zone-card{grid-template-columns:1fr;gap:14px}
  .zone-shot img{aspect-ratio:16/9}
}