/* ==========================================================================
   MEDI — the public landing page at `/`.

   Loaded only by `templates/portal/landing.html`. The sign-in form lives at
   `/login/` and keeps the name `portal:home`, so every `reverse()` in the
   product and the tests still resolves to the form.

   Type: Markazi Text for display, Cairo for running text. Markazi is warm and
   soft at large sizes and tiring at small ones; Cairo is the reverse. The pair
   is the point -- neither font does both jobs well alone.

   Colour: roles only, never a raw value (ARCHITECTURE §2-9).
   ========================================================================== */

.landing {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-strong);
  font-family: "Cairo", var(--font);
  font-size: 16.5px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.landing *,
.landing *::before,
.landing *::after { box-sizing: border-box; }

.landing h1, .landing h2 {
  font-family: "Markazi Text", "Cairo", var(--font);
  font-weight: 700;
  line-height: 1.24;
}
.landing h3, .landing h4, .landing h5 { font-weight: 700; line-height: 1.45; }
.landing h1, .landing h2, .landing h3, .landing h4, .landing h5 {
  margin: 0;
  color: var(--ink-strongest);
}
.landing p { margin: 0; }
.landing a { color: inherit; text-decoration: none; }
.landing :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* `height: auto` is the guard, not the decoration. With `width`/`height`
   attributes on the tag, a browser reserves space using *those* numbers -- so
   a wrong attribute stretches the picture rather than merely mis-reserving.
   This makes the real file decide the shape, whatever the attributes claim.
   The attributes still earn their place by preventing layout shift while the
   image loads, and `tests/test_landing.py` keeps them honest. */
.landing img { max-width: 100%; height: auto; display: block; }

.ld-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 46px); }
.ld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.ld-top { background: var(--surface-page); border-bottom: 1px solid var(--line-soft); }
.ld-top__in { display: flex; align-items: center; gap: 26px; min-height: 84px; }

.ld-brand { display: flex; align-items: center; gap: 11px; }
.ld-brand__leaf { color: var(--accent); flex: none; }
.ld-brand b { display: block; font-size: 20px; font-weight: 700; color: var(--ink-strongest); line-height: 1.25; }
.ld-brand small { display: block; font-size: 12px; color: var(--ink-muted); }

.ld-nav { display: flex; gap: 26px; margin: 0 auto; }
.ld-nav a { font-size: 15.5px; color: var(--ink); }
.ld-nav a:hover { color: var(--accent); }

.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 24px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: 15px; font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ld-btn--ghost { border-color: var(--line-strong); color: var(--ink-strong); background: var(--surface-card); }
.ld-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.ld-btn--solid { background: var(--accent); color: var(--on-accent); }
.ld-btn--solid:hover { background: var(--accent-strong); }
.ld-top__end { display: flex; gap: 11px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ld-hero { position: relative; overflow: hidden; padding: clamp(34px, 4.6vw, 62px) 0 clamp(40px, 5vw, 70px); }
.ld-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(24px, 3.4vw, 50px); align-items: center;
}
.ld-hero h1 { font-size: clamp(42px, 6.2vw, 82px); }
.ld-hero h1 span { display: block; color: var(--accent); }
.ld-hero__sub { margin-top: 20px; font-size: clamp(15.5px, 1.3vw, 18px); color: var(--ink); max-width: 38ch; line-height: 2; }
.ld-hero__cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.ld-leaf { position: absolute; color: var(--accent); opacity: .3; pointer-events: none; bottom: 24px; inset-inline-end: -12px; width: 150px; }

/* The two-image crossfade. Both frames are stacked; only opacity moves, so
   nothing reflows and the box never collapses between slides. */
.ld-shot {
  position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--surface-sunken); box-shadow: 0 30px 60px -34px var(--shade-strong);
}
.ld-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.ld-slide.is-on { opacity: 1; }
.ld-slide img { width: 100%; height: 100%; object-fit: cover; }
.ld-dots { position: absolute; bottom: 15px; inset-inline-start: 50%; transform: translateX(50%); display: flex; gap: 7px; z-index: 3; }
.ld-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-card); opacity: .6; border: 0; padding: 0; cursor: pointer; transition: width .2s ease, opacity .2s ease; }
.ld-dot.is-on { opacity: 1; width: 24px; border-radius: var(--radius-pill); background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .ld-slide { transition: none; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.ld-section { padding: clamp(48px, 5.8vw, 84px) 0; }
.ld-center { text-align: center; max-width: 56ch; margin: 0 auto clamp(26px, 3.2vw, 42px); }
.ld-center h2 { font-size: clamp(30px, 3.7vw, 46px); margin-bottom: 10px; }
.ld-center p { color: var(--ink); font-size: 16.5px; }
.ld-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 13.5px; margin-bottom: 12px; }
.ld-kicker::before, .ld-kicker::after { content: ""; width: 34px; height: 1px; background: var(--line-strong); }

/* Four cards */
.ld-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.ld-card {
  background: var(--surface-card); border: 1px solid var(--line-soft); border-radius: 18px;
  overflow: hidden; box-shadow: 0 14px 30px -26px var(--shade-strong);
  display: flex; flex-direction: column;
}
/* Each picture keeps its own proportions, and nothing is cropped.

   A fixed 16:10 frame with `object-fit: cover` was tried and reverted. It made
   the four cards line up neatly, but these photographs are portraits between
   1.00 and 1.33 wide, so covering a 1.60 frame ate the top and bottom of three
   of them and cut the subjects' heads off. Tidiness is not worth beheading the
   people in the picture.

   The cards still finish at the same height: the grid stretches them, and
   `.ld-card__b` takes up the slack under a shorter image. */
.ld-card__art { background: var(--surface-sunken); }
.ld-card__art img { width: 100%; height: auto; }
.ld-card__b { flex: 1; }
.ld-card__b { padding: 20px 20px 24px; text-align: center; }
.ld-card h3 { font-size: 19px; margin-bottom: 6px; }
.ld-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.85; }

/* The paths picture */
.ld-paths {
  background: var(--surface-raised); border: 1px solid var(--line-soft); border-radius: 26px;
  padding: clamp(22px, 2.8vw, 40px);
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px); align-items: center;
}
.ld-paths h2 { font-size: clamp(28px, 3.3vw, 42px); }
.ld-paths p { margin-top: 15px; color: var(--ink); font-size: 16px; line-height: 2; }
.ld-paths__img { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--surface-card); }

/* News */
.ld-feeds { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.ld-feed { background: var(--surface-card); border: 1px solid var(--line-soft); border-radius: 18px; padding: 22px 22px 18px; }
.ld-feed h3 { font-size: 18px; margin-bottom: 3px; }
.ld-feed__k { font-size: 13px; color: var(--ink-muted); margin-bottom: 14px; }
.ld-item { display: grid; grid-template-columns: auto 1fr; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.ld-item__d { font-size: 12px; color: var(--ink-faint); padding-top: 2px; }
.ld-item__t { height: 10px; background: var(--surface-sunken-2); border-radius: var(--radius-pill); margin-bottom: 6px; }
.ld-item__s { height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); width: 48%; }
.ld-w1 { width: 92%; } .ld-w2 { width: 76%; } .ld-w3 { width: 84%; }
.ld-feed__f { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-faint); }

/* Professor */
.ld-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.ld-pt { background: var(--surface-card); border: 1px solid var(--line-soft); border-radius: 18px; padding: 24px; }
.ld-pt h4 { font-size: 18px; margin-bottom: 7px; }
.ld-pt p { font-size: 14.5px; color: var(--ink-muted); line-height: 1.9; }

/* Waiting rows -- sections that exist in code and stay hidden until real */
.ld-pend { display: flex; gap: 13px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-muted); flex-wrap: wrap; }
.ld-pend b { color: var(--ink-strong); min-width: 165px; }
.ld-pend em { font-style: normal; font-size: 12px; color: var(--warn); background: var(--warn-faint); border: 1px solid var(--warn-soft); padding: 2px 10px; border-radius: var(--radius-pill); margin-inline-start: auto; }

/* Footer */
.ld-foot-wrap { border-top: 1px solid var(--line-soft); padding: 44px 0 56px; margin-top: 18px; }
.ld-foot { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.ld-foot h5 { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 13px; font-weight: 600; }
.ld-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ld-foot a { font-size: 14.5px; color: var(--ink); }
.ld-foot a:hover { color: var(--accent); }
.ld-foot__lead { margin-top: 14px; font-size: 14.5px; color: var(--ink-muted); max-width: 32ch; line-height: 1.9; }
.ld-foot__end { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-faint); }

@media (max-width: 1000px) {
  .ld-hero__grid, .ld-paths { grid-template-columns: 1fr; }
  .ld-four { grid-template-columns: repeat(2, 1fr); }
  .ld-feeds, .ld-three { grid-template-columns: 1fr; }
  .ld-foot { grid-template-columns: 1fr 1fr; }
  .ld-nav { display: none; }
  .ld-hero h1 { font-size: clamp(34px, 9vw, 52px); }
}