/* ==========================================================================
   page-works.css
   Mobile-first responsive layout
   base          → structural / shared (no sizing)
   < 640px       → phone (implicit: base only)
   >= 640px (sm) → small tablet
   >= 768px (md) → tablet
   >= 1024px(lg) → desktop
   ========================================================================== */

/* ── Base (structural / shared) ─────────────────────────────────────────── */

/* カテゴリタブ */
.tabs { background: #fff; border: 1px solid var(--theme-color-grey); border-radius: 10px; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.tab { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 800; color: var(--theme-color-blue); background-color: var(--theme-color-skyblue-shallow); transition: .15s; }
.tab:hover { border-color: rgba(11,59,119,.22); color: rgba(11,59,119,1); }
.tab.is-active { background-color: var(--theme-color-orange-shallow); border-color: var(--theme-color-orange-shallow); color: var(--theme-color-orange); }

/* 施工事例 */
.works-list { display: grid; }
.works-image { position: relative; background: url("../img/frame.svg") no-repeat center / 100% 100%; }
.works-photo { width: 100%; height: 100%; }
.works-photo img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-mask-image: url("../img/frame_mask.svg"); mask-image: url("../img/frame_mask.svg"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.works-badge { position: absolute; left: 0px; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; display: flex; align-items: center; justify-content: center; line-height: 1; }
.works-badge--before { background-image: url("../img/material_label_grey.png"); color: #ffffff; }
.works-badge--after { background-image: url("../img/material_label_blue.png"); color: #ffffff; }
.works-info { display: grid; justify-items: start; }
.works-area { display: inline-flex; align-items: center; }
.works-area::before { content: ""; background: url("../img/works_home_icon.png") no-repeat center / contain; flex: 0 0 auto; }
.works-area-text { margin: 0; font-weight: 900; color: var(--theme-color-blue); letter-spacing: .02em; }
.works-summery ul { margin: 0; padding: 0; list-style: none; }
.works-summery li { position: relative; padding-left: 1.2em; }
.works-summery li::before { content: "・"; position: absolute; left: 0; top: 0; }
.works-link { display: inline-flex; align-items: center; justify-content: center; background: var(--theme-color-blue); color: #ffffff; text-decoration: none; border-radius: 10px; font-weight: 900; }
.works-link:hover { opacity: 0.92; }

/* ページネーション */
.pager { display: flex; align-items: center; justify-content: center; }
.pager__num { border-radius: 52% 44% 45% 42%; display: grid; place-items: center; font-weight: 900; background: #809FCC; border: 1px solid #809FCC; text-decoration: none; color: #fff; }
.pager__num.is-active { background: var(--theme-color-blue); border-color: var(--theme-color-blue); color: #fff; }
.pager__next { display: grid; place-items: center; font-weight: 900; color: var(--theme-color-blue); }

/* ── Phone (< 640px implied by base + no overrides) ────────────────────── */

.tabs { padding: 12px; gap: 10px; margin-bottom: 28px; }
.tab { font-size: 14px; padding: 8px 10px; }
.works-inner { padding: 0 12px; }
.works-list { gap: 32px; }
.works-images { display: grid; grid-template-columns: 1fr; grid-template-areas: "area" "before" "after" "summery" "link"; gap: 14px; }
.works-image { width: 100%; aspect-ratio: 4 / 3; }
.works-image--before { grid-area: before; }
.works-image--after { grid-area: after; }
.works-info { display: contents; gap: 21px; }
.works-area { grid-area: area; gap: 8px; }
.works-summery { grid-area: summery; }
.works-link { grid-area: link; min-width: 100%; height: 48px; padding: 0 18px; }
.works-badge { width: 132px; height: 40px; top: 8px; }
.works-area::before { width: 52px; height: 52px; }
.works-area-text { font-size: 18px; }
.pager { margin: 32px 0; gap: 14px; }
.pager__num { width: 56px; height: 52px; }
.pager__next { width: 36px; height: 36px; }

/* ── sm (>= 640px) – small tablet ──────────────────────────────────────── */
@media (width >= 640px) {
  .works-images { grid-template-columns: repeat(2, 1fr); grid-template-areas: none; gap: 20px; }
  .works-image--before { grid-area: auto; }
  .works-image--after { grid-area: auto; }
  .works-info { display: grid; grid-column: 1 / -1; justify-items: center; text-align: center; }
  .works-area { grid-area: auto; }
  .works-summery { grid-area: auto; }
  .works-link { grid-area: auto; min-width: 320px; }
}

/* ── md (>= 768px) – tablet ────────────────────────────────────────────── */
@media (width >= 768px) {
  .tabs { padding: 14px; gap: 12px; margin-bottom: 36px; }
  .tab { font-size: 16px; padding: 8px 12px; }
  .works-inner { max-width: calc(100% - 48px); margin: 0 auto; padding: 0; }
  .works-list { gap: 40px; }
  .works-images { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .works-badge { width: 140px; height: 40px; top: 8px; }
  .works-area::before { width: 56px; height: 56px; }
  .works-area-text { font-size: 20px; }
  .works-link { min-width: 320px; }
  .pager { margin: 32px 0; gap: 18px; }
  .pager__num { width: 64px; height: 56px; font-size: 16px; }
  .pager__next { width: 32px; height: 32px; }
}

/* ── lg (>= 1024px) – desktop ──────────────────────────────────────────── */
@media (width >= 1024px) {
  .tabs { padding: 16px; gap: 16px; margin-bottom: 48px; }
  .tab { font-size: 18px; padding: 8px 12px; }
  .works-inner { max-width: 896px; margin: 0 auto; }
  .works-list { gap: 56px; }
  .works-images { display: grid; grid-template-columns: repeat(2, 1fr) 1fr; gap: 28px; align-items: center; }
  .works-info { grid-column: auto; justify-items: start; text-align: left; gap: 21px; }
  .works-badge { width: 160px; height: 44px; top: 10px; }
  .works-area::before { width: 68px; height: 68px; }
  .works-area-text { font-size: 22px; }
  .works-link { min-width: 260px; height: 48px; padding: 0 18px; }
  .pager { margin: 32px 0; gap: 24px; }
  .pager__num { width: 72px; height: 64px; font-size: inherit; }
  .pager__next { width: 36px; height: 36px; }
}