/* ==========================================================================
   MediWear: News (the news index and each post)
   Loaded only on pages with `styles: news`. Everything here builds on the
   tokens in main.css. Mobile first; motion is transform/opacity only and is
   switched off for visitors who ask for reduced motion.
   ========================================================================== */

/* ---------- Shared: kind label + meta line ---------- */
.post-kind {
  font-family: var(--font-mono); font-weight: 700; font-size: .875rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep);
}
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 0;
  font-size: 1.0625rem; line-height: 1.5; color: var(--muted);
}
.post-meta > * + *::before {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-inline: .8rem;
  border-radius: 50%; background: var(--line-strong); vertical-align: middle; transform: translateY(-1px);
}
.post-meta strong { color: var(--ink); font-weight: 700; }

/* ---------- News index ---------- */
.news { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section); }
.news-list { display: grid; gap: var(--s4); }
.news-list > li { display: grid; container-type: inline-size; }
@media (min-width: 960px) {
  .news-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) clamp(1.25rem, 2.5vw, 2.25rem); }
  .news-list > .news-list__lead { grid-column: 1 / -1; }
  .news-list--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A post card: base surface, lifts to "floating" on hover */
.post-card {
  position: relative; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--sh-1);
}
.post-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: var(--sh-3); opacity: 0; pointer-events: none;
}
.post-card__media {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0;
  background: var(--paper-3);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__media::after { /* warm colour treatment, as .photo--warm */
  content: ''; position: absolute; inset: 0; background: #F2DDB4; mix-blend-mode: multiply; opacity: .14; pointer-events: none;
}
.post-card__body { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.4rem, 3vw, 2rem); }
.post-card__title { font-size: clamp(1.55rem, 1.3rem + .8vw, 1.95rem); line-height: 1.15; }
.post-card__title a { text-decoration: none; }
.post-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-l); }
.post-card__title a:focus-visible { outline: none; }
.post-card:has(.post-card__title a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
.post-card:hover .post-card__title a { text-decoration-line: underline; text-decoration-thickness: 2px; }
.post-card__summary { color: var(--ink-2); }
.post-card__more { margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--ink); }
.post-card .post-meta { font-size: 1rem; }

/* Side by side once the card has room (container query: works in any column) */
@container (min-width: 34rem) {
  .post-card { grid-template-rows: none; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .post-card__media { aspect-ratio: auto; min-height: 15rem; border-radius: calc(var(--r-l) - 1px) 0 0 calc(var(--r-l) - 1px); }
  .post-card__media img { position: absolute; inset: 0; }
  .post-card__body { justify-content: center; }
}
/* The newest post, full width on large screens */
@container (min-width: 56rem) {
  .post-card--lead { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .post-card--lead .post-card__media { min-height: 25rem; }
  .post-card--lead .post-card__body { padding: clamp(2rem, 4vw, 3.5rem); gap: 1rem; }
  .post-card--lead .post-card__title { font-size: clamp(2.1rem, 1.5rem + 1.6vw, 2.9rem); letter-spacing: -0.025em; }
  .post-card--lead .post-card__summary { font-size: 1.25rem; line-height: 1.55; }
}

/* Where to look in each photo when it is cropped */
.focus-top img { object-position: 50% 22%; }
.focus-pendant img { object-position: 50% 45%; }

/* ---------- Post page ---------- */
.post-col { max-width: 50rem; }
.post-head { border-bottom: 0; padding-bottom: 0; }
.post-head .post-kind { display: block; margin-bottom: var(--s2); }
.post-head h1 { font-size: clamp(2.35rem, 1.6rem + 2.7vw, 3.75rem); }
.post-head .lead { max-width: none; }
.post-head .post-meta { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }
@media (max-width: 33.99rem) { /* byline and date on their own lines, no stray separator */
  .post-head .post-meta { flex-direction: column; align-items: flex-start; }
  .post-head .post-meta > * + *::before { display: none; }
}

.post-figure { max-width: 74rem; margin-top: clamp(2rem, 4vw, 3rem); }
.post-figure__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-l); background: var(--paper-3); box-shadow: var(--sh-2); }
.post-figure__frame img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) { .post-figure__frame { aspect-ratio: 16 / 9; } }

.post-body { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section); }
.post .post-body { max-width: 50rem; }
.post-body > :first-child { margin-top: 0; }
.post-body h2:first-child { margin-top: 0; }
.post-body .btn-row { margin-top: var(--s4); }
.post-body .callout { margin-top: var(--s4); }
.post-body .callout + * { margin-top: var(--s4); }
.post-body blockquote { margin-block: var(--s4); }
.post-body blockquote + .quote-source { margin-top: calc(-1 * var(--s3)); font-size: 1rem; color: var(--muted); }
.post-sign { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; }

/* Press citation, set like a cutting from the paper */
.press-cite {
  margin-block: var(--s4); padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-2);
}
.press-cite > * + * { margin-top: .6rem; }
.press-cite__headline { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.25rem + .9vw, 1.95rem); line-height: 1.2; letter-spacing: -0.015em; }
.press-cite__source { color: var(--muted); font-size: 1.0625rem; }
.press-cite .btn-row { margin-top: var(--s3); }
@media (min-width: 640px) { .press-cite { transform: rotate(-.5deg); } }

/* Example engravings (reuses the .plate motif from main.css) */
.eng-samples { display: grid; gap: var(--s4); margin-block: var(--s4); }
@media (min-width: 560px) { .eng-samples { grid-template-columns: 1fr 1fr; gap: var(--s3); } }
.eng-samples .plate { aspect-ratio: 22 / 28; max-width: 17rem; margin-inline: auto; width: 100%; }
.eng-samples .plate__value { font-size: 1.2rem; }
.eng-samples figcaption { text-align: center; }

/* "More from MediWear" */
.more-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: clamp(2rem, 4vw, 3rem); }
.more-head h2 { font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.8rem); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .post-card { transition: transform .45s var(--ease-spring); }
  .post-card::before { transition: opacity .45s var(--ease); }
  .post-card__media img { transition: transform .9s var(--ease); }
  .post-card__more svg { transition: transform .35s var(--ease-spring); }
  @media (hover: hover) {
    .post-card:hover { transform: translateY(-4px); }
    .post-card:hover::before { opacity: 1; }
    .post-card:hover .post-card__media img { transform: scale(1.04); }
    .post-card:hover .post-card__more svg { transform: translateX(4px); }
  }
  .post-card:active { transform: translateY(-1px) scale(.995); transition-duration: .12s; }
}

@media (forced-colors: active) {
  .post-card { border: 2px solid CanvasText; }
}
@media print {
  .more-posts, .post-card::before { display: none; }
}