/* Phase 1 elevation — Magazine surfaces (Site UI Elevation §10)
 *
 * Applies to every magazine page (homepage, archive, article reader,
 * photo essay reader, contributor profile, geographic browse, magazine
 * search) since pageRenderer.service.js is centralized.
 *
 * Layered ON TOP of magazine.css + magazine-s31.css. Targets the .mz-*
 * class vocabulary used by the magazine SPA shell. The magazine is a
 * publication, not a blog: this file refines typography rhythm, photo
 * presentation, and the editorial moments (pull quote, byline, section
 * break) so each article reads as a piece of editorial.
 */

/* ────────────────────────────────────────────────────────────────────────
 * Magazine cover / homepage card treatment
 * ──────────────────────────────────────────────────────────────────────── */

.mz-card-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.mz-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out),
              filter var(--duration-slower) var(--ease-out);
}

.mz-card:hover .mz-card-cover img {
  transform: scale(1.03);
  filter: brightness(1.04);
}

.mz-card-cat {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-sm);
}

.mz-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(var(--size-lg), 2.5vw, var(--size-2xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0 0 var(--space-md);
}

.mz-card-excerpt {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--size-md);
  line-height: var(--leading-snug);
  color: var(--text-mid);
  margin: 0 0 var(--space-md);
  max-width: 36ch;
}

.mz-card-byline {
  font-family: var(--font-ui-sans);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}

/* Featured cover story — bigger treatment */
.mz-card[data-featured='true'] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .mz-card[data-featured='true'] {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-3xl);
    align-items: center;
  }
}

.mz-card[data-featured='true'] .mz-card-cover {
  aspect-ratio: 21 / 9;
}

.mz-card[data-featured='true'] .mz-card-title {
  font-size: clamp(var(--size-2xl), 5vw, var(--size-4xl));
  max-width: 18ch;
}

/* ────────────────────────────────────────────────────────────────────────
 * Article reader — display title, byline, dek
 * ──────────────────────────────────────────────────────────────────────── */

.mz-article {
  background: var(--black);
  color: var(--text);
}

.mz-article header,
.mz-article .mz-article-header {
  text-align: center;
  padding: clamp(var(--space-3xl), 10vw, var(--space-5xl)) clamp(var(--space-md), 6vw, var(--space-3xl)) clamp(var(--space-2xl), 6vw, var(--space-3xl));
  max-width: var(--max-content-narrow);
  margin: 0 auto;
}

.mz-article h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(var(--size-3xl), 6vw, var(--size-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text);
  margin: 0 0 var(--space-lg);
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.mz-article .mz-dek,
.mz-article .mz-article-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(var(--size-md), 2.2vw, var(--size-xl));
  line-height: var(--leading-snug);
  color: var(--text-mid);
  margin: 0 auto var(--space-xl);
  max-width: 36ch;
}

/* Byline */
.mz-byline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

.mz-byline-name {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
  text-decoration: none;
}

.mz-byline-name::before {
  content: 'By ';
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-mid);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
}

.mz-byline-role {
  font-family: var(--font-ui-sans);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
}

/* ────────────────────────────────────────────────────────────────────────
 * Article body — block-by-block rhythm
 * ──────────────────────────────────────────────────────────────────────── */

.mz-blocks {
  max-width: var(--max-content-narrow);
  margin: 0 auto;
  padding: 0 clamp(var(--space-md), 4vw, var(--space-xl));
}

.mz-block {
  margin: 0;
}

.mz-block + .mz-block {
  margin-top: var(--space-xl);
}

.mz-block-paragraph {
  font-family: var(--font-ui-sans);
  font-size: clamp(var(--size-base), 1.4vw, var(--size-md));
  line-height: var(--leading-loose);
  color: var(--text);
  margin: 0;
}

/* First paragraph drop-cap moment for feature articles */
.mz-block-paragraph.is-lead::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em 0 -0.04em;
  color: var(--gold);
}

/* Section heading inside an article */
.mz-block-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(var(--size-xl), 3vw, var(--size-2xl));
  line-height: var(--leading-snug);
  color: var(--text);
  margin-top: var(--space-2xl);
}

/* Pull quote — gold rule above and below, italic centered */
.mz-block-pull-quote,
.mz-pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(var(--size-lg), 2.5vw, var(--size-2xl));
  line-height: var(--leading-snug);
  color: var(--text);
  text-align: center;
  max-width: 36ch;
  margin: var(--space-3xl) auto;
  padding: var(--space-xl) 0;
  position: relative;
}

.mz-block-pull-quote::before,
.mz-block-pull-quote::after,
.mz-pull-quote::before,
.mz-pull-quote::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto;
  opacity: 0.7;
}

.mz-block-pull-quote::before,
.mz-pull-quote::before { margin-bottom: var(--space-xl); }
.mz-block-pull-quote::after,
.mz-pull-quote::after  { margin-top: var(--space-xl); }

/* Block quote — italic with gold left rule */
.mz-block-block-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-md);
  line-height: var(--leading-relaxed);
  color: var(--text);
  margin: var(--space-2xl) 0;
  padding-left: var(--space-lg);
  border-left: 2px solid var(--gold);
}

/* Section break — ornament centered */
.mz-block-section-break {
  text-align: center;
  margin: var(--space-3xl) auto;
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-lg);
  letter-spacing: 0.4em;
}

.mz-block-section-break::before {
  content: '✦';
}

.mz-block-section-break > * {
  display: none; /* Hide any default content; ornament speaks for itself */
}

/* ────────────────────────────────────────────────────────────────────────
 * Photography blocks
 * ──────────────────────────────────────────────────────────────────────── */

.mz-block-photo {
  margin: var(--space-2xl) 0;
}

.mz-block-photo--bleed,
.mz-block-photo[data-bleed='true'] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: none;
}

.mz-block-photo img,
.mz-essay-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: var(--ink);
}

.mz-caption,
.mz-block-photo figcaption {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--text-mid);
  text-align: center;
  padding: 0 var(--space-md);
  max-width: var(--max-content-narrow);
  margin-left: auto;
  margin-right: auto;
}

.mz-credit {
  font-family: var(--font-ui-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--space-xs);
  display: block;
}

/* Photo essay sequence and grid */
.mz-block-photo-essay,
.mz-block-photo-grid {
  margin: var(--space-3xl) 0;
}

.mz-block-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .mz-block-photo-grid {
    grid-template-columns: 1fr;
  }
}

/* ────────────────────────────────────────────────────────────────────────
 * Contributor profile page
 * ──────────────────────────────────────────────────────────────────────── */

.mz-contributor-page {
  background: var(--black);
  color: var(--text);
  padding: clamp(var(--space-3xl), 8vw, var(--space-5xl)) clamp(var(--space-md), 6vw, var(--space-3xl));
}

.mz-contributor-header {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--max-content);
  margin: 0 auto var(--space-3xl);
}

@media (min-width: 768px) {
  .mz-contributor-header {
    grid-template-columns: 240px 1fr;
    gap: var(--space-3xl);
  }
}

.mz-contributor-portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-full);
  background: var(--card);
  max-width: 240px;
}

.mz-contributor-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(var(--size-2xl), 4vw, var(--size-4xl));
  line-height: var(--leading-tight);
  color: var(--text);
  margin: 0 0 var(--space-sm);
}

.mz-contributor-role {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-md);
}

.mz-contributor-bio {
  font-family: var(--font-ui-sans);
  font-size: var(--size-md);
  line-height: var(--leading-loose);
  color: var(--text);
  max-width: 60ch;
}

/* ────────────────────────────────────────────────────────────────────────
 * Archive grid
 * ──────────────────────────────────────────────────────────────────────── */

.mz-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-2xl);
  padding: clamp(var(--space-2xl), 6vw, var(--space-3xl)) clamp(var(--space-md), 4vw, var(--space-xl));
  max-width: var(--max-content);
  margin: 0 auto;
}

/* ────────────────────────────────────────────────────────────────────────
 * Magazine bars (platform + magazine nav) — Cormorant masthead
 * ──────────────────────────────────────────────────────────────────────── */

.mz-magazine-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--size-md);
  letter-spacing: var(--tracking-tight);
  color: var(--gold);
  text-decoration: none;
}

.mz-magazine-nav a,
.mz-platform-nav a {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
  text-decoration: none;
  position: relative;
  padding: var(--space-xs) 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.mz-magazine-nav a::after,
.mz-platform-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.mz-magazine-nav a:hover,
.mz-platform-nav a:hover {
  color: var(--gold);
}

.mz-magazine-nav a:hover::after,
.mz-platform-nav a:hover::after {
  transform: scaleX(1);
}