/* Public homepage. Scope all rules to the landing page.
   Preserve Source Sans 3, DECA artwork, 10px containers and 8px controls.
   No animation, new dependencies, or changes to private portal layouts.
   Nearly every visitor arrived from a link to sign up, so the hero carries the
   decision-making facts and the registration button, and must fit on a 390x844 phone.

   Alignment: .landing-page is the one content container (main's max width and gutters, which
   the site header shares through --page-max and --page-gutter in styles.css).
   The hero and the closing band keep the container width, so their content lands exactly on
   the container edges. Their color reaches the viewport edges through a border-image outset
   (--home-bleed). An outset paints outside the box without adding scrollable width, so the page
   never scrolls sideways, even when 100vw includes a desktop scrollbar; body clips the extra paint.
   The hero and the two-column section use the same column template, so the details card and
   the photo share a right column, and the footer sits inside the same container. */
.landing-page {
  --home-cols: minmax(0, 1fr) minmax(20rem, 26rem);
  --home-gap: clamp(2rem, 4.5vw, 4rem);
  --home-bleed: 0 100vw;
  padding-top: 0;
}

/* Hero: a full-width DECA-blue band. Cancels main's top padding to sit flush under the header. */
.hero-invite {
  display: grid;
  grid-template-columns: var(--home-cols);
  grid-template-areas: "copy facts" "action facts";
  grid-template-rows: auto 1fr;
  column-gap: var(--home-gap);
  align-items: start;
  margin: -2.5rem 0 0;
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  background: var(--deca-blue);
  border-image: conic-gradient(var(--deca-blue) 0 0) fill 0 / 0 / var(--home-bleed);
  color: #fff;
}
.hero-invite-copy { grid-area: copy; }
.hero-invite-action { grid-area: action; padding-top: 1.75rem; }
.hero-signin { margin: 1rem 0 0; color: #fff; font-size: 1.05rem; }
/* White, underlined, and bold on the blue banner, so the link reads as a link at full contrast. */
.hero-signin a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.hero-signin a:hover { text-decoration-thickness: 2px; }
.hero-signin a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 2px; }
.hero-invite h1 {
  max-width: none;
  margin: 0 0 1.1rem;
  color: #fff;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-invite .lead { max-width: 40rem; margin: 0; color: #fff; font-size: 1.25rem; line-height: 1.5; }
.hero-invite .notice { max-width: 50ch; margin: 0; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* The facts people decide on, in a card on the right edge of the container: date tiles, then
   full-width rows with small icons (time, location, device, lunch and parking). */
.hero-facts {
  grid-area: facts;
  justify-self: stretch;
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
.hero-facts > li { position: relative; min-width: 0; padding: .85rem 0; border-top: 1px solid var(--line); }
.hero-facts > li:first-child { padding-top: 0; border-top: 0; }
.hero-facts > li:last-child { padding-bottom: 0; }
.hero-facts strong { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
.hero-facts span { display: block; margin-top: .2rem; color: var(--muted); font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.date-tiles { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-facts .date-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5.5rem;
  margin: 0;
  padding: .5rem .9rem .55rem;
  border: 1px solid var(--blue-line);
  border-radius: 8px;
  background: var(--blue-wash);
  line-height: 1.1;
}
.hero-facts .date-tile-weekday { margin: 0; color: var(--blue-deep); font-size: .8rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.hero-facts .date-tile-day { margin: .15rem 0 0; color: var(--ink); font-size: 1.45rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
.hero-facts .fact-note { margin-top: .65rem; }
.hero-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: .75rem; align-items: start; }
.fact-icon { display: block; width: 20px; height: 20px; margin-top: .14rem; color: var(--ink); }
.fact-link { display: inline-block; margin-top: .4rem; color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.fact-link:hover { text-decoration-thickness: 2px; }
.hero-facts .fact-device span { font-size: .94rem; line-height: 1.4; }
.landing-page .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* One action, repeated in the closing band with the same label. */
.home-register { min-height: 60px; padding: 1rem 2.4rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; }
.hero-invite-register { background: #fff; color: #005ca8; box-shadow: 0 6px 18px rgba(0, 30, 60, .28); }
.hero-invite-register:hover { background: #e8f3fc; color: #004a87; }
.hero-invite-register:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Below the hero: Isaac's intro (wider, left) beside the photo (right column, under the details card).
   Without an intro the section and the photo are left out. On tablets and phones the photo follows the intro. */
.home-columns {
  display: grid;
  grid-template-columns: var(--home-cols);
  column-gap: var(--home-gap);
  row-gap: 2rem;
  align-items: start;
  padding: clamp(2.75rem, 5vw, 4rem) 0;
}
.home-intro h2, .home-deca h2 { max-width: none; margin: 0 0 .75rem; letter-spacing: -.015em; }
.home-intro h2, .home-deca h2, .home-closing h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.home-intro p { margin: 0 0 1rem; color: var(--ink); font-size: 1.15rem; line-height: 1.65; }
.home-intro p:last-child { margin-bottom: 0; }
/* "What is DECA?" is a centered band directly under the hero, ahead of the two columns. The columns
   drop their own top padding when it comes first, so the space between the two sections matches the
   space above and below. Phones align it left, like the closing band. */
.home-deca { max-width: 44rem; margin: 0 auto; padding-block: clamp(2.75rem, 5vw, 4rem); text-align: center; }
.home-deca + .home-columns { padding-top: 0; }
.home-deca p { margin: 0 0 1rem; color: var(--ink); font-size: 1.15rem; line-height: 1.65; text-wrap: pretty; }
.home-deca p:last-child { margin-bottom: 0; }
/* Aligned to the bottom of the text column, so it sits beside "What does a judge do?" instead of
   straddling the gap between the two sections. */
.home-photo { display: block; grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
.home-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 45% 40%;
  border-radius: 10px;
  background: var(--line);
}

/* Closing band: full width, light blue with a hairline above and below; centered heading, text, and the same button.
   The border stays transparent to keep its 1px of height; the border-image paints the lines and fill. */
.home-closing {
  margin: 0;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-block: 1px solid transparent;
  background: var(--blue-wash);
  border-image: linear-gradient(var(--blue-line) 0 1px, var(--blue-wash) 0 calc(100% - 1px), var(--blue-line) 0) fill 0 / 0 / var(--home-bleed);
  text-align: center;
}
.home-closing h2 { max-width: none; margin: 0 0 .75rem; letter-spacing: -.015em; text-wrap: balance; }
.home-closing p { max-width: 42rem; margin: 0 auto .9rem; color: var(--ink); font-size: 1.15rem; line-height: 1.6; text-wrap: pretty; }
.home-closing p:last-of-type { margin-bottom: 1.5rem; }
/* Same soft shadow as the hero button, tinted blue for the light band. */
.home-closing-register { box-shadow: 0 6px 18px rgba(0, 60, 120, .22); }

/* Footer on the container edges: district on the left, help links grouped on the right. */
.landing-page .site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem 2rem;
  margin: 0;
  padding: 2.25rem 0 3rem;
  border-top: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.landing-page .home-closing + .site-footer { border-top: 0; }
.landing-page .site-footer p { margin: 0; }
.landing-page .site-footer-district { font-weight: 600; color: var(--ink); }
.landing-page .site-footer-help { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem 1.75rem; text-align: right; }
.landing-page .site-footer-email { overflow-wrap: anywhere; }
.landing-page .site-footer a { color: var(--blue-deep); }

@media (max-width: 960px) {
  .landing-page { --home-cols: minmax(0, 1fr) minmax(18rem, 22rem); --home-gap: 2rem; }
}
/* Tablet and phone: one column. Hero order is copy, details, then the button. */
@media (max-width: 850px) {
  .hero-invite {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "facts" "action";
    grid-template-rows: auto;
  }
  .hero-facts { margin-top: 1.5rem; }
  .hero-invite-action { padding-top: 1.5rem; }
  .home-columns { grid-template-columns: minmax(0, 1fr); }
  .home-photo { grid-column: auto; grid-row: auto; }
  .home-photo img { aspect-ratio: 16 / 10; }
  .landing-page .site-footer { flex-direction: column; align-items: flex-start; }
  .landing-page .site-footer-help { justify-content: flex-start; text-align: left; }
}
@media (max-width: 700px) {
  .hero-invite { margin-top: -1.25rem; padding-block: 1.6rem 1.75rem; }
  .landing-page .site-footer-help { flex-direction: column; }
}
@media (max-width: 600px) {
  .hero-invite h1 { margin-bottom: .7rem; font-size: 1.95rem; line-height: 1.1; }
  .hero-invite .lead { font-size: 1.0625rem; line-height: 1.45; }
  /* Phones: smaller date tiles in one row and tighter rows, so the button stays on the first screen. */
  .hero-facts { margin-top: 1.1rem; padding: .8rem 1rem; }
  .hero-facts > li { padding: .5rem 0; }
  .hero-facts strong { font-size: 1.03rem; }
  .hero-facts span { margin-top: .1rem; line-height: 1.4; }
  .date-tiles { gap: .5rem; }
  .hero-facts .date-tile { min-width: 4.75rem; padding: .3rem .7rem .35rem; }
  .hero-facts .date-tile-weekday { font-size: .75rem; }
  .hero-facts .date-tile-day { margin-top: .1rem; font-size: 1.2rem; }
  /* The one-or-both note sits beside the tiles instead of under them. */
  .hero-facts > .fact-dates { display: flex; align-items: center; gap: .85rem; }
  .hero-facts > .fact-dates .date-tiles { flex: none; }
  .hero-facts .fact-note { flex: 1 1 0; min-width: 0; margin: 0; }
  .hero-row { column-gap: .6rem; }
  /* The directions link follows the address on its last line instead of taking a line of its own. */
  .hero-row .fact-address { display: inline; }
  .fact-link { margin: .1rem 0 0; white-space: nowrap; }
  .fact-address + .fact-link { display: inline; margin: 0; }
  .hero-invite-action { padding-top: 1.1rem; }
  .home-register { width: 100%; min-height: 56px; padding: .9rem 1.25rem; font-size: 1.15rem; }
  .home-intro p, .home-deca p { font-size: 1.0625rem; line-height: 1.6; }
  .home-deca { text-align: left; }
  /* Several lines of centered text are hard to read on a phone, so the band aligns left here. */
  .home-closing { padding-block: 2rem; text-align: left; }
  .home-closing p { font-size: 1.0625rem; margin-bottom: .75rem; }
  .home-closing p:last-of-type { margin-bottom: 1.25rem; }
}
/* Small Android phones (360x740): tighten the hero so the button still lands on the first screen. */
@media (max-width: 380px) {
  .hero-invite { padding-block: 1.15rem 1.25rem; }
  .hero-invite h1 { font-size: 1.75rem; }
  .hero-invite .lead { line-height: 1.4; }
  .hero-facts { margin-top: .8rem; padding-block: .65rem; }
  .hero-facts > li { padding: .42rem 0; }
  .hero-facts .date-tile-day { font-size: 1.15rem; }
  .hero-invite-action { padding-top: .8rem; }
}