/* =============================================================
   TELMIN & ENEIDA PRIVATE COLLECTION
   styles_tablet.css — Estilos exclusivos para TABLET (769px – 1024px)

   ATENÇÃO: altere SOMENTE aqui para ajustar layout tablet.
   Desktop → styles_desktop.css
   Mobile  → styles_mobile.css
   ============================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  /* ── Hero ─────────────────────────────────────────────────── */
  .hero {
    height: 18vh;
    min-height: 158px;
  }

  .hero-content { gap: 8px; }
  .logo-te { width: 68px; height: 68px; }

  /* ── Controles ────────────────────────────────────────────── */
  .controls-container { padding: 4px 16px 0; }
  .stats-bar { padding: 1px 0; }

  .controls-top {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    margin-top: 2px;
  }

  .search-box {
    flex: 0 0 auto;
    width: 100%;
    max-width: 480px;
  }

  /* Todos os menus em linha única */
  .combined-menu {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    row-gap: 0;
    width: 100%;
  }

  .menu-item { padding-bottom: 8px; }

  /* LANÇAMENTO: 3 colunas no tablet, TODOS span all */
  #submenu-anos {
    columns: 3;
    column-gap: 0;
    width: 210px;
  }

  #submenu-anos > div { break-inside: avoid; }
  #submenu-anos > div:first-child { column-span: all; }

  /* Modo grid/lista: oculto no tablet */
  .view-mode { display: flex; gap: 6px; }

  .shuffle-btn, .shuffle-history-btn { font-size: 0.85em; }

  /* ── Controles sticky + Linha Dourada 3 ─────────────────────
     Igual ao desktop: controles grudam abaixo do header ao rolar.
     gallery-section::before desativado — border-bottom dos controles assume. */
  .controls {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-controls);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--gold-primary);
  }

  .gallery-section::before { display: none; }

  /* ── Galeria ─────────────────────────────────────────────── */
  .gallery-section { padding: 20px 16px 30px; }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .pen-image { height: 200px; }
  .pen-card .pen-details { display: grid; }
  .pen-card .pen-description { display: none; }

  .pen-card .pen-year {
    display: block;
    margin-top: 6px;
    margin-bottom: 8px;
  }

  .pen-badge { font-size: 0.68em; padding: 4px 8px; }

  /* ── Modal ───────────────────────────────────────────────── */
  .modal-content { max-height: 92vh; }

  .modal-carousel .mc-frame {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .modal-carousel .mc-img { touch-action: none; }

  /* ── Lista de Desejos: tablet ────────────────────────────── */
  .wl-export-icon { display: none; }

  .wishlist-panel {
    width: min(480px, 88vw);
    max-height: 78vh;
  }

} /* fim @media tablet */


/* ── Landscape tablet ─────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {

  /* header permanece sticky — necessário para o sticky dos controles funcionar */
  .hero { height: auto; min-height: 140px; padding-top: 16px; padding-bottom: 16px; }
  .gallery-section { padding-top: 16px; }
  .pen-card .pen-description { display: none; }

  .controls-container,
  .gallery-section { padding-left: 12px; padding-right: 12px; max-width: 100%; }

} /* fim @media landscape tablet */