/*
 * Home and landing layouts (docs/design/VEGAS-REDESIGN.md §3.10, §3.11, §3.17, §5.1, §5.2):
 * heroes, data stub, CTA row, ticket-stub billboard rows with their permit line, felt ticket table, draw-sheet grid,
 * playing cards, trust plaques, FAQ, final CTA. Mobile first (390 px), desktop at 1024 px.
 * Legal blocks (permit, sheet, prizes, contact, results) are styled by vg-legal.css; this file only places them.
 * Only the contrast pairs of §2.2. Every link and button target is >= 44 px.
 */

:where(.vg-home, .vg-landing) [id] {
  scroll-margin-top: calc(var(--vg-header-h) + var(--vg-s-2));
}

/* ---------- Shared: CTA row, permit line, extra phase badges ---------- */

.vg-cta-row {
  display: flex;
  align-items: center;
  gap: var(--vg-s-3);
}

.vg-cta-row .vg-btn {
  flex: 1 1 auto;
}

/* Permit line of billboard rows (legal data: Archivo, never transformed, never animated). */
.vg-permit-line {
  display: block;
  margin: 0;
  padding-left: var(--vg-s-2);
  border-left: 2px solid var(--vg-brass);
  color: var(--vg-bulb-soft);
  font: 600 var(--vg-fs-sm)/1.4 var(--vg-font-body);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  overflow-wrap: anywhere;
}

.vg-badge--off {
  background: var(--vg-smoke-2);
  color: var(--vg-bulb-soft);
}

.vg-badge--soon {
  background: var(--vg-night);
  color: var(--vg-gold);
  box-shadow: inset 0 0 0 1px var(--vg-brass);
}

/* ---------- Data stub (talón) ---------- */

.vg-stub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  margin: 0;
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r-md);
  background: var(--vg-smoke);
}

.vg-stub__cell {
  min-width: 0;
  padding: 10px 14px;
}

.vg-stub__cell + .vg-stub__cell {
  border-left: 2px dashed var(--vg-line);
}

.vg-stub__cell--wide {
  grid-column: 1 / -1;
}

.vg-stub__cell + .vg-stub__cell--wide {
  border-left: 0;
  border-top: 2px dashed var(--vg-line);
}

.vg-stub dt {
  color: var(--vg-bulb-mute);
  font-size: var(--vg-fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vg-stub dd {
  margin: 2px 0 0;
  color: var(--vg-bulb);
  font-size: var(--vg-fs-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.vg-stub__price {
  font-family: var(--vg-font-marquee);
  font-weight: 400;
}

/* The short draw date carries its zone label: smaller so it stays on two lines at 390 px. */
.vg-stub dd.vg-data {
  font-size: var(--vg-fs-xs);
  line-height: 1.4;
}

dd.vg-stub__price {
  color: var(--vg-gold);
  font-size: var(--vg-fs-lg);
  line-height: 1.15;
}

dd.vg-stub__num {
  color: var(--vg-gold);
  font: 400 var(--vg-fs-num)/1 var(--vg-font-marquee);
  font-variant-numeric: tabular-nums;
}

.vg-stub__num small {
  color: var(--vg-bulb-soft);
  font: 600 var(--vg-fs-sm)/1 var(--vg-font-body);
}

/* ---------- Landing hero (§5.2 item 2) ---------- */

.vg-hero,
.vg-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: var(--vg-night);
}

/* Bottom padding >= the 96 px skyline: the towers and their signs sit BELOW the last legal line
   (permit strip, bases link, age notice), never behind it (§4.8: legal text is never obscured). */
.vg-hero {
  padding-block: var(--vg-s-3) calc(96px + var(--vg-s-4));
}

.vg-hero__grid {
  display: grid;
  gap: var(--vg-s-3);
}

.vg-hero__org {
  margin: 0;
  color: var(--vg-bulb-soft);
  font-size: var(--vg-fs-sm);
  overflow-wrap: anywhere;
}

.vg-hero__org strong {
  color: var(--vg-bulb);
}

.vg-hero__marquee {
  margin-block: var(--vg-s-1);
}

.vg-hero__lede {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--vg-bulb-soft);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* The permit strip is a legal block: >= 24 px from the bulb arrow below it (§2.2). */
.vg-hero__permit {
  margin-bottom: var(--vg-s-3);
}

.vg-hero__micro {
  margin: 0;
  color: var(--vg-bulb-mute);
  font-size: var(--vg-fs-sm);
}

.vg-hero__micro a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 400px) {
  .vg-hero__lede {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* ---------- Home hero (§5.1 items 2-3) ---------- */

.vg-home-hero {
  padding-block: var(--vg-s-4) var(--vg-s-12);
}

.vg-home-hero__grid {
  display: grid;
  gap: var(--vg-s-8);
}

.vg-home-hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--vg-s-3);
}

.vg-home-hero__t,
.vg-home-hero .vg-lede {
  margin: 0;
}

.vg-feature {
  display: grid;
  gap: var(--vg-s-5);
  min-width: 0;
}

/* Facts and the permit line sit below the bulb frame, beyond its glow (legal data is paper, not light). */
.vg-feature__info {
  display: grid;
  gap: var(--vg-s-3);
  padding-top: var(--vg-s-3);
}

.vg-feature .vg-marquee__art {
  height: 88px;
}

.vg-feature__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vg-s-2);
  margin: 0;
  color: var(--vg-brass);
  font-size: var(--vg-fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vg-feature .vg-feature__t {
  font-size: var(--vg-fs-2xl);
}

.vg-feature__org {
  margin: 0;
  color: var(--vg-bulb-soft);
  font-size: var(--vg-fs-sm);
  overflow-wrap: anywhere;
}

.vg-feature__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vg-s-3) var(--vg-s-4);
  margin: 0;
}

.vg-feature__facts > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.vg-feature__facts dt {
  color: var(--vg-bulb-mute);
  font-size: var(--vg-fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vg-feature__facts dd {
  margin: 2px 0 0;
  color: var(--vg-bulb);
  font-size: var(--vg-fs-sm);
  font-weight: 600;
}

dd.vg-feature__price {
  color: var(--vg-gold);
  font: 400 var(--vg-fs-lg)/1.15 var(--vg-font-marquee);
}

.vg-feature__cta {
  justify-self: start;
}

/* ---------- Billboard: ticket-stub rows (§5.1 item 4) ---------- */

.vg-stub-rows {
  display: grid;
  gap: var(--vg-s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vg-stub-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 72px;
  overflow: hidden;
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r-md);
  background: var(--vg-smoke);
  color: var(--vg-bulb);
  text-decoration: none;
  transition: border-color var(--vg-d-ui) var(--vg-ease-out);
}

:where(.vg) .vg-stub-row:hover {
  border-color: var(--vg-brass);
  color: var(--vg-bulb);
}

.vg-stub-row__stub {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--vg-s-1);
  padding: var(--vg-s-4) var(--vg-s-2);
  border-right: 2px dashed var(--vg-brass);
  background: var(--vg-velvet);
  text-align: center;
}

/* Perforation notches. */
.vg-stub-row__stub::before,
.vg-stub-row__stub::after {
  content: "";
  position: absolute;
  right: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vg-night);
}

.vg-stub-row__stub::before {
  top: -9px;
}

.vg-stub-row__stub::after {
  bottom: -9px;
}

.vg-stub-row__price {
  color: var(--vg-gold);
  font: 400 1.125rem/1.1 var(--vg-font-marquee);
  overflow-wrap: anywhere;
}

.vg-stub-row__unit {
  color: var(--vg-bulb-soft);
  font-size: var(--vg-fs-xs);
  line-height: 1.3;
}

.vg-stub-row__body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--vg-s-1);
  min-width: 0;
  padding: var(--vg-s-3) var(--vg-s-4);
}

.vg-stub-row__t {
  margin: 0;
  color: var(--vg-bulb);
  font: 800 var(--vg-fs-lg)/1.25 var(--vg-font-body);
  overflow-wrap: anywhere;
}

.vg-stub-row__meta {
  color: var(--vg-bulb-soft);
  font-size: var(--vg-fs-sm);
  overflow-wrap: anywhere;
}

.vg-empty--home {
  justify-items: start;
  text-align: left;
}

/* ---------- Recent results (home) and landing results ---------- */

.vg-recent__all,
.vg-trust__bases {
  margin: var(--vg-s-4) 0 0;
}

.vg-recent__all a,
.vg-trust__bases a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.vg-results__empty {
  max-width: 60ch;
  margin: 0;
  padding: var(--vg-s-6);
  border: 1px solid var(--vg-line);
  background: var(--vg-smoke);
  color: var(--vg-bulb);
}

/* ---------- Landing blocks ---------- */

.vg-landing__permit {
  padding-top: var(--vg-s-8);
}

.vg-tickets {
  border-block: 6px solid var(--vg-felt-deep);
}

.vg-tickets__sign {
  margin-bottom: var(--vg-s-3);
}

.vg-tickets__lede {
  margin-bottom: var(--vg-s-6);
  color: var(--vg-bulb-soft);
}

.vg-scoreboard {
  display: grid;
  justify-items: center;
  gap: var(--vg-s-6);
  padding-top: var(--vg-s-12);
}

.vg-scoreboard > .vg-meter,
.vg-scoreboard > .vg-meter__label {
  justify-self: stretch;
}

/* The label sits 8 px under its meter, not a full grid gap away. */
.vg-scoreboard > .vg-meter__label {
  margin-top: calc(var(--vg-s-2) - var(--vg-s-6));
}

/* ---------- Playing cards (§3.17) ---------- */

.vg-cards {
  display: grid;
  gap: var(--vg-s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vg-card {
  --fan: 0deg;
  position: relative;
  min-height: 132px;
  padding: var(--vg-s-5) var(--vg-s-5) var(--vg-s-5) 56px;
  border: 1px solid var(--vg-bulb-soft);
  border-radius: var(--vg-r-md);
  background: var(--vg-bulb);
  color: var(--vg-ink);
  transform: rotate(var(--fan));
}

.vg-card__corner {
  position: absolute;
  top: var(--vg-s-3);
  left: var(--vg-s-3);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 28px;
  color: var(--vg-ink);
  font: 400 1.125rem/1 var(--vg-font-marquee);
}

.vg-card svg {
  fill: currentColor;
}

.vg-card--heart .vg-card__corner,
.vg-card--diamond .vg-card__corner,
.vg-card--heart .vg-card__pip,
.vg-card--diamond .vg-card__pip {
  color: var(--vg-chip-red);
}

.vg-card__t {
  margin: 0 0 var(--vg-s-1);
  color: var(--vg-ink);
}

.vg-card__b {
  margin: 0;
  color: var(--vg-ink);
  font-size: var(--vg-fs-sm);
}

.vg-card__pip {
  position: absolute;
  right: var(--vg-s-3);
  bottom: var(--vg-s-3);
  opacity: .16;
  pointer-events: none;
}

/* Deal (§4.1 vg-deal): scenes.js marks only the cards below the fold .is-pending; nothing hides without it. */
html.js-motion [data-vg-scene="deal"] > li {
  transition: opacity 480ms var(--vg-ease-out), transform 480ms var(--vg-ease-out);
}

html.js-motion [data-vg-scene="deal"] > li.is-pending {
  opacity: 0;
  transform: translateY(24px) rotate(calc(var(--fan) - 4deg));
}

html.js-motion.vg-lite [data-vg-scene="deal"] > li.is-pending {
  transform: rotate(var(--fan));
}

/* ---------- Trust plaques (§3.11): engraved brass, no shadow, no hover ---------- */

.vg-plaques {
  display: grid;
  gap: var(--vg-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vg-plaque {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: var(--vg-s-4);
  padding: var(--vg-s-5) var(--vg-s-6);
  border-block: 2px solid var(--vg-brass);
  background: var(--vg-smoke);
}

/* Four screws. */
.vg-plaque::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  --screw: radial-gradient(circle closest-side, var(--vg-brass) 0 55%, var(--vg-line) 65%, transparent 75%);
  background:
    var(--screw) left top / 8px 8px no-repeat,
    var(--screw) right top / 8px 8px no-repeat,
    var(--screw) left bottom / 8px 8px no-repeat,
    var(--screw) right bottom / 8px 8px no-repeat;
}

.vg-plaque__i {
  grid-row: 1 / span 2;
  margin-top: 2px;
  fill: none;
  stroke: var(--vg-gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vg-plaque__t {
  margin: 0 0 var(--vg-s-1);
  color: var(--vg-bulb);
  font-size: var(--vg-fs-base);
}

.vg-plaque__b {
  margin: 0;
  color: var(--vg-bulb-soft);
  font-size: var(--vg-fs-sm);
}

/* ---------- FAQ (§3.10) ---------- */

.vg-faq__list {
  display: grid;
  gap: var(--vg-s-2);
  max-width: 72ch;
}

.vg-faq__item {
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r-md);
  background: var(--vg-smoke);
}

.vg-faq__q {
  display: flex;
  align-items: center;
  gap: var(--vg-s-3);
  min-height: 48px;
  padding: var(--vg-s-3) var(--vg-s-4);
  color: var(--vg-bulb);
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.vg-faq__q::-webkit-details-marker {
  display: none;
}

.vg-faq__mark {
  flex: none;
  transition: transform var(--vg-d-ui) var(--vg-ease-out);
}

.vg-faq__mark circle {
  fill: var(--vg-chip-red);
  stroke: var(--vg-bulb);
  stroke-width: 1.5;
  stroke-dasharray: 3 2.6;
}

.vg-faq__mark path {
  fill: none;
  stroke: var(--vg-bulb);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vg-faq__item[open] .vg-faq__mark {
  transform: rotate(90deg);
}

.vg-faq__a {
  padding: 0 var(--vg-s-4) var(--vg-s-4) 48px;
  color: var(--vg-bulb-soft);
}

.vg-faq__a p {
  margin: 0;
  white-space: pre-line;
}

html.js-motion .vg-faq__item[open] .vg-faq__a {
  animation: vg-fade-up 220ms var(--vg-ease-out);
}

/* ---------- Final CTA (§5.2 item 12): velvet + bulb frame ---------- */

.vg-finale {
  background: var(--vg-velvet);
}

.vg-finale__frame {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: var(--vg-s-4);
  padding: var(--vg-s-10) 28px;
  border: 3px solid var(--vg-brass);
  border-radius: var(--vg-r-lg);
  text-align: center;
}

.vg-finale__t {
  margin: 0;
  color: var(--vg-bulb);
}

.vg-finale__lede {
  max-width: 40ch;
  margin: 0;
  color: var(--vg-bulb-soft);
}

.vg-finale .vg-cta-row {
  justify-content: center;
  width: 100%;
  max-width: 420px;
}

/* ---------- Tablet ---------- */

@media (min-width: 768px) {
  .vg-stub-row {
    grid-template-columns: 136px minmax(0, 1fr);
  }

  .vg-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Desktop (1024 px +) ---------- */

@media (min-width: 1024px) {
  .vg-hero {
    padding-block: var(--vg-s-12) var(--vg-s-16);
  }

  /* 7 / 5: marquee on the left, the rest stacked on the right. */
  .vg-hero__grid {
    grid-template-columns: 7fr 5fr;
    column-gap: var(--vg-s-10);
    align-content: start;
  }

  .vg-hero__grid > * {
    grid-column: 2;
  }

  .vg-hero__grid > .vg-hero__marquee {
    grid-column: 1;
    grid-row: 1 / span 8;
    align-self: start;
    margin: 0;
  }

  .vg-home-hero {
    padding-block: var(--vg-s-16) var(--vg-s-24);
  }

  .vg-home-hero__grid {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    column-gap: var(--vg-s-12);
  }

  .vg-feature .vg-marquee__art {
    height: 140px;
  }

  .vg-stub-rows,
  .vg-recent .vg-board-list {
    grid-template-columns: 1fr 1fr;
  }

  .vg-landing__ficha--board {
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: var(--vg-s-10);
    align-items: start;
  }

  .vg-landing__ficha--board > .vg-ficha {
    grid-column: 1;
    grid-row: 1;
  }

  .vg-landing__ficha--board > .vg-scoreboard {
    grid-column: 2;
    grid-row: 1;
  }

  .vg-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--vg-s-6);
  }

  .vg-card:nth-child(4n + 1) { --fan: -3deg; }
  .vg-card:nth-child(4n + 2) { --fan: -1deg; }
  .vg-card:nth-child(4n + 3) { --fan: 1deg; }
  .vg-card:nth-child(4n + 4) { --fan: 3deg; }

  .vg-plaques {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vg-s-5);
  }

  .vg-landing__contact .vg-contact {
    max-width: 40rem;
  }
}