/* ===== Hero ====================================================
   Reuses .product-hero wholesale (identical content/media width and
   type scale to the Figma frame) — the only page-specific difference is
   a wider breadcrumb separator (46px vs .shared__crumb's 24px default).
   ================================================================ */

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

/* ===== Works list (filter sidebar + card grid) =====
   .works__layout/filters/grid etc. are the shared component (main.css,
   promoted from top.css); only this section's own padding and the
   centered "もっと見る" link are page-specific — TOP's own .works__more
   is right-aligned instead, so it isn't reused here. */

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

@media (min-width: 992px) {
  .works-list {
    padding-block: 80px 88px;
  }

  .works-list .works__grid {
    row-gap: 48px;
  }
}

.works-list__more {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.works-list__more button {
  background: none;
  border: none;
  cursor: pointer;
}

.works-list__empty {
  font-size: 14px;
  color: var(--color-gray-400);
}

@media (min-width: 992px) {
  .works-list__more {
    margin-top: 64px;
  }
}

/* ===== Contact =====
   Promoted to main.css (.contact*) — this section is the same Figma
   component as TOP's Contact section (individual/corporate audience
   split), just with this page's own heading/lede copy and CTAs. */

/* ===== Detail page (works/detail.html) =====
   Figma's root frame for this page sets a cream page background (as
   opposed to works/top.html's white) — scoped to body.work-detail-page
   so it doesn't leak onto the list page that shares this stylesheet. */

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

/* ---- Hero: title + lede/desc/tags on the left, two overlapping photos
   on the right. No SP frame exists for this page (PC-only per Figma), so
   the fixed-position collage only applies at the desktop tier; mobile/
   tablet get a simple stacked fallback. ---- */
.work-detail-hero{
  padding-bottom: 48px;
}

.work-detail-hero:has(+ .work-detail-feature:not([hidden])) {
  padding-bottom: 0;
}

.work-detail-hero__stage {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.work-detail-hero__heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
}

.work-detail-hero__text {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.work-detail-hero__lede {
  font-family: var(--font-sans);
  font-size: 16px;
}

.work-detail-hero__desc {
  font-size: 14px;
  line-height: 1.7;
}

/* `lead-text` is one rich-editor field, but Figma still distinguishes its
   first line (bigger, tight leading — the old .work-detail-hero__lede) from
   the rest (the old .work-detail-hero__desc) — so the first child keeps the
   lede treatment and every child after it gets the desc treatment, rather
   than flattening both into one plain-paragraph style. */
.work-detail-hero__lead-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.work-detail-hero__lead-content > :first-child {
  font-family: var(--font-sans);
  font-size: 16px;
}

.work-detail-hero__lead-content > :not(:first-child) {
  font-size: 14px;
  line-height: 1.7;
}

@media (min-width: 992px) {
  .work-detail-hero__lead-content > :first-child {
    font-size: 18px;
  }

  .work-detail-hero__lead-content > :not(:first-child) {
    font-size: 15px;
  }
}

.work-detail-hero__tags {
  display: flex;
  gap: 8px;
}

/* ---- Hero gallery (Figma 1740:6084) ----
   Main box has a fixed 458:304 aspect ratio; every image is scaled to fit
   inside it (object-fit: contain), so portrait or oddly cropped uploads
   leave empty space rather than being cut off. All images are stacked
   in the box and cross-fade via .is-active (js/works-detail.js advances
   it every 4s). Thumbnails are 5 per row (wrapping if microCMS ever has
   more), cover-cropped, with a 2px gold border on the active one. */

.work-gallery {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.work-gallery__main {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 458 / 304;
  padding: 0;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(51, 51, 51, 0.05);
  cursor: zoom-in;
}

.work-gallery__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.work-gallery__main img.is-active {
  opacity: 1;
}

.work-gallery__main:focus-visible,
.work-gallery__thumb:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.work-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-gallery__thumb {
  width: calc((100% - 4 * 8px) / 5);
  aspect-ratio: 84.4 / 53.14;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.work-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-gallery__thumb.is-active {
  border-color: var(--color-gold);
}

@media (min-width: 992px) {
  .work-detail-hero{
    padding-bottom: 88px;
  }

  .work-detail-hero__stage {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
    height: 413px;
  }

  .work-detail-hero__content {
    flex-shrink: 0;
    width: 444px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
  }

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

  .work-detail-hero__text {
    margin-top: 0;
  }

  .work-detail-hero__lede {
    font-size: 18px;
  }

  .work-detail-hero__desc {
    font-size: 15px;
  }

  /* Figma: 458px gallery at the right of the hero row, beside the text. */
  .work-gallery {
    margin-left: auto;
    flex-shrink: 0;
    width: 458px;
    align-self: center;
  }
}

/* ---- Shared section-title style for this page: gold left border +
   Shippori Mincho, used by インタビュー/エピソード/施工情報/オプション.
   Distinct from the sitewide .section-title (eyebrow-paired, centered
   hierarchy) — this one is a compact inline label over a content block. */

.work-detail-divider-title {
  display: flex;
  align-items: center;
  padding-left: 16px;
  border-left: 1px solid var(--color-gold);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}

@media (min-width: 992px) {
  .work-detail-divider-title {
    font-size: 22px;
  }
}

/* ---- Interview / Episode ---- */

.work-detail-feature {
  padding-block: 48px;
}

.work-detail-feature__row {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.work-detail-feature__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Video + optional 「お話を伺った方」 note (Figma 1740:5805), 16px apart.
   Capped at 800px and centered in its column; the note stays aligned to
   the video's left edge. width:100% is needed because auto inline margins
   on a flex-column item override the default stretch. */
.work-detail-feature__media {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

.work-detail-feature__interviewee {
  font-size: 14px;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .work-detail-feature__interviewee {
    font-size: 15px;
  }
}

.work-detail-feature__video {
  position: relative;
  aspect-ratio: 508 / 323;
  background: var(--color-gray-300);
  border-radius: 4px;
}

.work-detail-feature__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}

.work-detail-episodes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.episode-item {
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--color-gray-300);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.episode-item__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.episode-item__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
}

.episode-item__title {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
}

.episode-item__desc {
  font-size: 14px;
  line-height: 1.7;
}

@media (min-width: 992px) {
  .work-detail-feature {
    padding-block: 56px 88px;
  }

  .work-detail-feature__row {
    flex-direction: row;
    gap: 104px;
  }

  .work-detail-feature__col {
    flex: 1;
    min-width: 0;
  }

  .episode-item__title {
    font-size: 18px;
  }

  .episode-item__desc {
    font-size: 15px;
  }
}

/* `episode` is one rich-editor field — the three hardcoded dot/title/desc
   blocks above (.episode-item) were Figma dummy structure with no schema
   backing, same story as .work-detail-hero__lead-content above. Styled by
   raw tag like .news-detail-content/.column-detail-content. */
.work-detail-episode-content > * {
  margin: 0;
}

/* Each h3+p pair is one "episode" (gold dot + title, dashed rule under the
   paragraph that follows) — matches Figma's per-item rhythm: 24px between
   items, 8px between a title and its own paragraph. */
.work-detail-episode-content h3 {
  position: relative;
  margin-top: 24px;
  padding-left: 22px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 700;
}

.work-detail-episode-content h3:first-child {
  margin-top: 0;
}

.work-detail-episode-content h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  transform: translateY(-50%);
}

.work-detail-episode-content p {
  margin-top: 8px;
  padding-bottom: 24px;
  font-size: 14px;
  line-height: 1.7;
  border-bottom: 1px dashed var(--color-gray-300);
}

@media (min-width: 992px) {
  .work-detail-episode-content h3 {
    font-size: 18px;
  }

  .work-detail-episode-content p {
    font-size: 15px;
  }
}

/* ---- Construction info / Options ---- */

.work-detail-info__row {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.work-detail-info__groups {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.work-detail-info__group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.spec-table__col {
  display: flex;
  flex-direction: column;
}

.spec-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 8px;
  border-bottom: 1px solid var(--color-gray-300);
  font-size: 15px;
}

.spec-row__label {
  font-family: var(--font-sans);
}

.spec-row__value {
  font-family: var(--font-sans);
}

.work-detail-info__footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.work-detail-info__note {
  font-size: 11px;
  line-height: 1.9;
  color: var(--color-gray-400);
}

@media (min-width: 992px) {
  .work-detail-info {
    padding-block: 80px 88px;
  }

  .work-detail-info__row {
    gap: 48px;
  }

  .work-detail-info__groups {
    gap: 72px;
  }

  .work-detail-info__group {
    gap: 40px;
  }

  .spec-table--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  .spec-row {
    flex-direction: row;
    align-items: center;
    gap: 112px;
    padding: 32px 8px;
    font-size: 18px;
  }

  .spec-row__label {
    width: 159px;
    flex-shrink: 0;
  }

  .spec-row__value {
    flex: 1;
    min-width: 0;
  }

  .work-detail-info__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .work-detail-info__note {
    font-size: 12px;
  }
}

/* ---- Related works ----
   Reuses .works__layout/.works__filters-col/.works__results/.works__grid/
   .works__more wholesale (identical fixed-label-col + 2-up card-grid shape
   to the Figma frame) — only the section's own padding and the grid's
   row-gap (48 here vs the shared component's 64) are page-specific, same
   row-gap override works-list already makes above. */

.work-detail-related {
  padding-block: 48px;
}

.work-detail-related .works__grid {
  row-gap: 48px;
}

@media (min-width: 992px) {
  .work-detail-related {
    padding-block: 80px 88px;
  }
}

/* ---- Detail page tablet tier: keep the mobile (stacked) structural
   layout but bump font-size/element sizing up to the PC value (CLAUDE.md
   breakpoint convention) — no official SP frame exists for this page, but
   the same discipline applies to the invented mobile fallback. Placed at
   the end of the file so it wins the cascade over the unconditional base
   rules declared earlier for these same selectors. ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .work-detail-hero__heading {
    font-size: 30px;
  }

  .work-detail-hero__lede {
    font-size: 18px;
  }

  .work-detail-hero__desc {
    font-size: 15px;
  }

  .work-detail-divider-title {
    font-size: 22px;
  }

  .episode-item__title {
    font-size: 18px;
  }

  .episode-item__desc {
    font-size: 15px;
  }

  .spec-row {
    font-size: 18px;
  }

  .work-detail-info__note {
    font-size: 12px;
  }
}