/* ---------------------------------------------------------------------------
 * Blog: photographic story cards in a grid or a list
 * ------------------------------------------------------------------------ */

.blog-hero {
  padding-block: var(--s64) var(--s32);
  background: var(--domino-paper);
}
.blog-hero .eyebrow { margin-bottom: var(--s8); }
.blog-hero__title {
  font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05; margin: 0 0 var(--s16);
}
.blog-hero__lede {
  max-width: 46ch; color: var(--domino-muted); font-size: 1.0625rem; line-height: 1.65;
  margin: 0;
}

.blog-body { padding-block: var(--s32) var(--s64); }
.blog-body__intro { max-width: 68ch; margin-bottom: var(--s32); }
.blog-body__intro p { color: var(--domino-muted); line-height: 1.75; }

/* Toolbar ---------------------------------------------------------------- */

.story-toolbar {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s12);
  margin-bottom: var(--s24);
}
.story-toolbar__label {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--domino-muted);
}
.story-toolbar__switcher {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--domino-paper);
  border: 1px solid var(--domino-line);
  border-radius: 999px;
}
.story-toolbar__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  color: var(--domino-muted);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.story-toolbar__btn:hover { color: var(--domino-sea); }
.story-toolbar__btn.is-active { background: var(--domino-sea); color: #fff; }
.story-toolbar__btn:focus-visible { outline: 2px solid var(--domino-gold); outline-offset: 2px; }
.story-toolbar__icon svg { width: 0.9rem; height: 0.9rem; display: block; }

/* Cards ------------------------------------------------------------------ */

.story-grid { display: grid; gap: var(--s24); }
.story-card { min-width: 0; }

.story-card__link {
  position: relative; display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--domino-sea);
  isolation: isolate;
}

.story-card__media {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.story-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.story-card__link:hover .story-card__media img,
.story-card__link:focus-visible .story-card__media img { transform: scale(1.04); }

.story-card__placeholder {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(214, 178, 106, 0.35), transparent 60%),
    linear-gradient(140deg, #123b52, #0a2231);
}

/* Scrim: dark at the bottom so the overlaid title always clears 4.5:1. */
.story-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 22, 33, 0.88) 0%,
    rgba(6, 22, 33, 0.55) 32%,
    rgba(6, 22, 33, 0.05) 62%,
    rgba(6, 22, 33, 0) 100%
  );
}

.story-card__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 0.35rem;
  padding: var(--s24) var(--s16) var(--s16);
}
.story-card__category {
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--domino-gold); font-weight: 600;
}
.story-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.18; color: #fff;
  text-wrap: balance;
}
.story-card__date {
  font-size: 0.8125rem; color: rgba(255, 255, 255, 0.76);
}

.story-card__link:focus-visible {
  outline: 3px solid var(--domino-gold); outline-offset: 3px;
}

/* Grid layout ------------------------------------------------------------ */

.story-grid[data-layout="grid"] { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .story-grid[data-layout="grid"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .story-grid[data-layout="grid"] { grid-template-columns: repeat(3, 1fr); gap: var(--s32); }
  /* First card leads — but only when there are enough stories to fill the row
   * it spans; with two or three posts the hole would be more noticeable than
   * the emphasis is worth. */
  .story-grid[data-layout="grid"]:has(> .story-card:nth-child(4)) > .story-card:first-child { grid-column: span 2; }
  .story-grid[data-layout="grid"]:has(> .story-card:nth-child(4)) > .story-card:first-child .story-card__media { aspect-ratio: 16 / 9; }
  .story-grid[data-layout="grid"]:has(> .story-card:nth-child(4)) > .story-card:first-child .story-card__title { font-size: clamp(1.65rem, 3vw, 2.25rem); }
}

/* List layout ------------------------------------------------------------ */

.story-grid[data-layout="list"] { grid-template-columns: 1fr; gap: var(--s16); }

.story-grid[data-layout="list"] .story-card__media { aspect-ratio: 16 / 7; }

@media (min-width: 48rem) {
  .story-grid[data-layout="list"] .story-card__link {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
  }
  .story-grid[data-layout="list"] .story-card__media {
    aspect-ratio: 16 / 10; height: auto; min-height: 0;
  }
  .story-grid[data-layout="list"] .story-card__scrim { display: none; }
  .story-grid[data-layout="list"] .story-card__body {
    position: static;
    align-content: center;
    padding: var(--s32);
    background: var(--domino-sea);
  }
  .story-grid[data-layout="list"] .story-card__title { font-size: clamp(1.35rem, 2vw, 1.85rem); }
}

/* Empty state + pagination ----------------------------------------------- */

.story-empty {
  padding: var(--s48) 0; text-align: center;
  color: var(--domino-muted); font-size: 1.0625rem;
}

.story-pagination { margin-top: var(--s32); }
.story-pagination ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--s8); justify-content: center;
}
.story-pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 var(--s8);
  border: 1px solid var(--domino-line); border-radius: 999px;
  color: var(--domino-sea); text-decoration: none; font-size: 0.875rem;
}
.story-pagination .page-numbers:hover { background: var(--domino-paper); }
.story-pagination .page-numbers.current {
  background: var(--domino-sea); color: #fff; border-color: var(--domino-sea);
}
.story-pagination .page-numbers.dots { border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .story-card__media img { transition: none; }
  .story-card__link:hover .story-card__media img { transform: none; }
}