/* =============================================================
   HOMEPAGE
   Layout for index.html only. Colours, type, buttons, nav and
   footer all come from theme.css.
   ============================================================= */

/* ---------- Hero: the banner wall ----------
   The plaster wall from the banner, the Leonida logo on it, and a
   bottom edge cut at the wordmark's angle. */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: calc(var(--nav-h) + 3rem) var(--edge) 7rem;
  background: var(--plaster);
  background-blend-mode: soft-light, normal;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.hero h1 { font-size: clamp(4rem, 10.5vw, 9.5rem); }
.hero h1 small { display: block; font-size: .42em; line-height: 1.1; margin-top: .25rem; color: var(--peach); }
.hero .lead { margin-top: 1.75rem; color: #F6E9F8; }
.hero-logo {
  width: min(100%, 35rem);
  justify-self: center;
  animation: arrive .9s cubic-bezier(.2,.8,.2,1) both .15s;
}
@keyframes arrive { from { opacity: 0; transform: translateY(30px) rotate(-4deg) scale(.94); } }
.facts {
  position: absolute; left: var(--edge); bottom: 4.25rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.75rem;
  font-weight: 600; color: var(--cream); font-size: .95rem;
}

/* ---------- About: text and a leaning photo ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.lean-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }

/* ---------- Divisions: four panels that widen on hover ----------
   Hovering (or tabbing to) a panel grows it and reveals its line of
   description. On phones they stack, with the description always
   showing. */
.panels { display: flex; gap: .6rem; height: 32rem; margin-top: 2.5rem; }
.panel { position: relative; flex: 1; overflow: hidden; border-radius: 4px; text-decoration: none; transition: flex-grow .5s cubic-bezier(.2,.8,.2,1); }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,2,31,0) 40%, rgba(20,2,31,.92) 100%); }
.panel-body { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 1; }
.panel h3 { font: italic 900 clamp(1.9rem, 2.6vw, 2.5rem)/.95 "Saira Extra Condensed"; color: var(--cream); }
.panel p { margin-top: .5rem; max-width: 22em; opacity: 0; transform: translateY(.5rem); transition: opacity .3s, transform .3s; }
.panel:hover, .panel:focus-visible { flex-grow: 2.4; }
.panel:hover img, .panel:focus-visible img { transform: scale(1.04); }
.panel:hover p, .panel:focus-visible p { opacity: 1; transform: none; }

/* ---------- The LSN standard: the sunset band ----------
   The sunset from inside the Leonida logo, with the logo itself
   breaking out of the top edge. */
.sun-band { background: var(--sunset); color: var(--night); margin-top: 3rem; }
.sun-band .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.sun-band .band-logo { width: 100%; max-width: 31rem; justify-self: center; }
.sun-band h2 { color: var(--night); }
.principles { margin-top: 1.75rem; }
.principles li { padding: 1rem 0; border-top: 1px solid rgba(20,2,31,.18); }
.principles h3 { font: italic 900 1.7rem/1 "Saira Extra Condensed"; color: var(--night); }
.principles p { margin-top: .3rem; color: #3A1748; }

/* ---------- How to join: a real sequence, so it's numbered ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding-top: 5.5rem; }
.steps li::before {
  content: counter(s);
  position: absolute; top: -.5rem; left: 0;
  font: italic 900 6.5rem/1 "Saira Extra Condensed";
  color: transparent; -webkit-text-stroke: 2px var(--neon);
}
.steps h3 { font-size: 1.3rem; color: var(--cream); margin-bottom: .4rem; }
.steps p { color: var(--muted); }
.need { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(224,64,251,.3); color: var(--muted); }
.need strong { color: var(--cream); font-weight: 600; }

/* ---------- How LSN is run: a plaster band ---------- */
.band {
  background: var(--plaster);
  background-blend-mode: soft-light, normal;
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
  padding: clamp(5rem, 10vw, 8rem) 0;
}
.band .lead { color: #fff; }
.depts { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: 1.75rem; }
.depts li { padding: .35rem .9rem; transform: skewX(var(--skew)); background: rgba(20,2,31,.35); color: var(--cream); font-weight: 600; }
.depts li span { display: inline-block; transform: skewX(12deg); }
.depts li.top { background: var(--cream); color: var(--violet); }
.band .text-link { display: inline-block; margin-top: 2rem; color: var(--cream); }

/* ---------- Roadmap: two stops on one line ---------- */
.road { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; position: relative; }
.road::before { content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: 2px; background: linear-gradient(90deg, var(--neon), rgba(224,64,251,.15)); }
.stop { position: relative; padding: 2rem 2rem 0 0; }
.stop::before { content: ""; position: absolute; top: 0; left: 0; width: 1.1rem; height: 1.1rem; transform: skewX(var(--skew)); background: var(--neon); }
.stop.later::before { background: var(--night); box-shadow: inset 0 0 0 2px var(--neon); }
.stop h3 { color: var(--cream); font-size: 1.3rem; }
.stop p { color: var(--muted); }

/* ---------- Gallery strip ---------- */
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.strip { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 var(--edge); margin-top: 1.5rem; scroll-padding-left: var(--edge); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }   /* hide the scrollbar; the arrows (and swiping) move it */
.strip-tools { display: flex; align-items: center; gap: 1.25rem; }
.strip-arrows { display: flex; gap: .5rem; }
.strip-arrows button {
  width: 2.75rem; height: 2.5rem; border: 0; cursor: pointer;
  background: rgba(255,245,200,.1); color: var(--cream);
  transform: skewX(var(--skew)); font: 700 1.2rem/1 Saira, sans-serif;
  transition: background .2s, color .2s;
}
.strip-arrows button:hover { background: var(--cream); color: var(--violet); }
.strip-arrows button:disabled { opacity: .3; cursor: default; background: rgba(255,245,200,.1); color: var(--cream); }
.strip img { flex: 0 0 auto; width: clamp(16rem, 32vw, 26rem); aspect-ratio: 16/10; object-fit: cover; scroll-snap-align: start; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }

/* ---------- Closer: the plaster wall with the Leonida logo ----------
   The same plaster wall as the hero, with the logo as its own image
   on the right. Because the logo is a separate image rather than part
   of a stretched banner, it lands in the same place on any screen. */
.closer {
  min-height: 80vh;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem;
  padding: 6rem var(--edge);
  background: var(--plaster);
  background-blend-mode: soft-light, normal;
}
.closer-logo { width: min(100%, 34rem); justify-self: center; }
.closer-inner { max-width: 32rem; }
.closer p { color: #F6E9F8; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 9rem; clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); }
  .hero-logo { width: 70%; order: -1; }
  .facts { position: static; margin-top: 1.5rem; }
  .split, .steps, .road, .sun-band .wrap { grid-template-columns: 1fr; }
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; height: 13rem; }
  .panel p { opacity: 1; transform: none; }
  .sun-band .band-logo { max-width: 72%; margin: 0 auto; }

  /* Roadmap on phones: one vertical line down the left, with each
     stop's marker sitting on it beside its text. */
  .road { gap: 2rem; padding-left: 2.25rem; }
  .road::before { left: .5rem; right: auto; top: .5rem; bottom: .5rem; width: 2px; height: auto; background: linear-gradient(180deg, var(--neon), rgba(224,64,251,.15)); }
  .stop { padding: 0; }
  .stop::before { left: -2.25rem; top: .3rem; }
  .closer { grid-template-columns: 1fr; min-height: 0; }
  .closer-logo { width: 72%; order: -1; }
}