/*
 * The home page: the hero and the album row. Every word comes from the Home
 * page's fields; this file only places them.
 */

/* The opening banner is the photograph or video alone, edge to edge and
   (100svh minus the header) tall — nothing is laid over it. The page's
   <h1> is in the markup for search engines and screen readers only.
   `svh` (not `vh`) so a phone's browser chrome sliding in and out does not
   resize the section. Height and crop are set per breakpoint from wp-admin. */
.shayna-hero {
  position: relative;
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  min-block-size: calc((100svh - var(--header-h) - var(--admin-bar-h, 0px)) * var(--hero-h, 1));
  overflow: hidden;
}

.shayna-hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.shayna-hero__img,
.shayna-hero__weave {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, center);
}

.shayna-hero__weave {
  background: repeating-linear-gradient(35deg,
    color-mix(in srgb, var(--c-sand) 70%, var(--c-paper)) 0 2px,
    color-mix(in srgb, var(--c-sand) 40%, var(--c-paper)) 2px 4px);
}

@media (max-width: 60rem) {
  .shayna-hero {
    min-block-size: calc((100svh - var(--header-h) - var(--admin-bar-h, 0px)) * var(--hero-h-m, var(--hero-h, 1)));
  }

  .shayna-hero__img {
    object-position: var(--hero-focus-m, var(--hero-focus, center));
  }
}

/* ---------- The album row (kept for a page that still uses it; the home
   page itself no longer does — see .shayna-links below) ---------- */

.shayna-rail {
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 var(--gutter) var(--band-gap);
}

.shayna-rail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.shayna-rail__head h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
}

/* A standalone link (not running text) is a tap target: 44px, per the
   brief. Found failing at 31px — pre-dates the Liquid Glass pass, fixed here. */
.shayna-rail__head a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
}

.shayna-rail__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14rem, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0 0 var(--space-3);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.shayna-rail__item {
  scroll-snap-align: start;
}

.shayna-rail__item a {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.shayna-rail__item a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.shayna-rail__item .shayna-swatch-photo figcaption {
  display: none; /* the album says it once; a row of cards need not repeat it eight times */
}

.shayna-rail__name {
  font-weight: var(--fw-medium);
}

.shayna-closing {
  max-inline-size: calc(var(--container-narrow) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) var(--band-gap);
  font-size: var(--fs-h3);
  text-align: center;
  text-wrap: balance;
}

/* ---------- Two entry cards: fabrics / about ---------- */

.shayna-links {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 var(--gutter) var(--band-gap);
}

.shayna-links__card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  color: var(--color-text);
  text-decoration: none;
}

.shayna-links__eyebrow {
  font-size: var(--fs-sm);
  color: var(--color-accent);
}

:lang(en) .shayna-links__eyebrow {
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.shayna-links__heading {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
}

.shayna-links__text {
  margin: 0;
  color: var(--color-text-dim);
}

.shayna-links__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  border-bottom: 1px solid currentColor;
  width: fit-content;
}

.shayna-links__card:hover .shayna-links__label {
  color: var(--color-accent);
}

/* A hairline between the two cards — a divider inside a band, not a border
   between bands (the site's own grammar rule). */
.shayna-links__divider {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 1px;
  background: var(--color-rule);
}

@media (max-width: 60rem) {
  .shayna-links {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .shayna-links__divider {
    display: none;
  }
}

/* ---------- The closing "let's talk" band ---------- */

.shayna-cta {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: center;
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-7) var(--gutter);
  background: var(--c-sand);
  border-radius: var(--radius-lg);
}

.shayna-cta__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}

:lang(en) .shayna-cta__eyebrow {
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.shayna-cta__heading {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

.shayna-cta__action {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.shayna-cta__text {
  margin: 0;
}

/* A standalone link (not running text) is a tap target: 44px — the same
   fix .shayna-rail__head a already carries, needed again here because
   .shayna-link's own rule is sized for an editorial link inside a
   paragraph, not a link that is the whole paragraph. */
.shayna-cta .shayna-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: inherit;
}

@media (max-width: 60rem) {
  .shayna-cta {
    grid-template-columns: 1fr;
    padding: var(--space-6) var(--gutter);
  }
}