/* ── Tablet: 769px – 1024px ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .swp-layout--has-sidebar        { grid-template-columns: 1fr 260px; }
    .swp-layout--has-double-sidebar { grid-template-columns: 1fr 200px 200px; }
    .swp-grade-3x2                  { grid-template-columns: repeat(2, 1fr); }
    .swp-destaque-triplo            { grid-template-columns: 1fr 1fr; }
    .swp-single-wrap                { grid-template-columns: 1fr 260px; }
    .swp-dq-menores                 { grid-template-rows: auto; }
}

/* ── Mobile deitado: 481px – 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Layout: remove sidebar — empilha tudo */
    .swp-layout--has-sidebar,
    .swp-layout--has-double-sidebar { grid-template-columns: 1fr; }
    .swp-sidebar, .swp-sidebar--a,
    .swp-sidebar--b                 { position: static; }

    .swp-single-wrap                { grid-template-columns: 1fr; }

    /* Header */
    .swp-menu-toggle { display: flex; }
    .swp-nav         { display: none; position: absolute; top: 64px; left: 0; right: 0;
                       background: var(--swp-primary); padding: 12px 16px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
    .swp-nav.is-open { display: block; }
    .swp-menu        { flex-direction: column; gap: 2px; }

    /* Novos blocos */
    .swp-grade-editorial            { grid-template-columns: 1fr; }
    .swp-ge-grid                    { grid-template-columns: 1fr 1fr; }
    .swp-slider                     { aspect-ratio: 16/9; }

    /* Blocos: 2 colunas → 1 coluna */
    .swp-destaque-duplo             { grid-template-columns: 1fr; }
    .swp-dd-mains                   { grid-template-columns: 1fr; }
    .swp-grade-3x2                  { grid-template-columns: repeat(2, 1fr); }
    .swp-coluna-lista               { grid-template-columns: 1fr; }
    .swp-destaque-triplo            { grid-template-columns: 1fr; }
    .swp-dt-secundarios             { grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
    .swp-destaque-quadruplo         { grid-template-columns: 1fr; }
    .swp-dq-menores                 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }

    /* Footer */
    .swp-footer-inner               { flex-direction: column; gap: 24px; }
    /* Colunas do builder: empilha tudo a 768px (tablet-override abaixo pode sobrescrever) */
    .swp-row-col { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── Mobile: até 480px ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    :root { --swp-gap: 12px; }

    .swp-grade-3x2                  { grid-template-columns: 1fr; }
    .swp-dt-secundarios             { grid-template-columns: 1fr; }
    .swp-dq-menores                 { grid-template-columns: 1fr; }
    .swp-hero                       { aspect-ratio: 4/3; }
    .swp-hero-title                 { font-size: 1.1rem; }
    .swp-article-title              { font-size: 1.3rem; }
    .swp-single-content             { padding: 16px; }

    /* Admin builder: substitui drag & drop por botões */
    .swp-sortable-handle            { display: none; }
    .swp-row-move-btns              { display: flex; }
}

@media (max-width: 768px) {
    .swp-grade-2x2          { grid-template-columns: 1fr; }
    .swp-mini-cards--2col,
    .swp-mini-cards--3col,
    .swp-mini-cards--4col,
    .swp-mini-cards--5col,
    .swp-mini-cards--6col   { grid-template-columns: repeat(2, 1fr); }
    .swp-row-col--sticky    { position: static; }
    .swp-ticker-inner       { animation-duration: 20s; }
}
@media (max-width: 480px) {
    .swp-mini-cards--2col,
    .swp-mini-cards--3col,
    .swp-mini-cards--4col,
    .swp-mini-cards--5col,
    .swp-mini-cards--6col   { grid-template-columns: 1fr; }
}

/* ── Overrides por viewport configurados no builder ─────────────────────────── */
/* As CSS vars são emitidas inline por coluna; classes adicionadas só quando     */
/* o valor difere do desktop — sem a classe, o padrão do viewport se aplica.    */

/* Laptop (≤1200px) */
@media (max-width: 1200px) {
    .swp-row-col.swp-col-has-lp      { flex: 0 0 var(--swp-colw-lp) !important; max-width: var(--swp-colw-lp) !important; }
    .swp-row-cols.swp-has-lp-gap     { gap:           var(--swp-gap-lp)    !important; }
    .swp-row-wrap.swp-has-lp         { background:    var(--swp-bg-lp)     !important; }
    .swp-row-wrap.swp-has-lp-pad     { padding:       var(--swp-pad-lp)    !important; }
    .swp-row-wrap.swp-has-lp-margin  { margin:        var(--swp-margin-lp) !important; }
    .swp-row-wrap.swp-has-lp-border  { border:        var(--swp-border-lp) !important; }
    .swp-row-wrap.swp-has-lp-radius  { border-radius: var(--swp-radius-lp) !important; }
    .swp-row-wrap.swp-has-lp-font    { font-size:     var(--swp-font-lp)   !important; }
}

/* Tablet (≤768px) — .swp-col-has-tb sobrescreve o empilhamento 100% padrão */
@media (max-width: 768px) {
    .swp-row-col.swp-col-has-tb      { flex: 0 0 var(--swp-colw-tb) !important; max-width: var(--swp-colw-tb) !important; }
    .swp-row-cols.swp-has-tb-gap     { gap:           var(--swp-gap-tb)    !important; }
    .swp-row-wrap.swp-has-tb         { background:    var(--swp-bg-tb)     !important; }
    .swp-row-wrap.swp-has-tb-pad     { padding:       var(--swp-pad-tb)    !important; }
    .swp-row-wrap.swp-has-tb-margin  { margin:        var(--swp-margin-tb) !important; }
    .swp-row-wrap.swp-has-tb-border  { border:        var(--swp-border-tb) !important; }
    .swp-row-wrap.swp-has-tb-radius  { border-radius: var(--swp-radius-tb) !important; }
    .swp-row-wrap.swp-has-tb-font    { font-size:     var(--swp-font-tb)   !important; }
}