/* Niche page: ristorazione. Accent = acid, applied as a subtle tonal
   variation of the shared Miraform palette (not a separate brand colour). */

.niche { --accent: var(--acid); --accent-deep: #777a4c; }

.niche-hero { padding: 70px 0 120px; border-bottom: 1px solid var(--line); }
.niche-hero h1 { max-width: 900px; font: 400 clamp(50px, 6.5vw, 92px)/.95 var(--display); letter-spacing: -.065em; margin-bottom: 30px; }
.niche-hero-lede { max-width: 470px; color: #5f605b; font-size: 17px; line-height: 1.55; margin-bottom: 34px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-family: var(--label); font-size: 11px; color: #84857f; margin-bottom: 30px; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { opacity: .5; }

/* Concept showcase */
.concepts { padding: 130px 0 150px; }
.concept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.concept-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-soft);
}
.concept-preview { height: 250px; position: relative; overflow: hidden; display: grid; place-items: center; padding: 26px; }
.concept-preview::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,17,20,.08), rgba(16,17,20,.62)); mix-blend-mode: multiply; opacity: .78; }
.concept-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.concept-card:hover .concept-image { transform: scale(1.045); filter: saturate(1.04); }
.concept-preview-warm::after { background: linear-gradient(180deg, rgba(117,70,41,.06), rgba(64,35,19,.62)); }
.concept-preview-premium { background: linear-gradient(150deg, #16171a, #23252a 70%); color: #e9e7de; }
.concept-preview-warm { background: linear-gradient(150deg, #e8d9c4, #f0e5d5 70%); color: #3b3226; }
.preview-frame { width: 100%; max-width: 300px; text-align: center; position: relative; z-index: 2; color: #f2f0e9; text-shadow: 0 1px 20px rgba(0,0,0,.22); }
.preview-frame .preview-kicker { font-family: var(--label); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 0 0 12px; }
.preview-frame h3 { font: 400 34px/1 var(--display); letter-spacing: -.05em; margin: 0 0 14px; }
.preview-frame h3 em { font-family: var(--display-italic); font-style: italic; }
.concept-preview-premium h3 em { color: var(--accent); }
.concept-preview-warm h3 em { color: #ffd0a8; }
.preview-rule { height: 1px; width: 46px; margin: 0 auto 14px; background: currentColor; opacity: .35; }
.preview-frame p { font-size: 11px; opacity: .7; margin: 0; }

.concept-body { padding: 30px 30px 34px; }
.concept-body h2 { font: 400 34px/1 var(--display); letter-spacing: -.05em; margin: 0 0 14px; }
.concept-body > p { color: #5f605b; font-size: 14px; margin-bottom: 20px; }
.concept-traits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.concept-traits li { padding: 12px 0 12px 20px; border-bottom: 1px solid var(--line); color: #777770; font-size: 13px; position: relative; }
.concept-traits li::before { content: ''; position: absolute; left: 0; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); opacity: .55; }

.concept-note { margin-top: 26px; color: #999991; font-size: 12px; }

/* Includes list reuses the shared .method* patterns */
.includes { padding: 0 0 160px; }

@media (max-width: 800px) {
  .niche-hero { padding: 50px 0 90px; }
  .niche-hero h1 { font-size: clamp(45px, 13vw, 70px); }
  .concepts { padding: 90px 0 100px; }
  .concept-grid { grid-template-columns: 1fr; gap: 22px; }
  .concept-preview { height: 210px; }
  .concept-body { padding: 24px 22px 28px; }
  .includes { padding-bottom: 110px; }
}