/* ============================================================
   MEDIA.CSS - page-specific styles for /media (מדיה / גלריה).
   Hero + responsive image grid + closing cream CTA band.
   ============================================================ */

/* page sits under the fixed nav (top-bar + main-bar) - black so the
   padding-top offset matches the hero, no grey strip (see catalog.css) */
.media-page { padding-top: 124px; background: #000; }

/* ---------- hero ---------- */
.media-hero {
  background: linear-gradient(180deg, var(--bg-dark) 0%, #000 100%);
  padding: 56px 0 56px; text-align: center;
}
.media-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 800;
  letter-spacing: 0.12em; color: var(--gold-3); margin-bottom: 16px;
}
.media-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 5vw, 56px); line-height: 1.06;
  color: var(--white); margin-bottom: 20px;
}
.media-title span { color: var(--gold); }
.media-lead {
  max-width: 640px; margin: 0 auto; font-size: 17px;
  line-height: 1.8; color: var(--text);
}

/* ---------- gallery grid ---------- */
.media-gallery-sec { background: #000; padding: 24px 0 80px; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.media-tile {
  margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 4/3; background: var(--bg-soft);
  border-radius: var(--radius); cursor: pointer;
}
.media-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.media-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(20,7,6,0.35));
  opacity: 0; transition: opacity 0.3s;
}
.media-tile:hover img { transform: scale(1.06); }
.media-tile:hover::after { opacity: 1; }

/* Entrance animation lives in main.css (.imgrev-grid) - shared with
   .prod-card. media.js wires it to this grid. */

/* no zoom-on-hover when the OS asks for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .media-tile img, .media-tile:hover img { transition: none; transform: none; }
}

/* ---------- closing CTA band (cream - dark text for contrast) ---------- */
.media-cta-band {
  text-align: center; padding: 56px 0;
  background: #f2dcca; border-top: 1px solid rgba(26,22,23,0.12);
}
.media-cta-band h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800; color: #1f1a1b; margin-bottom: 12px;
}
.media-cta-band p { color: #3a3330; margin-bottom: 26px; font-size: 16px; }
.media-cta-band .media-cta-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
/* ghost button reads dark on the cream band */
.media-cta-band .btn-ghost { color: #1f1a1b; border-color: #1f1a1b; }
.media-cta-band .btn-ghost:hover { background: #1f1a1b; color: #f2dcca; }

/* ---------- tablet ---------- */
@media (min-width: 768px) and (max-width: 1200px) {
  .media-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .media-page { padding-top: 88px; }
  .media-hero { padding: 40px 0 40px; }
  .media-gallery-sec { padding: 20px 0 56px; }
  .media-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .media-cta-band .media-cta-btns { flex-direction: column; }
  .media-cta-band .media-cta-btns .btn { width: 100%; }
}