/* page-materials.php + page-materials-download.php — both templates render
   the same 原料一覧 components (see inc/materials.php), so they share this
   one stylesheet. Loaded only on those two templates. */

/* ---------- Materials page: partner cards ---------- */
.partner-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
@media (max-width: 700px) { .partner-grid { grid-template-columns: 1fr; } }
.partner-card {
  display: block;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 32px;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.partner-card:hover {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  box-shadow: 0 10px 24px rgba(84,71,38,0.12);
  transform: translateY(-2px);
}
.partner-thumb { aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 20px; }
.partner-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-mark { margin: 0 0 12px; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.03em; color: var(--navy); }
.partner-type { margin: 0 0 12px; font-size: 0.8rem; color: var(--amber); font-weight: 700; letter-spacing: 0.02em; }
.partner-desc { margin: 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.8; }

/* ---------- Materials page: material list ---------- */
.material-cat-title { margin: 0 0 16px; font-size: 1rem; padding-top: 4px; scroll-margin-top: 90px; }
.material-subgroup-title { margin: 0 0 14px; font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.02em; padding-top: 4px; scroll-margin-top: 90px; }
.material-jump-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.material-jump-nav a { font-size: 0.8rem; padding: 7px 14px; }
@media (max-width: 700px) { .material-jump-nav a { font-size: 0.88rem; padding: 8px 14px; } }
.category-banner { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 21/6; margin-bottom: 24px; }
.category-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .category-banner { aspect-ratio: 16/9; } }
.material-grid { margin-bottom: 40px; }
/* Materials page cards: plain .grid-3 (page-materials.php's container class
   is "grid-3 material-grid") — 3-up on desktop, 2-up at tablet widths, 1-up
   on phones, entirely from the shared .grid-3 utility's own breakpoints. No
   .material-grid-specific override needed any more (this used to be
   .grid-4, 2-up-on-phone via a compound-selector override here — removed
   along with that override when the column count changed, since plain
   .grid-3's own single-column mobile behavior is exactly what's wanted now). */
/* One flat rectangle — image, name, a flexible gap, then MORE — instead of
   the two-box "white photo frame + beige text panel" look this replaced.
   The card itself is the only visual container; nothing inside it gets its
   own background/border, so image, name and button read as one piece. */
.material-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
/* height:100% so it fills the row height the grid's own align-items:stretch
   already gives every card (equal to the tallest card in that row) —
   .material-more's margin-top:auto below then anchors the button to the
   card's bottom edge, keeping every card's button on the same line
   regardless of how many lines its own title wraps to. all:unset (needed to
   strip the native <button> chrome for the detail-modal variant) also wipes
   every .material-card rule above for button.material-card specifically, so
   they're re-declared here. */
button.material-card { all: unset; display: flex; flex-direction: column; height: 100%; width: 100%; cursor: pointer; box-sizing: border-box; padding: 20px; background: var(--bg-raised); border: 1px solid var(--line); }
/* .material-photo — a fixed-ratio box so every card reserves the same image
   area regardless of the source photo's own shape, with object-fit:contain
   (not cover) so product-box photos and lab photos alike show whole and
   unstretched instead of being cropped to fill it. The gradient placeholder
   (no <img>, just --t1/--t2 set inline — see wellnesslab_material_card() in
   inc/materials.php) paints directly on this same box via the background
   rule below, so photo and placeholder cards share one identical frame. */
.material-photo {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--t1, transparent), var(--t2, transparent));
}
.material-photo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* .material-name — centered, ink-coloured title (no accent colour, no boxed
   background) with the 【区分】 tag folded into the same line (see
   wellnesslab_material_card()). line-height reset: this h5 otherwise
   inherits body's loose 1.85 (tuned for paragraph copy, not a compact card
   title). min-height reserves exactly 2 lines at this line-height (1.4 × 2 =
   2.8em) so short and long titles still land the MORE button below at the
   same baseline across a row, entirely via layout rather than a fixed
   margin. */
.material-name { margin: 0 0 28px; font-size: 0.94rem; font-weight: 600; line-height: 1.4; min-height: 2.8em; color: var(--ink); text-align: center; }
.material-name .material-cat { font-weight: 500; color: var(--ink-soft); }
/* Quiet outline CTA — hairline border, no fill, no heavy corner radius.
   margin-top:auto is what pushes it down to the card's bottom edge and
   creates the large name-to-button gap the layout calls for, entirely from
   .material-card's own flex-column height rather than a fixed margin, so it
   still lands in the same place regardless of how tall the row is. */
.material-more {
  display: block;
  margin-top: auto;
  padding: 9px 0;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  border: 1px solid var(--line);
  background: transparent;
  transition: border-color .2s ease, color .2s ease;
}
.material-card:hover .material-more { border-color: var(--navy); color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .material-more { transition: none; } }

/* 取扱原料一覧 as a direct download list (page-materials-download.php) —
   same wellnesslab_get_material_detail() lookup as .material-card above,
   but skips the detail-modal step entirely: each row lists the material's
   name plus a .btn-download-link (styling shared with the modal's own
   downloads table below) for every PDF it actually has, so a visitor can
   download straight from this page. wellnesslab_material_download_row() in
   inc/materials.php already omits any file type a material doesn't have,
   so .material-download-links only ever renders the ones that exist. */
.material-download-list { margin-bottom: 32px; }
.material-download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.material-download-list > .material-download-row:last-child { border-bottom: 1px solid var(--line); }
.material-download-name { margin: 0; font-size: 0.92rem; }
.material-download-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
@media (max-width: 480px) {
  .material-download-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .material-download-name { font-size: 0.88rem; }
  .material-download-links { gap: 8px 16px; }
}

/* ---------- Material detail modal (page-materials.php) ---------- */
body.modal-open { overflow: hidden; }
.material-modal-overlay {
  position: fixed; inset: 0; background: rgba(30,26,20,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 200;
}
.material-modal-overlay[hidden] { display: none; }
.material-modal {
  background: var(--bg-raised); border-radius: var(--radius);
  max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 32px; position: relative; box-shadow: 0 20px 60px rgba(20,15,10,0.3);
}
.material-modal-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border-radius: 50%; border: none; background: var(--bg); color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.material-modal-close:hover { background: var(--line); }
.material-modal-img { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 18px; aspect-ratio: 3/2; }
.material-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.material-modal-body h3 { margin: 0 0 18px; font-size: 1.2rem; padding-right: 30px; }
.material-modal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.material-modal-table th { text-align: left; color: var(--ink-soft); font-weight: 600; padding: 10px 12px 10px 0; width: 30%; vertical-align: top; border-top: 1px solid var(--line); }
.material-modal-table td { padding: 10px 0; border-top: 1px solid var(--line); line-height: 1.7; }
.material-modal-downloads-table { margin-top: 22px; }
.material-modal-downloads-table td { padding: 10px 0; }
.btn-download-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--amber); font-weight: 700; font-size: 0.88rem;
  text-decoration: none;
}
.btn-download-link:hover { text-decoration: underline; }
.btn-download-link svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 600px) {
  .material-modal { padding: 24px 20px; }
  .material-modal-table th { width: 38%; }
}