/* בלק צ'רי — דף הבית */

/* ── Hero ── */
.hero { position: relative; min-block-size: clamp(420px, 62vh, 640px); display: grid; place-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(26,10,14,.45), rgba(26,10,14,.55)); }
.hero-content { position: relative; text-align: center; color: var(--bc-white); padding-inline: 20px; }
.hero-content h1 { font-size: var(--fs-hero); font-weight: 500; margin-block-end: .35em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-content p { font-size: var(--fs-lg); margin-block-end: 1.6em; opacity: .95; }

/* ── אודות קצר ── */
.intro { background: var(--bc-cream); }
.intro-inner { max-inline-size: 860px; text-align: center; }
.intro-logo {
  display: block; inline-size: 220px; block-size: 50px; margin: 0 auto 1.4rem;
  background-color: var(--bc-primary);
  -webkit-mask: url('/assets/logo.svg') no-repeat center / contain;
          mask: url('/assets/logo.svg') no-repeat center / contain;
}
.intro-inner p { color: var(--bc-ink-soft); font-size: var(--fs-lg); }

/* ── שלושת העולמות ── */
.worlds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.world-card { display: block; text-align: center; }
.world-card .wc-media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: 0 2px 12px rgba(59,15,26,.07); }
.world-card img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .45s ease; }
.world-card:hover img { transform: scale(1.05); }
.world-card h3 { margin-block: 1rem .3rem; font-weight: 600; font-size: var(--fs-lg); }
.world-card p { color: var(--bc-ink-soft); font-size: var(--fs-sm); max-inline-size: 34ch; margin-inline: auto; }

/* ── קרוסלה ── */
.carousel { position: relative; }
.car-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 1.2rem) / 4);
  gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: .6rem;
  scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; }
.car-nav {
  position: absolute; inset-block-start: 38%; z-index: 2;
  inline-size: 42px; block-size: 42px; border-radius: 50%;
  background: var(--bc-white); color: var(--bc-primary);
  box-shadow: 0 4px 16px rgba(59,15,26,.16);
  display: grid; place-items: center; transition: opacity .2s, transform .2s;
}
.car-nav:hover { transform: scale(1.06); }
.car-nav[disabled] { opacity: 0; pointer-events: none; }
.car-prev { inset-inline-start: -14px; }
.car-next { inset-inline-end: -14px; }
.car-prev::after, .car-next::after { content: ""; inline-size: 9px; block-size: 9px; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; }
.car-prev::after { transform: rotate(45deg) translate(-1px, 1px); }   /* חץ לימין (RTL: אחורה) */
.car-next::after { transform: rotate(-135deg) translate(-1px, 1px); } /* חץ לשמאל (RTL: קדימה) */
.section-more { text-align: center; margin-block-start: 1.6rem; }
.car-empty { color: var(--bc-ink-soft); text-align: center; padding-block: 2rem; grid-column: 1 / -1; }

/* ── סקשן מפוצל (360 / חנות) ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split-media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); order: 2; }
.split-media img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split-text { order: 1; }
.split-reverse .split-media { order: 1; }
.split-reverse .split-text { order: 2; }
.overline { color: var(--bc-rose); font-weight: 600; font-size: var(--fs-sm); display: block; margin-block-end: .5rem; }
.split-text h2 { font-size: var(--fs-h2); font-weight: 500; }
.split-text p { color: var(--bc-ink-soft); margin-block-end: 1.4em; }

/* ── המלצות ── */
.testimonials { background: var(--bc-gray-bg); padding-block: var(--space-section); margin-block-start: var(--space-section); }
.testimonials .section-title { margin-block-start: 0; }
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.testi-card {
  background: var(--bc-white); border-radius: var(--radius-card); padding: 2rem 1.8rem 1.4rem;
  margin: 0; position: relative; box-shadow: 0 2px 10px rgba(59,15,26,.05);
}
.quote-mark { color: var(--bc-rose); font-size: 2.6rem; line-height: 0; display: block; margin-block-end: 1.2rem; letter-spacing: -4px; }
.testi-card blockquote { margin: 0 0 1rem; color: var(--bc-ink-soft); font-size: var(--fs-sm); }
.testi-card figcaption { font-weight: 600; color: var(--bc-ink); }

/* ── כשרות ── */
.kashrut-inner { max-inline-size: 820px; text-align: center; }
.kashrut-inner h2 { font-size: var(--fs-h2); }
.kashrut-inner p { color: var(--bc-ink-soft); }
.kashrut-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-block-start: 1.6rem; }

/* ── מודאל תעודה (flex-centering — עמיד ל-scrollbar) ── */
.cert-layer {
  position: fixed; inset: 0; z-index: 100; background: rgba(26,10,14,.6);
  display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px;
}
.cert-layer[hidden] { display: none; }
.cert-box { position: relative; background: var(--bc-white); border-radius: var(--radius-card); padding: 14px; box-shadow: var(--shadow-pop); max-block-size: 92vh; }
.cert-box img { max-block-size: calc(92vh - 28px); max-inline-size: min(86vw, 720px); object-fit: contain; border-radius: 6px; }
.cert-close { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: var(--bc-white); box-shadow: 0 2px 10px rgba(0,0,0,.15); }

/* ── רספונסיב ── */
@media (max-width: 960px) {
  .worlds-grid { grid-template-columns: 1fr; max-inline-size: 480px; margin-inline: auto; }
  .car-track { grid-auto-columns: 72%; }
  .split { grid-template-columns: 1fr; gap: 1.6rem; }
  .split-media, .split-text, .split-reverse .split-media, .split-reverse .split-text { order: initial; }
  .testi-grid { grid-template-columns: 1fr; }
  .car-nav { display: none; }
}
@media (min-width: 961px) and (max-width: 1200px) {
  .car-track { grid-auto-columns: calc((100% - 2 * 1.2rem) / 3); }
}