/* ==========================================================================
   The Language Mill — pages.css
   Intentionally near-empty. Anything used on more than one page belongs in
   components.css. Only truly page-unique, one-off styling may live here.
   ========================================================================== */

/* Home: latest-from-WyDSC list beside the Students Stay banner */
.home-split { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .home-split { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); } }

.stay-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--hairline);
  background-color: var(--forest-tint);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .stay-banner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); } }
.stay-banner__body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.stay-banner__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-3);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-transform: uppercase;
  margin: 0;
}
.stay-banner__media { min-height: 240px; background-color: var(--paper-alt); }
.stay-banner__media img, .stay-banner__media svg { width: 100%; height: 100%; object-fit: cover; }

/* Home footer: all-green band with a bottom bar */
.footer-bar { background-color: var(--forest); color: var(--on-forest); }
.footer-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-md);
  font-size: var(--step--1);
  border-top: 1px solid color-mix(in srgb, var(--on-forest) 22%, transparent);
  color: color-mix(in srgb, var(--on-forest) 85%, transparent);
}
.socials--on-forest a { border-color: color-mix(in srgb, var(--on-forest) 40%, transparent); color: var(--on-forest); }
.socials--on-forest a:hover { background-color: var(--on-forest); color: var(--forest-deep); border-color: var(--on-forest); }