/* ══════════════════════════════════════════════════════════════════════
   IPTV Americans — Responsive helpers (v1.0)
   ──────────────────────────────────────────────────────────────────────
   Breakpoint definitions + responsive utility variants.

   Breakpoints (mobile-first):
     base:    0–560px      (mobile portrait + small landscape)
     sm:      ≥561px       (mobile landscape, small tablet)
     md:      ≥768px       (tablet)
     lg:      ≥921px       (desktop)
     xl:      ≥1281px      (wide desktop)

   Usage:
     <div class="u-flex md:u-grid">…</div>

   The `md:` prefix activates the rule at ≥768px and up.
   ══════════════════════════════════════════════════════════════════════ */


/* ─── Small (≥561px) ──────────────────────────────────────────────── */
@media (min-width: 561px) {
  .sm\:u-hidden        { display: none !important; }
  .sm\:u-block         { display: block; }
  .sm\:u-flex          { display: flex; }
  .sm\:u-grid          { display: grid; }
  .sm\:u-flex-col      { flex-direction: column; }
  .sm\:u-flex-row      { flex-direction: row; }
}


/* ─── Medium (≥768px, tablet) ─────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:u-hidden        { display: none !important; }
  .md\:u-block         { display: block; }
  .md\:u-flex          { display: flex; }
  .md\:u-grid          { display: grid; }
  .md\:u-flex-col      { flex-direction: column; }
  .md\:u-flex-row      { flex-direction: row; }
  .md\:u-text-left     { text-align: left; }
  .md\:u-text-center   { text-align: center; }
}


/* ─── Large (≥921px, desktop) ─────────────────────────────────────── */
@media (min-width: 921px) {
  .lg\:u-hidden        { display: none !important; }
  .lg\:u-block         { display: block; }
  .lg\:u-flex          { display: flex; }
  .lg\:u-grid          { display: grid; }
  .lg\:u-flex-col      { flex-direction: column; }
  .lg\:u-flex-row      { flex-direction: row; }
}


/* ─── Wide (≥1281px) ──────────────────────────────────────────────── */
@media (min-width: 1281px) {
  .xl\:u-hidden        { display: none !important; }
  .xl\:u-block         { display: block; }
}


/* ─── Default responsive grid templates ────────────────────────────── */
.ds-grid-2  { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.ds-grid-3  { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.ds-grid-4  { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }

@media (min-width: 561px) {
  .ds-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .ds-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 921px) {
  .ds-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .ds-grid-4 { grid-template-columns: repeat(4, 1fr); }
}


/* ─── Mobile padding default for full-bleed sections ──────────────── */
@media (max-width: 560px) {
  .ds-mobile-edge { padding-inline: var(--w-mobile-padding); }
}