/*
 * Phase 10.2b Step 4 — /items/ purchase item hub (Design v3.2).
 * Loaded only on the purchase_item archive; every rule is scoped to .nessie-items-hub.
 * Tokens come from tokens.css. Breakpoints: SP <= 767, tablet 768–1199, PC >= 1200.
 */

.nessie-items-hub { color: var(--nessie-ink); }
.nessie-items-hub .nessie-eyebrow { margin: 0 0 10px; color: var(--nessie-muted); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; line-height: 1.6; }
.nessie-items-hub :is(h1, h2) { color: var(--nessie-navy); line-break: strict; word-break: auto-phrase; text-wrap: balance; }
.nessie-items-hub p { margin: 0; line-break: strict; }
.nessie-items-hub__phrase { display: inline-block; } /* Keep Japanese phrases together when a heading wraps. */
.nessie-items-hub__breadcrumb { padding-top: 16px; }
.nessie-items-hub__breadcrumb .nessie-breadcrumb { margin-bottom: 16px; color: var(--nessie-muted); }
.nessie-items-hub__breadcrumb .nessie-breadcrumb ol { margin: 0; }
.nessie-items-hub__main:focus { outline: none; }

/* ---------- Hero ---------- */
.nessie-items-hub__hero { position: relative; overflow: hidden; background: var(--nessie-off-white); }
.nessie-items-hub__hero::after { position: absolute; right: -2%; bottom: -36px; width: 42%; height: 120px; background: url('../images/patterns/waterline-light.svg') no-repeat center / contain; content: ''; opacity: var(--nessie-pattern-light-opacity); pointer-events: none; }
.nessie-items-hub__hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: end; padding-block: 72px 80px; }
.nessie-items-hub__hero-copy .nessie-eyebrow { margin-bottom: 20px; }
.nessie-items-hub__hero h1 { margin: 0; font-size: 64px; font-weight: 600; line-height: 1.2; letter-spacing: -2px; }
.nessie-items-hub .nessie-items-hub__catch { margin-top: 24px; color: var(--nessie-action-red); font-family: var(--nessie-font-heading); font-size: 28px; font-weight: 600; line-height: 1.4; }
.nessie-items-hub .nessie-items-hub__lead { margin-top: 16px; max-width: 640px; color: var(--nessie-navy); font-size: 17px; line-height: 1.9; }
.nessie-items-hub__hero-actions .nessie-button { width: 100%; min-height: var(--nessie-layout-hero-primary-height-pc); font-size: var(--nessie-type-hero-primary-pc); }
.nessie-items-hub__phone { display: flex; align-items: baseline; justify-content: center; gap: 16px; margin-top: 12px; color: var(--nessie-navy); text-decoration: none; white-space: nowrap; }
.nessie-items-hub__phone span { color: var(--nessie-muted); font-size: 12px; }
.nessie-items-hub__phone strong { font-size: 24px; font-weight: 600; letter-spacing: .02em; }

/* ---------- Trust band (TOP trust-band grammar) ---------- */
.nessie-items-hub__trust { padding: 26px 0; background: var(--nessie-navy); color: var(--nessie-white); }
.nessie-items-hub__trust ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.nessie-items-hub__trust li { display: flex; align-items: center; gap: 20px; min-height: 48px; padding-inline: 28px; border-right: 1px solid #ffffff26; font-size: 18px; font-weight: 600; }
.nessie-items-hub__trust li:first-child { padding-left: 0; }
.nessie-items-hub__trust li:last-child { padding-right: 0; border: 0; }
.nessie-items-hub__trust .nessie-icon { flex: none; width: 32px; height: 32px; }

/* ---------- Sections ---------- */
.nessie-items-hub__section { padding-block: 88px; background: var(--nessie-white); }
.nessie-items-hub__section + .nessie-items-hub__section { border-top: 1px solid var(--nessie-line); }
.nessie-items-hub__head { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); align-items: end; column-gap: 48px; margin-bottom: 40px; }
.nessie-items-hub__head .nessie-eyebrow, .nessie-items-hub__head h2 { grid-column: 1; }
.nessie-items-hub__head h2 { margin: 0; font-size: 38px; font-weight: 600; line-height: 1.45; }
.nessie-items-hub__head > p:not(.nessie-eyebrow) { grid-column: 2; grid-row: 2; margin: 0 0 6px; color: var(--nessie-muted); font-size: 15px; line-height: 1.8; }
.nessie-items-hub__text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; color: var(--nessie-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--nessie-gold); padding-bottom: 4px; }
.nessie-items-hub__text-link:hover { color: var(--nessie-action-red); }

/* ---------- Item grid (15 items: 5 x 3 on PC) ---------- */
.nessie-items-hub__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 24px; margin: 0; padding: 0; list-style: none; }
.nessie-items-hub__card { min-width: 0; }
.nessie-items-hub__card a { display: flex; flex-direction: column; height: 100%; color: var(--nessie-navy); text-decoration: none; }
.nessie-items-hub__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--nessie-radius-photo); background: var(--nessie-off-white); }
.nessie-items-hub__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nessie-items-hub__card.is-illustration .nessie-items-hub__media img { padding: 12%; object-fit: contain; }
.nessie-items-hub__card a:hover img { transform: scale(1.03); }
.nessie-items-hub__card-body { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-bottom: 1px solid var(--nessie-line); padding-bottom: 18px; flex: 1; }
.nessie-items-hub__card-eyebrow { color: var(--nessie-gold); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; }
.nessie-items-hub__card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 19px; font-weight: 600; line-height: 1.45; }
.nessie-items-hub__card-title span { color: var(--nessie-aqua); font-weight: 400; transition: transform .2s ease; }
.nessie-items-hub__card a:hover .nessie-items-hub__card-title span { transform: translateX(4px); }
.nessie-items-hub__card-text { display: -webkit-box; overflow: hidden; color: var(--nessie-muted); font-size: 13px; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.nessie-items-hub__card a:focus-visible { outline: 2px solid var(--nessie-aqua); outline-offset: 4px; }

/* ---------- Household band ---------- */
.nessie-items-hub__household { background: var(--nessie-off-white); }
.nessie-items-hub__household-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.nessie-items-hub__household-icons { display: flex; gap: 16px; }
.nessie-items-hub__household-icons .nessie-icon { width: 48px; height: 48px; }
.nessie-items-hub__household h2 { margin: 0 0 10px; font-size: 28px; font-weight: 600; line-height: 1.5; }
.nessie-items-hub__household p:not(.nessie-eyebrow) { color: var(--nessie-ink); font-size: 15px; line-height: 1.85; }
.nessie-items-hub__household .nessie-items-hub__text-link { margin-top: 0; white-space: nowrap; }

/* ---------- Bundle ---------- */
.nessie-items-hub__bundle { background: var(--nessie-navy); color: var(--nessie-white); }
.nessie-items-hub__bundle-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.nessie-items-hub__bundle .nessie-eyebrow { color: var(--nessie-gold); }
.nessie-items-hub__bundle h2 { margin: 0; color: var(--nessie-white); font-size: 38px; font-weight: 400; line-height: 1.5; }
.nessie-items-hub__bundle-copy p { color: #C7CFD6; font-size: 16px; line-height: 1.9; }
.nessie-items-hub__bundle-copy p + p { margin-top: 12px; }
.nessie-items-hub__bundle-actions { margin-top: 28px; }
.nessie-items-hub__bundle-actions .nessie-button { min-width: 320px; }

/* ---------- Scenes ---------- */
.nessie-items-hub__scene-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.nessie-items-hub__scene-list a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 28px 32px; border-top: 2px solid var(--nessie-navy); background: var(--nessie-off-white); color: var(--nessie-navy); text-decoration: none; }
.nessie-items-hub__scene-list strong { display: flex; justify-content: space-between; gap: 12px; font-size: 20px; font-weight: 600; }
.nessie-items-hub__scene-list strong span { color: var(--nessie-aqua); font-weight: 400; }
.nessie-items-hub__scene-list a > span { color: var(--nessie-muted); font-size: 14px; line-height: 1.8; }
.nessie-items-hub__scene-list a:hover strong { color: var(--nessie-action-red); }

/* ---------- Brands ---------- */
.nessie-items-hub__brands { background: var(--nessie-off-white); }
.nessie-items-hub__brand-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nessie-items-hub__brand-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--nessie-line); border-radius: 999px; background: var(--nessie-white); color: var(--nessie-navy); font-size: 15px; font-weight: 600; text-decoration: none; }
.nessie-items-hub__brand-list a:hover { border-color: var(--nessie-navy); }

/* ---------- Tablet ---------- */
@media (width <= 1199px) {
  .nessie-items-hub__hero-inner { grid-template-columns: 1fr; gap: 32px; padding-block: 56px 64px; }
  .nessie-items-hub__hero h1 { font-size: 52px; }
  .nessie-items-hub__hero-actions { max-width: 480px; }
  .nessie-items-hub__trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .nessie-items-hub__trust li:nth-child(2n) { border: 0; padding-right: 0; }
  .nessie-items-hub__trust li:nth-child(2n + 1) { padding-left: 0; }
  .nessie-items-hub__section { padding-block: 72px; }
  .nessie-items-hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nessie-items-hub__household-inner { grid-template-columns: 1fr; gap: 24px; }
  .nessie-items-hub__bundle-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- SP ---------- */
@media (width <= 767px) {
  .nessie-items-hub__pc-break { display: none; }
  .nessie-items-hub__breadcrumb .nessie-breadcrumb { font-size: 10px; line-height: 1.6; }
  .nessie-items-hub__hero-inner { padding-block: 40px 48px; }
  .nessie-items-hub__hero h1 { font-size: 40px; letter-spacing: -1px; }
  .nessie-items-hub .nessie-items-hub__catch { margin-top: 16px; font-size: 22px; }
  .nessie-items-hub .nessie-items-hub__lead { font-size: 15px; }
  .nessie-items-hub__hero-actions .nessie-button { min-height: var(--nessie-layout-hero-primary-height-sp); font-size: var(--nessie-type-hero-primary-sp); }
  .nessie-items-hub__trust li { gap: 12px; padding-inline: 12px; font-size: 14px; }
  .nessie-items-hub__trust .nessie-icon { width: 24px; height: 24px; }
  .nessie-items-hub__section { padding-block: 56px; }
  .nessie-items-hub__head { grid-template-columns: 1fr; margin-bottom: 28px; }
  .nessie-items-hub__head > p:not(.nessie-eyebrow) { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .nessie-items-hub__head h2 { font-size: 28px; }
  .nessie-items-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .nessie-items-hub__card-title { font-size: 16px; }
  .nessie-items-hub__card-text { font-size: 12px; -webkit-line-clamp: 4; }
  .nessie-items-hub__household h2, .nessie-items-hub__bundle h2 { font-size: 24px; }
  .nessie-items-hub__household-icons .nessie-icon { width: 40px; height: 40px; }
  .nessie-items-hub__bundle-actions .nessie-button { width: 100%; min-width: 0; }
  .nessie-items-hub__scene-list { grid-template-columns: 1fr; gap: 16px; }
  .nessie-items-hub__scene-list a { padding: 24px; }
}