/* ============================================
   HERO 2×3 — Balanced from Desktop → Tablet → Mobile
   Desktop: 2+3
   Tablet (720–1024): 2 + (2 + last spans 2)
   Mobile (≤719): 1 column
   ============================================ */

/* ---- container ---- */
.svz-hero-2x3{
  --gap:14px;
  --cap:1080px;                           /* hard max on large screens */
  width:min(100%, var(--cap));
  margin:16px auto 20px;
  padding-inline:0;                      /* crisp vertical edges on desktop */
  box-sizing:border-box;
}
.svz-hero-2x3 *{ box-sizing:inherit; }

/* ===== DESKTOP (≥1025px) ===== */
.svz-hero-2x3 .svz-top{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(2, minmax(0,1fr));   /* 2 big squares */
}
.svz-hero-2x3 .svz-top .svz-cell{ width:100%; aspect-ratio:1/1; }

.svz-hero-2x3 .svz-bottom{
  margin-top:var(--gap);
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(3, minmax(0,1fr));   /* 3 squares */
}
.svz-hero-2x3 .svz-bottom .svz-cell{ width:100%; aspect-ratio:1/1; }

/* ----- card / media ----- */
.svz-cell{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:10px;
  background:#f3f4f6;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  -webkit-tap-highlight-color:transparent;
}
.svz-cell img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block;
  transition:transform .35s;
}
.svz-cell:hover img{ transform:scale(1.035); }

/* overlay gradient */
.svz-cell::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.86) 0%,
    rgba(0,0,0,.65) 28%,
    rgba(0,0,0,.38) 54%,
    rgba(0,0,0,.14) 74%,
    rgba(0,0,0,0)   90%
  );
}

/* text blocks (desktop defaults) */
.svz-title{
  position:absolute; left:14px; right:14px; bottom:44px;
  margin:0; color:#fff; z-index:2;
  font-weight:800; line-height:1.25; font-size:20px;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.svz-meta{
  position:absolute; left:10px; right:10px; bottom:10px;
  z-index:2; color:#fff;
  background:rgba(0,0,0,.58);
  font-size:14px; line-height:1;
  padding:6px 10px; border-radius:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.svz-meta .svz-cat{ margin-left:10px; color:#fff; text-decoration:none; }
.svz-meta .svz-cat:hover{ text-decoration:underline; }

/* add mild side padding when page is narrower than cap */
@media (max-width:940px){
  .svz-hero-2x3{ padding-inline:clamp(8px, 2.5vw, 14px); }
}

/* ===== TABLET (720–1024px) — balanced 2-column grid =====
   Top stays 2 across. Bottom becomes 2 across; the last (5th)
   card spans both columns to avoid an empty gap. */
@media (max-width:1024px){
  .svz-hero-2x3 .svz-top{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .svz-hero-2x3 .svz-bottom{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .svz-hero-2x3 .svz-bottom .svz-cell:last-child{
    grid-column:1 / -1;                 /* span both columns = no gap */
  }

  /* allow meta to wrap; keep both date & cat visible */
  .svz-meta{
    white-space:normal;
    line-height:1.25;
    padding:8px 10px;
    border-radius:10px;
    font-size:13.5px;
  }
  .svz-meta .svz-cat{
    display:inline-block;
    margin-left:8px;
    padding:3px 8px;
    border-radius:6px;
    background:rgba(255,255,255,.14);
    font-weight:700;
  }
  .svz-title{ font-size:19px; bottom:60px; }
}

/* ===== MOBILE (≤719px) — single column, clean spacing ===== */
@media (max-width:719px){
  .svz-hero-2x3 .svz-top{ grid-template-columns:1fr; }
  .svz-hero-2x3 .svz-bottom{ grid-template-columns:1fr; }

  /* title above meta with enough room */
  .svz-title{
    font-size:18px;
    bottom:80px;
  }
  /* date + cat always visible; cat becomes chip below date */
  .svz-meta{
    display:block;
    white-space:normal;
    line-height:1.3;
    padding:9px 10px;
    border-radius:5px;
    font-size:13.5px;
  }
  .svz-meta .svz-cat{
    display:inline-block;
    margin-left:0;
    margin-top:6px;
    padding:4px 9px;
    border-radius:7px;
    background:rgba(255,255,255,.18);
    font-weight:700;
  }
}

/* tiny phones */
@media (max-width:420px){
  .svz-title{ font-size:16.5px; bottom:74px; }
  .svz-meta{ font-size:12.5px; padding:7px 9px; }
  .svz-meta .svz-cat{ padding:3px 8px; }
}