/* =========================================================================
   Page: industry (業種別ホームページ制作 — index of all 8 verticals)
   New layout not covered by theme.css's .ms-row-list (which hides its desc
   column on mobile — unsuitable here since this index page's whole point is
   showing the fuller ~200-300 char per-industry description at every size).
   ========================================================================= */

/* ---- Hero price chip (dark card echoing the prototype's inline badge) --- */
.ms-ind-hero__price {
  display: inline-flex;
  background: var(--ms-dark);
  color: #F5F4F0;
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.6vw, 28px);
  border-radius: var(--ms-radius);
}
.ms-ind-hero__price .ms-price__label { color: rgba(245, 244, 240, .6); }
.ms-ind-hero__price .ms-price__row { border-bottom-color: rgba(245, 244, 240, .18); }

/* ---- Card grid ---- */
.ms-ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 3.4vw, 52px);
}

.ms-ind-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.ms-ind-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ms-radius);
  background: var(--ms-placeholder-bg);
}
.ms-ind-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ms-ind-card:hover .ms-ind-card__thumb img { transform: scale(1.05); }

.ms-ind-card__badge { display: flex; align-items: center; gap: 10px; }
.ms-ind-card__num {
  font-family: var(--ms-font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: var(--ms-accent);
}
.ms-ind-card__eyebrow {
  font-family: var(--ms-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; color: var(--ms-note);
}
.ms-ind-card__title {
  font-family: var(--ms-font-head); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.4; font-size: clamp(19px, 2.4vw, 30px); color: var(--ms-text);
}
.ms-ind-card__desc { font-size: 13.5px; line-height: 2; color: var(--ms-lead); }
.ms-ind-card__link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-weight: 600; font-size: 13.5px; color: var(--ms-text);
  border-bottom: 1px solid rgba(17, 17, 17, .35); padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.ms-ind-card__link span { transition: transform .25s ease; }
.ms-ind-card:hover .ms-ind-card__link { color: var(--ms-accent); border-color: var(--ms-accent); }
.ms-ind-card:hover .ms-ind-card__link span { transform: translateX(4px); }

/* ---- Featured card (business — spans full width, horizontal) ---- */
.ms-ind-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 44px);
  align-items: stretch;
}
.ms-ind-card--featured .ms-ind-card__thumb {
  flex: 1 1 min(100%, 340px);
  aspect-ratio: 16 / 10;
}
.ms-ind-card--featured .ms-ind-card__body {
  flex: 1 1 min(100%, 320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.ms-ind-card--featured .ms-ind-card__title { font-size: clamp(22px, 2.8vw, 36px); }

@media (max-width: 640px) {
  /* flex-wrap must be reset too: with flex-direction:column, "wrap" still
     wraps along the (now horizontal) cross-axis whenever the column runs out
     of vertical room, pushing the body into a second, off-screen column
     instead of stacking under the thumbnail — found via QA overflow testing. */
  .ms-ind-card--featured { flex-direction: column; flex-wrap: nowrap; }
}