/* ===== Page background =====
   Figma's root frame for this page sets a cream (#F5F3EF) page background
   (unlike column/top.html's white) — scoped per-page, same precedent as
   work-detail.html's body.work-detail-page. */

body.news-page {
  background: var(--color-cream);
}

/* ===== Hero =====
   Reuses .guide-hero wholesale (breadcrumb + intro, no CTA) — same shape
   as column/top.html's hero. Breadcrumb separator is 46px here, matching
   the column/works/sauna-map one-off override precedent. */

.news-hero__crumb-sep {
  width: 46px;
}

@media (min-width: 992px) {
  .news-hero__crumb-sep {
    width: 46px;
  }
}

/* ===== News list =====
   A plain divider list (date + title + "read more" arrow per row) — much
   simpler than column/top.html's card+sidebar layout, so no shared
   component matched closely enough to reuse wholesale. Border pattern
   (top border per row, bottom border closing the list) mirrors
   .faq-item/.faq-item--last in main.css. */

.news-list-section {
  padding-block: 48px 64px;
}

.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 8px;
  border-top: 1px solid var(--color-gray-300);
}

.news-item:last-child {
  border-bottom: 1px solid var(--color-gray-300);
}

.news-item__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.news-item__date {
  width: 68px;
  font-size: 14px;
}

.news-item__title {
  font-size: 15px;
  line-height: 1.8;
}

.news-item__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.news-list__empty {
  padding: 32px 8px;
  font-size: 14px;
  color: var(--color-gray-400);
}

@media (min-width: 992px) {
  .news-list-section {
    padding-block: 24px 104px;
  }

  .news-list {
    max-width: 976px;
    margin-inline: auto;
  }

  .news-item {
    gap: 32px;
  }

  .news-item__content {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .news-item__date {
    flex-shrink: 0;
  }

  .news-item__title {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* =====================================================================
   Detail page (news/detail.html) — second consumer of this file, same
   pattern as column.css serving both top+detail. Header/mobile-menu/
   footer are byte-identical copies of news/top.html's. Page background
   is the same cream as the list page, so body.news-page's declaration
   above is reused verbatim via a second selector rather than duplicated.
   No SP frame exists for this page (PC-only per Figma, same precedent as
   works/detail.html and column/detail.html) — mobile/tablet get a simple
   stacked fallback scaled down from the PC values.
   ===================================================================== */

body.news-detail-page {
  background: var(--color-cream);
}

/* ---- Hero: breadcrumb (reuses .shared__crumb + the 46px
   .news-hero__crumb-sep above) + title/date, then a single large photo —
   both centered to a 976px column, matching .news-list's own content
   width so the list and detail pages share one reading measure.
   .shared__crumb right-aligns at desktop by default (confirmed
   against Figma node 589:8430 — this detail hero keeps that alignment too,
   no override needed here). ---- */

.news-detail-hero {
  position: relative;
  padding-block: 24px 32px;
}

/* `flex: 1 1 auto` on the current-page item used to make it grow and eat all
   leftover space in the flex row, which left the breadcrumb spanning the
   full container width instead of hugging the right edge as a compact
   cluster (and squeezed "トップ"/"お知らせ" into wrapping on narrow
   viewports). Everything else is pinned to its natural size; only the
   current item shrinks/truncates when it's actually too long. */
.news-detail-hero .shared__crumb > * {
  flex-shrink: 0;
}

.news-detail-hero__crumb-current {
  flex-shrink: 1;
  min-width: 0;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-detail-row {
  margin-top: 24px;
  max-width: 976px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-inline: auto;
}

.news-detail-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-gray-300);
}

.news-detail-hero__heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.6;
}

.news-detail-hero__date {
  font-family: var(--font-sans);
  font-size: 14px;
}

.news-detail-hero__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 992px) {
  .news-detail-hero {
    padding-block: 24px 56px;
  }

  .news-detail-row {
    margin-top: 56px;
    gap: 56px;
  }

  .news-detail-hero__intro {
    gap: 24px;
    padding-bottom: 48px;
  }

  .news-detail-hero__heading {
    font-size: 30px;
  }

  .news-detail-hero__date {
    font-size: 15px;
  }

  .news-detail-hero__media {
    aspect-ratio: 976 / 525;
  }
}

/* ---- Article: lead paragraph + rich-text body + back-link, same
   outer gap pattern as .column-detail-article. ---- */

.news-detail-body {
  padding-block: 24px 64px;
}

@media (min-width: 992px) {
  .news-detail-body {
    padding-block: 0 88px;
  }
}

.news-detail-article {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 992px) {
  .news-detail-article {
    gap: 72px;
  }
}

/* ---- Article rich-text body: this is the piece that becomes a microCMS
   WYSIWYG field — styled by raw tag (h2/h3/p/ul/li/figure/figcaption/a)
   rather than per-block classes, so it renders whatever freeform HTML the
   CMS sends without needing bespoke markup per article. ---- */

.news-detail-content {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-black);
}

.news-detail-content > * {
  margin: 0;
}

.news-detail-content > * + * {
  margin-top: 24px;
}

.news-detail-content h2 {
  padding-bottom: 16px;
  font-weight: 500;
  font-size: 18px;
  border-bottom: 1px solid var(--color-gray-300);
}

.news-detail-content h2 + p,
.news-detail-content h2 + ul,
.news-detail-content h2 + ol {
  margin-top: 16px;
}

.news-detail-content h3 {
  padding-left: 16px;
  font-weight: 500;
  font-size: 16px;
  border-left: 1px solid var(--color-gold);
}

.news-detail-content h3 + p,
.news-detail-content h3 + ul,
.news-detail-content h3 + ol {
  margin-top: 12px;
}

.news-detail-content ul {
  padding-left: 20px;
  list-style: disc;
}

.news-detail-content li + li {
  margin-top: 8px;
}

.news-detail-content figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-gray-400);
}

.news-detail-content a {
  text-decoration: underline;
}

.news-detail-content__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 992px) {
  .news-detail-content {
    font-size: 15px;
  }

  .news-detail-content > * + * {
    margin-top: 32px;
  }

  .news-detail-content h2 {
    font-size: 24px;
  }

  .news-detail-content h2 + p,
  .news-detail-content h2 + ul,
  .news-detail-content h2 + ol {
    margin-top: 24px;
  }

  .news-detail-content h3 {
    padding-left: 24px;
    font-size: 20px;
  }

  .news-detail-content h3 + p,
  .news-detail-content h3 + ul,
  .news-detail-content h3 + ol {
    margin-top: 16px;
  }

  .news-detail-content figcaption {
    font-size: 14px;
  }

  .news-detail-content__media {
    aspect-ratio: 758 / 403;
    max-width: 758px;
  }
}

/* ---- Back-to-list link: reuses .link-arrow wholesale, flips the shared
   "more" chevron to point left (same precedent as
   .column-detail-back/.column-pagination__arrow--prev). ---- */

.news-detail-back img {
  transform: scaleX(-1);
}