@layer pages {
/* ================================================
   HOME PAGE
   Layout, composicoes e secoes especificas da Home.
   ================================================ */

.category-tabs-floating {
  margin-block: -20px;
}

.home-hub {
  padding-block-start: 0;
  margin-block-start: calc(-1 * (var(--space-04) + var(--space-01)));
}

.home-hub .section-header {
  margin-bottom: 4px;
}

.home-hub .section-title {
  margin: 0 0 4px;
}

/* ================================================
   FEATURED ARTICLE ASIDE (.home-aside)
   Container independente flutuante à direita que cobre TODAS as sections
   abaixo dele. Padrão clássico de layout de revista: sections em paralelo
   à aside ficam estreitas e auto-fill encaixa ~4 cards por fileira; sections
   abaixo do final da aside expandem naturalmente para largura cheia e
   auto-fill encaixa ~6 cards.

   Em mobile/tablet (≤1024px) o float é cancelado: aside vira bloco
   full-width logo antes das sections.
   ================================================ */

/* Wrapper das sections + aside. `flow-root` cria um Block Formatting
   Context que contém o float da .home-aside (sem isso o float "escaparia"
   pra fora do .home-hub, que é flex container e anula floats). */
.home-feed-wrap {
  display: flow-root;
}

.home-feed-wrap > section + section {
  margin-top: var(--space-06);
}

.home-aside {
  float: right;
  width: clamp(300px, 25%, 420px);

  /* margin-top: compensa a altura do header + gap até a videos-grid da
     primeira section, alinhando o topo da aside com o topo dos cards de
     vídeo. Cálculo: h2 (~29px) + ::after underline (9px) + collapse-margin
     entre header e videos-grid (~18px) ≈ 56px. */
  margin: calc(var(--space-07) + var(--space-02)) 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.featured-article-rotator {
  display: flex;
  flex-direction: column;
  position: relative;
}

.featured-article-rotator__slides {
  position: relative;
}

.featured-article-rotator__slide {
  display: none;
}

.featured-article-rotator__slide.is-active {
  display: block;
}

.featured-article-rotator__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 2px;
}

.featured-article-rotator__dot {
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--rotator-dot-border);
  background: var(--rotator-dot-bg);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.featured-article-rotator__dot:hover {
  background: var(--rotator-dot-bg-hover);
  border-color: var(--rotator-dot-border-hover);
  transform: scale(1.15);
}

.featured-article-rotator__dot.is-active {
  background: var(--btn-ai-bg);
  border-color: transparent;
  width: 22px;
  border-radius: 4px;
}

@media (width <= 1024px) {
  .home-aside {
    float: none;
    width: auto;
    margin: 0 0 24px;
  }
}

/* ================================================
   HOME HERO + TOOLS GRID LAYOUT
   ================================================ */

/* ----- Coluna de guias: empilha dois cards preenchendo a altura do carousel ----- */

.home-guides-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

/* ----- Card individual de guia ----- */

.home-guide-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--liquid-card-bg);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--liquid-card-border);
  border-top-color: var(--liquid-card-border-top);
  box-shadow: var(--liquid-card-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.home-guide-card:hover {
  transform: translateY(-3px);
  border-color: var(--liquid-card-border-hover);
  box-shadow: var(--liquid-card-shadow-hover);
}

.home-guide-card__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}

.home-guide-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mosaico de thumbnails (sem thumbnail própria) — mesma lógica de /guides */

.home-guide-card__thumb .guide-card-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
}

/* imgs herdam width/height/object-fit de .home-guide-card__thumb img */

.home-guide-card__thumb .guide-card-mosaic[data-count="1"] {
  grid-template-columns: 1fr;
}

.home-guide-card__thumb .guide-card-mosaic[data-count="2"] {
  grid-template-columns: 1fr 1fr;
}

.home-guide-card__thumb .guide-card-mosaic[data-count="3"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.home-guide-card__thumb .guide-card-mosaic[data-count="3"] > :first-child {
  grid-row: 1 / -1;
}

.home-guide-card__thumb .guide-card-mosaic[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.home-guide-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgb(108 92 231 / 20%) 0%, rgb(179 136 255 / 10%) 100%);
  color: rgb(179 136 255 / 60%);
}

.home-guide-card__thumb-placeholder svg {
  width: 32px;
  height: 32px;
}

.home-guide-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #fff;
  background: rgb(108 92 231 / 85%);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  padding: 2px 7px;
}

.home-guide-card__body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.home-guide-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-guide-card__excerpt {
  font-size: 0.75rem;
  color: var(--text-secondary, rgb(200 190 220 / 75%));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-guide-card__cta {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--guide-cta-color);
  transition: color 0.2s ease;
  margin-top: 1px;
}

.home-guide-card:hover .home-guide-card__cta {
  color: var(--guide-cta-color-hover);
}

.home-hero-section {
    width: 100%;
    padding: 0;
    margin-block-start: calc(var(--space-05) * -1);
    position: relative;
    z-index: 2;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: 1fr 220px 280px;
    gap: 16px;
    align-items: stretch;
}

.home-hero-main {
    min-width: 0;
}

/* Hero com borda neon roxa e glow pulsante */
.home-hero-main .hero-carousel-section {
    margin-bottom: 0;
    width: 100%;
    border: 2px solid rgb(179 136 255 / 50%);
    box-shadow:
        0 0 15px rgb(179 136 255 / 20%),
        0 8px 40px rgb(0 0 0 / 60%);
    transition: all 0.3s ease;
}

.home-hero-main .hero-carousel-section:hover {
    border-color: var(--neon-purple);
    box-shadow:
        0 0 25px rgb(179 136 255 / 40%),
        0 12px 50px rgb(0 0 0 / 70%);
}

/* Grid de Ferramentas 2x3 */
.home-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* ================================================
   UI/UX 2026: KEYFRAMES
   ================================================ */
@keyframes glow-pulse {
    0%,
    100% {
        filter: drop-shadow(0 0 5px currentcolor);
    }

    50% {
        filter: drop-shadow(0 0 15px currentcolor);
    }
}

/* Estilo Liquid Glass 2026 */
.home-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 20px;

    /* Liquid Glass Effect — temável via tokens (var(--liquid-card-*)). */
    background: var(--liquid-card-bg);
    backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--liquid-card-border);
    border-top-color: var(--liquid-card-border-top);
    box-shadow: var(--liquid-card-shadow);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.home-tool-card:hover {
    background: var(--liquid-card-bg-hover);
    transform: translateY(-5px);
    border-color: var(--liquid-card-border-hover);
    box-shadow:
        var(--liquid-card-shadow-hover),
        0 0 0 1px var(--card-glow-color, var(--liquid-card-inner-glow));
}

/* Tactile Feedback - Squishy Button 2026 */
.home-tool-card:active {
    transform: scale(0.95) translateY(2px);
    box-shadow: 0 2px 12px rgb(0 0 0 / 40%);
    transition: all 0.1s ease;
}

/* Efeito de brilho interno no hover */
.home-tool-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgb(255 255 255 / 10%) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.home-tool-card:hover::after {
    opacity: 1;
}

.home-tool-card svg {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 0 5px currentcolor);

    /* Glow nativo do ícone */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.home-tool-card:hover svg {
    transform: scale(1.15) rotate(5deg);
    animation: glow-pulse 1.5s ease-in-out infinite;
}

.home-tool-card span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Cores Nano Banana (Reference Match) */

/* 1. Arsenal - Vermelho Neon */
.home-tool-card:nth-child(1) {
    --card-glow-color: rgb(255 77 77 / 60%);
}

.home-tool-card:nth-child(1) svg {
    color: #ff4d4d;
}

/* 2. Calc - Ciano Neon */
.home-tool-card:nth-child(2) {
    --card-glow-color: rgb(0 224 255 / 60%);
}

.home-tool-card:nth-child(2) svg {
    color: #00e0ff;
}

/* 3. Projects - Roxo Índigo */
.home-tool-card:nth-child(3) {
    --card-glow-color: rgb(108 92 231 / 60%);
}

.home-tool-card:nth-child(3) svg {
    color: #6c5ce7;
}

/* 4. Guides - Amarelo Ouro */
.home-tool-card:nth-child(4) {
    --card-glow-color: rgb(255 211 42 / 60%);
}

.home-tool-card:nth-child(4) svg {
    color: #ffd32a;
}

/* 5. Inventory - Verde Neon */
.home-tool-card:nth-child(5) {
    --card-glow-color: rgb(11 232 129 / 60%);
}

.home-tool-card:nth-child(5) svg {
    color: #0be881;
}

/* 6. FAQ - Rosa Neon */
.home-tool-card:nth-child(6) {
    --card-glow-color: rgb(255 107 129 / 60%);
}

.home-tool-card:nth-child(6) svg {
    color: #ff6b81;
}

/* Tablet: carousel + guide em cima, tools largura total */
@media (width <= 968px) {
    .home-hero-grid {
        grid-template-columns: 1fr 220px;
        grid-template-rows: auto auto;
    }

    .home-hero-main {
        grid-column: 1;
        grid-row: 1;
    }

    .home-guides-column {
        grid-column: 2;
        grid-row: 1;
        height: auto;
    }

    .home-guide-card {
        min-height: 140px;
    }

    .home-tools-grid {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Tablet pequeno: coluna única */
@media (width <= 680px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-guides-column {
        grid-column: 1;
        grid-row: auto;
        height: auto;
    }

    .home-guide-card {
        min-height: 160px;
    }

    .home-tools-grid {
        grid-column: 1;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile: 2 colunas */
@media (width <= 480px) {
    .home-hero-section {
        padding: 0 8px;
    }

    .home-tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .home-tool-card {
        padding: 16px 12px;
    }
}

/* ================================================
   SHORTS HORIZONTAL GRID (Home Page)
   ================================================ */

.shorts-home-section .section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.shorts-home-section .section-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgb(255 255 255 / 5%);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 24px;
    color: var(--text-secondary, #e4dcf7);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.shorts-home-section .section-link:hover {
    background: var(--neon-pink, #f6c);
    border-color: var(--neon-pink, #f6c);
    color: white;
    box-shadow: 0 0 20px rgb(255 102 204 / 40%);
    transform: translateY(-2px);
    text-decoration: none;
}

.shorts-horizontal-grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-tertiary, #444) transparent;
    -webkit-overflow-scrolling: touch;
}

.shorts-horizontal-grid::-webkit-scrollbar {
    height: 6px;
}

.shorts-horizontal-grid::-webkit-scrollbar-track {
    background: transparent;
}

.shorts-horizontal-grid::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary, #444);
    border-radius: 3px;
}

.short-home-card {
    flex: 0 0 auto;
    width: 140px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.short-home-card:hover {
    transform: scale(1.03);
}

.short-home-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary, #1a1a2e);
}

.short-home-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.short-home-thumb .short-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
    text-shadow: 0 2px 8px rgb(0 0 0 / 50%);
}

.short-home-card:hover .short-play-icon {
    opacity: 1;
}

.short-home-thumb .short-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgb(0 0 0 / 70%);
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.short-home-thumb .ad-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgb(255 193 7 / 90%);
    color: black;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.short-home-title {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Native Ad styling in Home shorts grid */
.short-home-card.short-native-ad .short-home-thumb {
    border: 2px solid rgb(255 193 7 / 40%);
}

@media (width <= 768px) {
    .short-home-card {
        width: 120px;
    }

    .shorts-home-section .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .shorts-home-section .section-link {
        margin-left: 0;
    }
}

@media (width <= 768px) {
    .homepage-layout {
        flex-direction: column;
    }

    .homepage-sidebar {
        display: none;
    }

    .hero-section {
        padding: 24px 16px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }
}

}