/**
 * responsive.css — Sistema Central de Responsividade — Vincent
 * Mobile-first com CSS Grid Template Areas
 *
 * Breakpoints:
 *   --bp-mobile:  ≤ 480px  (smartphones)
 *   --bp-tablet:  ≤ 768px  (tablets / landscape phone)
 *   --bp-desktop: ≥ 1024px (laptops / desktops)
 *   --bp-wide:    ≥ 1280px (widescreen)
 */

/* ══════════════════════════════════════════════════════
   1. LAYOUT DE PÁGINA BASE (navbar fixo + main + footer)
   ══════════════════════════════════════════════════════ */
.page-wrapper {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "navbar"
        "main"
        "footer";
}

.page-wrapper>nav {
    grid-area: navbar;
}

.page-wrapper>main {
    grid-area: main;
}

.page-wrapper>footer {
    grid-area: footer;
}

/* ══════════════════════════════════════
   2. CONTAINER FLUIDO CENTRALIZADO
   ══════════════════════════════════════ */
.container,
.content-wrap {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
}

/* ══════════════════════════════════════
   3. SEÇÃO DE CONTEÚDO GENÉRICA
   (1 coluna em mobile, vira 2 no tablet)
   ══════════════════════════════════════ */
.section-grid {
    display: grid;
    gap: clamp(16px, 3vw, 32px);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .section-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .section-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .section-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ══════════════════════════════════════
   4. LAYOUT SIDEBAR + CONTEÚDO
   (usado em profile, account, blog)
   ══════════════════════════════════════ */
.layout-sidebar {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    grid-template-areas:
        "main-content"
        "sidebar";
}

@media (min-width: 768px) {
    .layout-sidebar {
        grid-template-columns: 1fr 280px;
        grid-template-areas:
            "main-content sidebar";
    }
}

@media (min-width: 1024px) {
    .layout-sidebar {
        grid-template-columns: 1fr 320px;
    }
}

.layout-sidebar>.sidebar-area {
    grid-area: sidebar;
}

.layout-sidebar>.main-area {
    grid-area: main-content;
}

/* ══════════════════════════════════════
   5. LAYOUT HERO (landing, login)
   (form / hero centralizado)
   ══════════════════════════════════════ */
.layout-hero {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 80px);
    padding: clamp(24px, 5vw, 80px) 0;
}

/* ══════════════════════════════════════
   6. GRID ADAPTATIVO DE CARDS
   ══════════════════════════════════════ */
.cards-grid {
    display: grid;
    gap: clamp(12px, 2.5vw, 24px);
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/* Variantes */
.cards-grid-sm {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}

.cards-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

/* ══════════════════════════════════════
   7. DAILY HUB — grid-template-areas
   ══════════════════════════════════════ */

/* Mobile (padrão) — coluna única */
.hub-layout {
    display: grid;
    gap: clamp(12px, 2vw, 20px);
    grid-template-columns: 1fr;
    grid-template-areas:
        "weather"
        "news"
        "movies"
        "youtube"
        "holidays"
        "nasa";
}

/* Tablet (≥ 600px) — 2 colunas */
@media (min-width: 600px) {
    .hub-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "weather  weather"
            "news     news"
            "movies   movies"
            "youtube  holidays"
            "nasa     nasa";
    }
}

/* Desktop (≥ 1024px) — 3 colunas */
@media (min-width: 1024px) {
    .hub-layout {
        grid-template-columns: 1fr 1.3fr 1fr;
        grid-template-areas:
            "weather  news     movies"
            "weather  youtube  holidays"
            "nasa     nasa     nasa";
    }
}

/* Áreas nomeadas dos cards do hub */
.hub-area-weather {
    grid-area: weather;
}

.hub-area-news {
    grid-area: news;
}

.hub-area-movies {
    grid-area: movies;
}

.hub-area-youtube {
    grid-area: youtube;
}

.hub-area-holidays {
    grid-area: holidays;
}

.hub-area-nasa {
    grid-area: nasa;
}

/* ══════════════════════════════════════
   8. DOWNLOADS PAGE
   ══════════════════════════════════════ */
.downloads-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    grid-template-areas:
        "dl-header"
        "dl-content";
}

@media (min-width: 768px) {
    .downloads-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "dl-header  dl-header"
            "dl-content dl-content";
    }
}

/* ══════════════════════════════════════
   9. BLOG — grid de posts
   ══════════════════════════════════════ */
.blog-posts-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ══════════════════════════════════════
   10. UTILITÁRIOS RESPONSIVOS
   ══════════════════════════════════════ */

/* Visibilidade */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .show-mobile-flex {
        display: flex !important;
    }

    .show-mobile-grid {
        display: grid !important;
    }
}

.hide-tablet {
    display: block;
}

.show-tablet {
    display: none;
}

@media (min-width: 600px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }

    .show-tablet {
        display: block !important;
    }
}

/* Texto */
@media (max-width: 480px) {
    .text-center-mobile {
        text-align: center !important;
    }

    .w-full-mobile {
        width: 100% !important;
    }

    .stack-mobile {
        flex-direction: column !important;
    }

    .gap-mobile-sm {
        gap: 8px !important;
    }
}

/* Espaçamento */
@media (max-width: 767px) {
    .p-mobile-sm {
        padding: 12px !important;
    }

    .no-margin-mobile {
        margin: 0 !important;
    }
}

/* Imagens */
img {
    max-width: 100%;
    height: auto;
}

/* ══════════════════════════════════════
   11. ANIMAÇÕES GLOBAIS
   (modal slide-up — usado em hub.html)
   ══════════════════════════════════════ */
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ══════════════════════════════════════
   12. CORREÇÕES CRÍTICAS DE OVERFLOW
   ══════════════════════════════════════ */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Previne elementos maiores que a tela */
*:not(iframe):not(.movie-modal-overlay):not(.movie-modal-card) {
    max-width: 100%;
}

/* Tables responsivas */
table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

/* Formulários fluidos */
input,
textarea,
select,
button {
    max-width: 100%;
}