/* media.css — page-unique styles for الميديا (media page):
   tab switch + photo album grid + videos grid. Everything else
   (hero, section rhythm, CTA, footer) is shared chrome in main.css. */

/* ---------- tabs (البوم الصور / الفيديوهات) ---------- */
.media-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:2.2rem;margin-bottom:3.5rem}
.media-tab{
  min-width:min(360px,100%);padding:1.05rem 2.5rem;border:none;cursor:pointer;
  border-radius:var(--radius-lg);font-family:inherit;font-size:1.3rem;font-weight:700;
  background:var(--cream-2);color:var(--ink-soft);
  transition:background .25s,color .25s;
}
.media-tab:hover{color:var(--orange-deep)}
.media-tab.on{background:var(--peach-2);color:var(--orange)}

/* ---------- photo album (grid = shared .cards-grid) ---------- */
.album-grid img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform .3s;
}
.album-grid img:hover{transform:scale(1.025)}

/* ---------- video cards (grid = shared .cards-grid, play = shared .icon-circle) ---------- */
.video-thumb{position:relative;display:block;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.video-thumb::after{content:'';position:absolute;inset:0;background:var(--overlay-card)}
.video-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .3s}
.video-card:hover .video-thumb img{transform:scale(1.03)}
.video-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font-size:1.25rem}
.video-play .icon-circle{width:4rem;height:4rem}
.video-card:hover .video-play .icon-circle{background:var(--orange);color:#fff}
.video-card h3{margin-top:1.1rem;text-align:center;font-size:1.15rem;font-weight:700;color:var(--ink)}

/* ---------- responsive (media-unique) ---------- */
@media(max-width:680px){
  .media-tabs{gap:1rem;margin-bottom:2.6rem}
  .media-tab{min-width:100%}
}