/* Заголовок страницы */
.page-title{
  font-size: clamp(24px, 3.2vw, 36px);
  margin: 10px auto 14px;
  width: min(1120px, 92%);
}

/* Общие элементы секций */
.section-head .sec-intro{
  color: var(--muted);
  margin: 6px 0 14px;
  max-width: 68ch;
}
.mosaic-section{ padding: 42px 0; }

/* Чистая мозаика без «фишек» */
.mosaic{
  display: grid;
  /* плитки от 240 до 350px, сетка центрируется */
  grid-template-columns: repeat(auto-fit, minmax(240px, 350px));
  gap: 14px;
  justify-content: center;
}
.tile{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px; /* строгое ограничение по ТЗ */
  margin-inline: auto;
}
.tile figcaption{
  color: var(--muted);
  font-size: 13px;
  padding: 8px 12px 12px;
}

@media (hover:hover){
  .tile:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.16);
  }
}

/* Адаптивные отступы */
@media (max-width: 540px){
  .mosaic-section{ padding: 34px 0; }
}
 /* Дополнительная типографика и списки для текста */
.bullet-notes{
  margin: 6px 0 14px;
  padding-left: 18px;
  color: var(--muted);
}
.bullet-notes li{ margin: 4px 0; }

/* Чуть плотнее сетка для насыщенных секций */
#peynir .mosaic,
#soslar .mosaic,
#icecekler .mosaic{
  gap: 12px;
}
/* ===== Variant 1: staggered (ступенчатая) ===== */
.mosaic.staggered{
  grid-template-columns: repeat(auto-fit, minmax(240px, 350px));
  grid-auto-rows: 160px; /* базовая высота ряда для спанов */
  gap: 12px;
}
.tile.tall{ grid-row: span 2; }
.tile img.fit-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 350px;
}

/* ===== Variant 2: checker (шахматная с текстовым тайлом) ===== */
.mosaic.checker{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.text-tile{
  display:flex; flex-direction: column; justify-content: center;
  padding: 14px;
}
.text-tile h3{ margin: 0 0 6px; font-size: clamp(16px, 1.8vw, 18px); }
.text-tile p{ color: var(--muted); margin: 0 0 6px; }

/* ===== Variant 3: areas (template-areas) ===== */
.mosaic.areas{
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  grid-template-rows: auto auto;
  grid-template-areas:
    "a a b"
    "d d b";
  gap: 14px;
}
.mosaic.areas .area-a{ grid-area: a; }
.mosaic.areas .area-b{ grid-area: b; }
.mosaic.areas .area-d{ grid-area: d; }

@media (max-width: 820px){
  .mosaic.areas{
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "d";
  }
}
/* ===== Quilt (колонки с авто-высотой) ===== */
.mosaic.quilt{
  column-width: 280px; /* браузер сам подберёт 2–3 колонки */
  column-gap: 14px;
}
.mosaic.quilt .tile{
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
}

/* ===== Split (большой + стек) ===== */
.mosaic.split{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items: start;
}
.mosaic.split .big{ grid-row: span 2; min-height: 340px; }
.mosaic.split .fit-cover{ width:100%; height:100%; object-fit: cover; max-width:350px; }
@media (max-width: 820px){
  .mosaic.split{ grid-template-columns: 1fr; }
  .mosaic.split .big{ min-height: 260px; }
}

/* ===== Band (шахматные полосы) ===== */
.mosaic.band{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
  grid-template-areas: "img1 text" "text img2";
}
.mosaic.band .img1{ grid-area: img1; }
.mosaic.band .img2{ grid-area: img2; }
.mosaic.band .textband{ grid-area: text; display:flex; flex-direction:column; justify-content:center; }
@media (max-width: 780px){
  .mosaic.band{ grid-template-columns: 1fr; grid-template-areas: "img1" "text" "img2"; }
}
/* ===== Перекрытия не допускаем */
.mosaic-section, .info-split, .price-overview, .order-channels{ isolation: isolate; }
.mosaic-section .tile{ position: relative; z-index: 0; }

/* ===== 12) Porsiyon & Paylaşım */
.info-split{ padding: 48px 0; }
.split-inner{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start;
}
.checklist{ margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.checklist li{ margin: 4px 0; }

.media-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow); margin-bottom: 12px;
}
.media-card img{ display:block; width:100%; height:auto; max-width:350px; margin-inline:auto; }
.media-card figcaption{ color: var(--muted); font-size:13px; padding: 8px 12px 12px; }

@media (max-width: 900px){
  .split-inner{ grid-template-columns: 1fr; }
}

/* ===== 13) Fiyatlar */
.price-overview{ padding: 48px 0; }
.price-grid{
  display:grid; grid-template-columns: 1.2fr .6fr .6fr; gap: 8px;
  border:1px solid var(--border); border-radius: 14px; padding: 10px;
  background: rgba(255,255,255,.03);
}
.price-row{ display: contents; }
.price-row > *{
  padding: 10px 8px; border-bottom: 1px solid var(--border);
}
.price-row:last-child > *{ border-bottom: 0; }
.price-row.head > *{
  font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.18);
}
.fine-note{ color: var(--muted); margin: 8px 0 12px; }

.aside-photos{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px;
}
.aside-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-sm);
  overflow:hidden; box-shadow: var(--shadow);
}
.aside-card img{ width:100%; height:auto; max-width:350px; margin-inline:auto; }
.aside-card figcaption{ color: var(--muted); font-size: 13px; padding: 8px 12px 12px; }

@media (max-width: 760px){
  .price-grid{ grid-template-columns: 1fr 100px 110px; }
  .aside-photos{ grid-template-columns: 1fr; }
}

/* ===== 14) Sipariş Kanalları */
.order-channels{ padding: 48px 0 56px; }
.channel-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.channel-card{
  display:flex; gap: 12px; align-items:center;
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px;
}
.thumb{ flex: 0 0 auto; width: 120px; border-radius: 12px; overflow:hidden; }
.thumb img{ display:block; width:100%; height:auto; max-width:350px; }
.ch-text h3{ margin: 2px 0 4px; font-size: clamp(16px,1.8vw,18px); }
.ch-text p{ margin: 0; color: var(--muted); }

.contact-inline{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.cta{
  display:inline-block; padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#121214; border:0;
}
.cta.ghost{
  background: transparent; color: var(--ink);
  border:1px solid var(--border);
}

@media (max-width: 820px){
  .channel-grid{ grid-template-columns: 1fr; }
}
/* ===== 15) Şefin Tavsiyeleri ===== */
.chef-tips{ padding: 48px 0; }
.feature-row{
  display:flex; gap:16px; align-items: flex-start; margin-bottom: 16px;
  isolation: isolate; /* перестраховка от перекрытий */
}
.feature-row.reverse{ flex-direction: row-reverse; }
.feat-media{
  flex: 0 0 350px; max-width: 350px;
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow);
}
.feat-media img{ display:block; width:100%; height:auto; max-width:350px; }
.feat-media figcaption{ color: var(--muted); font-size: 13px; padding: 8px 12px 12px; }
.feat-copy{ flex: 1 1 auto; }
.feat-copy h3{ margin: 4px 0 6px; font-size: clamp(18px,2vw,20px); }
.feat-copy p{ margin: 0 0 8px; color: var(--muted); }
.feature-tips{ margin: 0; padding-left: 18px; color: var(--muted); }
.feature-tips li{ margin: 4px 0; }

@media (max-width: 900px){
  .feature-row, .feature-row.reverse{ flex-direction: column; }
  .feat-media{ flex-basis: auto; width: 100%; max-width: 350px; }
}

/* ===== 16) Rezervasyon & İletişim ===== */
.contact-final{ padding: 48px 0 56px; }
.final-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px;
}
.final-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-sm);
  overflow:hidden; box-shadow: var(--shadow);
}
.final-card img{ width:100%; height:auto; max-width:350px; margin-inline:auto; }
.final-card figcaption{ color: var(--muted); font-size: 13px; padding: 8px 12px 12px; }

@media (max-width: 760px){
  .final-grid{ grid-template-columns: 1fr; }
}