/*
 * page-case.css — Responsive structure
 *
 * Base        : structural / shared (colors, borders, display, position, etc.)
 * < 640px     : phone
 * >= 640px    : sm — small tablet (phone + minor upgrades)
 * >= 768px    : md — tablet (overrides sm mobile values)
 * >= 1024px   : lg — desktop (full desktop sizing)
 */

/* ===== Base (structural / shared — no sizing) ===== */
.case__inner { background: #ffffff; border: 1px solid var(--theme-color-grey); }
.case-head { display: flex; align-items: center; justify-content: center; }
.case-head__icon-img { display: block; }
.case-head__title { margin: 0; font-weight: 900; color: var(--theme-color-blue); letter-spacing: .02em; }
.case-ba { display: grid; align-items: start; }
.case-ba__item { margin: 0; }
.case-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; background: url("../img/frame.svg") no-repeat center / 100% 100%; }
.case-frame > 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; }
.case-photo { width: 100%; height: 100%; object-fit: cover; display: block; mask-image: url("../img/frame_mask.svg"); mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
.case-badge { position: absolute; left: 0; top: 8px; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; display: flex; align-items: center; justify-content: center; line-height: 1; }
.case-badge--before { background-image: url("../img/material_label_grey.png"); color: #ffffff; }
.case-badge--after { background-image: url("../img/material_label_blue.png"); color: #ffffff; }
.case-title { text-align: center; font-weight: 900; color: var(--theme-color-blue); letter-spacing: .04em; }
.case-gallery { display: grid; align-items: center; }
.case-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--theme-color-grey); }
.case-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-thumb--empty { display: flex; align-items: center; justify-content: center; background-color: #dfdfdf; }
.case-lead { color: #000; }
.case-table { overflow: hidden; border: 1px solid var(--theme-color-grey); }
.case-table__row { display: grid; }
.case-table__th { background: var(--theme-color-skyblue); color: var(--theme-color-blue); font-weight: 900; border-bottom: 1px solid var(--theme-color-grey); }
.case-table__td { background: var(--theme-color-skyblue-shallow); color: #000; border-bottom: 1px solid var(--theme-color-grey); }
.case-table__row:last-child .case-table__th { border-bottom: 0; }
.case-table__row:last-child .case-table__td { border-bottom: 0; }
.case-message { color: #000; }

/* ===== Phone (< 640px) ===== */
@media (width < 640px) {
  .case-section { margin: 48px auto; }
  .case__inner { padding: 28px 14px; border-radius: 16px; }
  .case-head { gap: 12px; margin: 0 0 16px; }
  .case-head__icon-img { width: 24px; height: 24px; }
  .case-head__title { font-size: 20px; }
  .case-ba { grid-template-columns: 1fr; gap: 18px; }
  .case-badge { width: 132px; height: 40px; }
  .case-title { margin: 28px 0 12px; font-size: 18px; }
  .case-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 10px 0 6px; }
  .case-thumb { border-radius: 10px; }
  .case-thumb--empty i { font-size: 52px; }
  .case-lead { margin: 10px 0 14px; font-size: 14px; line-height: 1.9; }
  .case-message { margin: 14px 0 0; font-size: 14px; line-height: 1.95; }
  .case-table__row { grid-template-columns: 1fr; }
  .case-table { border-radius: 10px; }
  .case-table__th { border-right: 0; padding: 14px 16px; }
  .case-table__td { padding: 14px 16px; }
}

/* ===== sm — small tablet (>= 640px) ===== */
@media (width >= 640px) {
  .case-section { margin: 48px auto; }
  .case__inner { padding: 28px 14px; border-radius: 16px; }
  .case-head { gap: 12px; margin: 0 0 16px; }
  .case-head__icon-img { width: 24px; height: 24px; }
  .case-head__title { font-size: 20px; }
  .case-ba { grid-template-columns: 1fr 1fr; gap: 18px; }
  .case-badge { width: 132px; height: 40px; }
  .case-title { margin: 28px 0 12px; font-size: 18px; }
  .case-gallery { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 6px; }
  .case-thumb { border-radius: 10px; }
  .case-thumb--empty i { font-size: 52px; }
  .case-lead { margin: 10px 0 14px; font-size: 14px; line-height: 1.9; }
  .case-message { margin: 14px 0 0; font-size: 14px; line-height: 1.95; }
  .case-table__row { grid-template-columns: 1fr; }
  .case-table { border-radius: 10px; }
  .case-table__th { border-right: 0; padding: 14px 16px; }
  .case-table__td { padding: 14px 16px; }
}

/* ===== md — tablet (>= 768px) ===== */
@media (width >= 768px) {
  .case-section { margin: 56px auto; }
  .case__inner { max-width: calc(100% - 48px); padding: 48px 32px; border-radius: 18px; }
  .case-head { gap: 16px; margin: 0 0 22px; }
  .case-head__icon-img { width: 30px; height: 30px; }
  .case-head__title { font-size: 24px; }
  .case-ba { grid-template-columns: 1fr 1fr; gap: 24px; }
  .case-badge { width: 140px; height: 40px; }
  .case-title { margin: 36px 0 12px; font-size: 20px; }
  .case-gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 6px; }
  .case-thumb { border-radius: 12px; }
  .case-thumb--empty i { font-size: 60px; }
  .case-lead { margin: 12px 0 18px; font-size: 15px; line-height: 1.95; }
  .case-message { margin: 14px 0 0; font-size: 15px; line-height: 2.0; }
  .case-table__row { grid-template-columns: 200px 1fr; }
  .case-table { border-radius: 10px; }
  .case-table__th { border-right: 1px solid var(--theme-color-grey); padding: 12px 14px; }
  .case-table__td { padding: 12px 14px; }
}

/* ===== lg — desktop (>= 1024px) ===== */
@media (width >= 1024px) {
  .case-section { margin: 72px auto; }
  .case__inner { max-width: 980px; margin: 0 auto; padding: 64px; border-radius: 18px; }
  .case-head { gap: 16px; margin: 0 0 22px; }
  .case-head__icon-img { width: 30px; height: 30px; }
  .case-head__title { font-size: 26px; }
  .case-ba { grid-template-columns: 1fr 1fr; gap: 36px; }
  .case-badge { width: 160px; height: 44px; }
  .case-title { margin: 48px 0 14px; font-size: 24px; }
  .case-gallery { grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 10px 0 6px; }
  .case-thumb { border-radius: 12px; }
  .case-thumb--empty i { font-size: 72px; }
  .case-lead { margin: 12px 0 18px; font-size: 15px; line-height: 2.0; }
  .case-message { margin: 14px 0 0; font-size: 15px; line-height: 2.05; }
  .case-table__row { grid-template-columns: 240px 1fr; }
  .case-table { border-radius: 10px; }
  .case-table__th { padding: 14px 16px; }
  .case-table__td { padding: 14px 16px; }
}