/* Homepage sections from Ginger's plan of 2026-09-10: hero additions, Two
   Styles, Popular Ideas, Event Types, The Difference and the Gallery. Loaded on
   the homepage only (pages.php). Breakpoints are the site's existing set:
   46rem, 54rem, 62rem (nav), 68rem. */

/* ---------- hero additions ---------- */
/* She asked for the logo "large and front and center". It sits above the
   headline on the photograph, where the header's small copy cannot compete. */
.hero__logo {
  width: clamp(13rem, 34vw, 21rem);
  height: auto;
  margin-bottom: var(--s-4);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(242, 200, 107, 0.35), 0 18px 48px -12px rgba(0, 0, 0, 0.6);
}
/* It lands on the lit MARRY ME bulbs at desktop widths: cream on white bulbs
   measured 1.8:1. The shadow gives every glyph its own dark edge, which is what
   gets it back above 4.5:1 without boxing it in. */
.hero__trust {
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFF1E4;
  text-shadow: 0 0 2px rgba(20, 12, 26, 0.95), 0 1px 3px rgba(20, 12, 26, 0.9), 0 2px 16px rgba(20, 12, 26, 0.8);
}
.hero__sub, .hero__credit {
  text-shadow: 0 0 2px rgba(20, 12, 26, 0.9), 0 1px 3px rgba(20, 12, 26, 0.85), 0 2px 18px rgba(20, 12, 26, 0.7);
}
.hero__trust span { color: var(--gold-lit); padding-inline: 0.3em; }

/* ---------- two styles ---------- */
.styles__head { max-width: 46rem; }
.styles {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.style {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lift-2);
}
.style__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.style__body { padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.style__body h3 { margin: 0; font-size: var(--t-2xl); }
.style__body p { margin: 0; color: var(--on-paper-soft); }
/* .style__body .style__tag, at (0,2,0), because it has to beat .style__body p
   at (0,1,1). A bare .style__tag loses, and !important would only move the
   fight somewhere harder to find. */
.style__body .style__tag {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 72, "WONK" 1, "opsz" 30;
  font-size: var(--t-lg);
  color: var(--coral-ink);
}
.style__more {
  justify-self: start;
  margin-top: var(--s-2);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-ink);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.style__more:hover { color: var(--ink); }

/* Illuminate is the neon line, so its card is the dark one. The media is the
   logo lockup with the site's glow, because there is still no photograph of
   the letters lit. */
.style--illuminate { background: var(--ink); }
.style--illuminate .style__media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 63, 160, 0.22), rgba(56, 220, 230, 0.1) 55%, transparent 75%), var(--ink);
}
.style--illuminate .style__media img {
  width: min(24rem, 82%);
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 3px;
  filter: drop-shadow(0 0 22px rgba(255, 63, 160, 0.45)) drop-shadow(0 0 40px rgba(56, 220, 230, 0.25));
}
.style--illuminate h3 { color: var(--on-ink); }
.style--illuminate .style__body p { color: var(--on-ink-soft); }
.style--illuminate .style__body .style__tag { color: var(--neon-2); }
.style--illuminate .style__more { color: var(--on-ink); }
.style--illuminate .style__more:hover { color: var(--neon-2); }

.styles__also { margin: var(--s-4) 0 0; color: var(--on-paper-soft); max-width: 60ch; }

@media (min-width: 54rem) {
  .styles { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

/* ---------- popular ideas ---------- */
.ideas {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.ideas li { margin: 0; }
/* The caption sits under the photograph, not over it: laid over the image it
   covered the very word it was naming. 3:2 is the shape these jobs were shot
   in, so THE FREEMANS and 2023 stay whole instead of losing their first letter
   to a square crop. */
.idea { margin: 0; }
.idea img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-2);
}
.idea figcaption {
  margin-top: 0.55rem;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The rest of her list, set like the letters themselves: capitals on a lit
   plate, so a phrase reads as something you could rent. */
.idea-words {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.idea-words li {
  margin: 0;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: #FFF1E4;
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 1px rgba(242, 200, 107, 0.45), 0 0 14px -6px rgba(242, 200, 107, 0.7);
}
.ideas__more { margin: var(--s-4) 0 0; }

@media (min-width: 54rem) {
  .ideas { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
}

/* ---------- event types ---------- */
.events {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.events li { margin: 0; }
.event {
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  box-shadow: var(--lift-1);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.event:hover { transform: translateY(-3px); box-shadow: var(--lift-3); }
.event__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.event__body { display: grid; gap: 0.35rem; padding: var(--s-3) var(--s-3) var(--s-4); align-content: start; }
.event__body b {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 72, "opsz" 30;
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--ink);
}
.event__body span { color: var(--on-paper-soft); font-size: var(--t-sm); }

@media (max-width: 45.99rem) {
  .events { gap: var(--s-2); }
  .event { grid-template-rows: none; grid-template-columns: 7.5rem 1fr; }
  .event__media img { height: 100%; aspect-ratio: auto; min-height: 7.5rem; }
  .event__body { padding: var(--s-2) var(--s-2) var(--s-2) 0; }
  .event__body b { font-size: var(--t-lg); }
}
/* Arriving from the Events menu, the tile you picked lights up in the site's
   own bulb gold, so the jump lands somewhere you can see. */
.events > li:target .event { box-shadow: 0 0 0 3px var(--gold-lit), var(--lift-3); }

@media (min-width: 46rem) { .events { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .events { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

/* ---------- the difference ---------- */
.difference { display: grid; gap: var(--s-5); align-items: start; }
.difference__intro h2 { max-width: 16ch; }
.difference__intro p { max-width: 50ch; }
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.checks li {
  position: relative;
  margin: 0;
  padding: 0.7rem 0.9rem 0.7rem 2.6rem;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--ink);
}
/* A lit bulb as the tick, the same mark the service lists use. */
.checks li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--gold-lit);
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 8px rgba(242, 200, 107, 0.75);
}

@media (min-width: 54rem) {
  .difference { grid-template-columns: 1fr 1.1fr; gap: var(--s-6); }
}

/* ---------- gallery ---------- */
.gallery__filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--ink-3);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.chip:hover { border-color: var(--coral); color: var(--coral-ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip:focus-visible { outline: 3px solid var(--apricot); outline-offset: 2px; }

.gallery {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-1);
}
.gallery li { margin: 0; }
.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
}
/* 13 photographs never fill a grid evenly, so the first is featured and sized to
   make every row full at every column count: 3 across spans 3 (15 cells, five
   full rows), 4 across spans 2x2 (16 cells, four full rows). Filtering changes
   the count, and a filtered view is allowed an uneven last row. */
.gallery li:first-child { grid-column: 1 / -1; }
.gallery li:first-child img { aspect-ratio: 16 / 9; }

@media (min-width: 46rem) { .gallery { gap: var(--s-3); } }
@media (min-width: 68rem) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery li:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery li:first-child img { aspect-ratio: auto; height: 100%; }
}