/**
 * Homepage — Advertex Calligraphy Gallery
 *
 * Loaded only on the front page. Tokens come from style.css.
 */

/* overflow-x: clip must NOT go on .adv-home — it establishes a clipping box
   that swallows the very break-out below, which is why the full-width bands
   rendered with white gutters. It belongs on the document instead. */
html, body { overflow-x: hidden; }

/* Matches Woodmart's header container exactly (--adv-container = 1222px, its
   own site width). Every section on the page now starts on the same vertical
   line as the logo above it. */
.adv-wrap {
  width: min(var(--adv-container), 100% - (var(--adv-gutter) * 2));
  margin-inline: auto;
}

/* Sections were on clamp(3.5rem, 8vw, 7rem) top and bottom — up to 112px of
   dead space each end, which is what made the middle of the page feel empty. */
.adv-home .adv-section { padding-block: clamp(2.75rem, 5vw, 4.5rem); }

/* Woodmart renders page content inside a fixed-width .container, so the
   full-width bands have to break out of it. */
/* Nothing on this page breaks out of the container any more. Every band —
   hero, assurances, gallery, story — starts and stops on the same lines as
   the header above it. The full-bleed rule that used to live here is gone
   deliberately; do not reinstate it without changing the header to match. */

/* Kill the container's own padding around our sections. */
.adv-home { margin-block: calc(var(--adv-gap) * -1); }

/* ============================================================ 1. HERO

   Split, not text-over-image. The artwork is high-contrast gold on black with
   dense calligraphy — no scrim makes white type read cleanly over it, and any
   scrim strong enough to try flattens the piece into mud. Giving the copy its
   own black field solves both: the type is legible, and the art is shown
   whole instead of buried.
   ------------------------------------------------------------------------ */

.adv-hero { padding-block: clamp(1.25rem, 2.5vw, 2rem); }

/* Left image | centre copy | right image, in one contained band.
   The centre is the widest so the type has room to breathe; the sides are
   narrow enough to read as framed pieces rather than competing scenes. */
.adv-hero__banner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr);
  min-height: clamp(360px, 42vw, 520px);
  overflow: hidden;
  border-radius: var(--adv-radius);
  background: var(--adv-paper-deep);
}

.adv-hero__side { margin: 0; overflow: hidden; }

.adv-hero__side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}

/* --- centre panel ------------------------------------------------------ */

.adv-hero__centre {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: #F3EFE9;
}

/* The artwork used as a wash sits far back — it should read as painted
   texture behind the type, never as a picture competing with it. */
.adv-hero__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: saturate(0.55);
  z-index: -1;
}

.adv-hero__centre::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0.25) 100%);
}

.adv-hero__centre-inner {
  text-align: center;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);
  max-width: 34rem;
}

.adv-hero__kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--adv-ink-soft);
  margin-bottom: 0.85rem;
}

.adv-hero__title {
  color: var(--adv-ink);
  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
}

.adv-hero__lede {
  font-size: clamp(0.95rem, 1.15vw, 1.075rem);
  line-height: 1.65;
  color: var(--adv-ink-soft);
  margin: 0 auto 1.75rem;
  max-width: 30rem;
}

/* Underlined text link rather than a filled button — the reference keeps the
   centre panel quiet, and a red block here would overpower it. */
.adv-hero__cta {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--adv-ink);
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--adv-ink);
  transition: color var(--adv-speed) var(--adv-ease),
              border-color var(--adv-speed) var(--adv-ease);
}

.adv-hero__cta:hover { color: var(--adv-red); border-color: var(--adv-red); }

/* --- responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Two panels: one image, the copy. Three columns at this width squeezes
     the centre until the headline breaks badly. */
  .adv-hero__banner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .adv-hero__side--right { display: none; }
}

@media (max-width: 700px) {
  .adv-hero__banner { grid-template-columns: 1fr; min-height: 0; }
  .adv-hero__side--left { height: 200px; }
  .adv-hero__centre-inner { padding-block: clamp(2rem, 7vw, 3rem); }
}

/* ========================================================= 2. BUTTONS */

.adv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2.2em;
  font-family: var(--adv-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--adv-radius);
  border: 1px solid transparent;
  transition: background-color var(--adv-speed) var(--adv-ease),
              color var(--adv-speed) var(--adv-ease),
              border-color var(--adv-speed) var(--adv-ease);
}

.adv-btn--solid {
  background: var(--adv-red);
  border-color: var(--adv-red);
  color: var(--adv-white);
}
.adv-btn--solid:hover { background: var(--adv-red-deep); border-color: var(--adv-red-deep); color: var(--adv-white); }

/* Secondary action on a light ground. */
.adv-btn--outline {
  border-color: var(--adv-ink);
  color: var(--adv-ink);
  background: transparent;
}
.adv-btn--outline:hover { background: var(--adv-ink); border-color: var(--adv-ink); color: var(--adv-white); }

.adv-btn--ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--adv-white);
}
.adv-btn--ghost:hover { background: var(--adv-white); border-color: var(--adv-white); color: var(--adv-ink); }

.adv-btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--adv-white);
  margin-top: 1.5rem;
}
.adv-btn--ghost-light:hover { background: var(--adv-red); border-color: var(--adv-red); color: var(--adv-white); }

/* ====================================================== 3. ASSURANCES */

/* Light band, contained, with hairline rules top and bottom rather than a
   solid black slab. Keeps the page bright and lets the artwork stay the
   darkest thing on screen. */
.adv-strip { padding-block: clamp(1.5rem, 3vw, 2.25rem); }

.adv-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem 2rem;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--adv-line);
  border-bottom: 1px solid var(--adv-line);
}

.adv-strip__grid strong {
  display: block;
  font-family: var(--adv-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--adv-ink);
  margin-bottom: 0.3rem;
}

.adv-strip__grid span {
  font-size: 0.9375rem;
  color: var(--adv-muted);
}

/* ======================================================== 4. SECTIONS */

.adv-section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.adv-section__head h2 { margin: 0; }
.adv-section__head .adv-rule { margin-bottom: 0; }

/* Room links and the shop-all button share one row under the gallery grid. */
.adv-section__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--adv-line);
}

.adv-chips__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adv-muted);
  align-self: center;
  margin-right: 0.25rem;
}

/* ----------------------------------------------------- category tiles */

/* Three columns, not auto-fill: there are six subject tiles, and auto-fill at
   this width lands on four across, orphaning two on a second row with a wide
   gap. Three gives a balanced 3 + 3. */
.adv-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

@media (max-width: 900px) {
  .adv-tiles { grid-template-columns: repeat(2, 1fr); }
}

.adv-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--adv-radius);
  background: var(--adv-paper-deep);
  text-decoration: none;
}

.adv-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--adv-ease);
}

.adv-tile:hover img { transform: scale(1.05); }

.adv-tile__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.25rem 1.25rem;
  background: linear-gradient(to top, rgba(20, 17, 14, 0.9), transparent);
  color: var(--adv-white);
  font-family: var(--adv-font-display);
  font-size: 1.3rem;
  line-height: 1.2;
}

.adv-tile__label em {
  display: block;
  font-family: var(--adv-font-body);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  margin-top: 0.35rem;
}

/* ------------------------------------------------------ product cards */

/* Fixed five, not auto-fill. auto-fill picks its own column count from the
   available width, so the number of products and the number of columns could
   disagree and leave an orphan on a second row. Explicit counts at each
   breakpoint keep the row exact. */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

@media (max-width: 1200px) { .adv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.adv-card { display: block; text-decoration: none; }

.adv-card__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--adv-white);
  border-radius: var(--adv-radius);
  margin-bottom: 1rem;
}

.adv-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--adv-ease);
}

.adv-card:hover .adv-card__media img { transform: scale(1.04); }

.adv-card__title {
  display: block;
  font-family: var(--adv-font-display);
  font-size: 1.075rem;
  line-height: 1.3;
  color: var(--adv-ink);
  margin-bottom: 0.3rem;
}

.adv-card__price {
  display: block;
  font-size: 0.9rem;
  color: var(--adv-ink-soft);
}

.adv-card__price del { opacity: 0.5; margin-right: 0.4em; }

/* -------------------------------------------------------------- chips */

.adv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.adv-chips a {
  display: inline-block;
  padding: 0.7em 1.4em;
  border: 1px solid var(--adv-line);
  border-radius: 999px;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--adv-ink-soft);
  transition: border-color var(--adv-speed) var(--adv-ease),
              color var(--adv-speed) var(--adv-ease),
              background-color var(--adv-speed) var(--adv-ease);
}

.adv-chips a:hover {
  border-color: var(--adv-red);
  background: var(--adv-red);
  color: var(--adv-white);
}

/* -------------------------------------------------------------- story */

/* Contained, like everything else. It was previously full-bleed, so the image
   ran to the viewport edge while the copy sat on the container line — the two
   halves of the same section obeying different rules. */
.adv-story-band { padding-block: clamp(2.5rem, 5vw, 4rem); }

.adv-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--adv-paper-deep);
  border-radius: var(--adv-radius);
  overflow: hidden;
}

/* Capped height. Without a max the image drove the whole band's height from
   its own aspect ratio, so a portrait render made the section fill the
   viewport and the artwork rendered at poster scale. */
.adv-story__art {
  margin: 0;
  overflow: hidden;
  min-height: 340px;
  max-height: 520px;
}

.adv-story__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}

/* Even padding on both sides. padding-left was 0 (the grid gap stood in for
   it), so the copy hugged the left edge of its half while the right side sat
   empty — the block read as a narrow column floating in a wide box. */
.adv-story__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.25rem);
}

/* Ink on paper. These were white — left over from when the band was black,
   which made the body copy invisible against the light background. */
.adv-story h2 { margin: 0 0 1.25rem; color: var(--adv-ink); }

/* No max-width. A 46ch measure is right for a full-width article, but inside
   this half-panel it capped the text well short of the box and left a wide
   dead strip down the right. The panel itself is the measure here. */
.adv-story p { color: var(--adv-ink-soft); margin: 0 0 1.1rem; }
.adv-story p:last-of-type { margin-bottom: 0; }

.adv-story__cta { align-self: flex-start; margin-top: 1.75rem; }

@media (max-width: 900px) {
  .adv-story { grid-template-columns: 1fr; }
  .adv-story__art { min-height: 260px; max-height: 320px; }
  .adv-story__copy { padding-right: clamp(1.5rem, 5vw, 3rem); }
}

/* ==================================================== 5. RESPONSIVE */

@media (max-width: 640px) {
  .adv-hero { min-height: 72vh; }
  .adv-hero__inner { max-width: none; }
  .adv-tiles { grid-template-columns: repeat(2, 1fr); }
  .adv-grid  { grid-template-columns: repeat(2, 1fr); }
  .adv-btn { flex: 1 1 auto; }
}

/* The renders place the artwork slightly above centre, so a plain centre crop
   clips the top of the frame. Biasing upward keeps the piece whole. */
.adv-tile img,
.adv-card__media img { object-position: center 42%; }

@media (prefers-reduced-motion: reduce) {
  .adv-tile:hover img,
  .adv-card:hover .adv-card__media img { transform: none; }
}