/* ════════════════════════════════════════════════════════════
   GP Tienda — Layouts de frontend (motores de estructura)
   Reutilizan las CSS vars de gpt.css (--gpt-*). No tocan el JS:
   conservan .gpt-card / .gpt-add / .gpt-dias-input.
   - gpt-eng-clasico : default (definido en gpt.css)
   - gpt-eng-magazine: mosaico bento + tipografía editorial
   - gpt-eng-vitrina : filas horizontales (lista showcase)
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   MAGAZINE — bento / editorial
───────────────────────────────────────────── */
.gpt-eng-magazine .gpt-sec-title {
    font-size: 30px; font-weight: 800; letter-spacing: -.03em;
    border-bottom: 3px solid var(--gpt-primary); display: inline-block; padding-bottom: 6px;
}
.gpt-eng-magazine .gpt-hero h1 { font-size: clamp(34px, 6vw, 60px); letter-spacing: -.03em; }

/* grid bento: filas densas; la card destacada ocupa 2x2 */
.gpt-eng-magazine .gpt-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 1fr;
    grid-auto-flow: row dense;
}
.gpt-eng-magazine .gpt-card--feat {
    grid-column: span 2; grid-row: span 2;
}
.gpt-eng-magazine .gpt-card--feat .gpt-card-media { aspect-ratio: auto; height: 100%; min-height: 240px; }
.gpt-eng-magazine .gpt-card--feat .gpt-card-name { font-size: 22px; }
.gpt-eng-magazine .gpt-card--feat .gpt-card-desc { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.gpt-eng-magazine .gpt-card { overflow: hidden; }
.gpt-eng-magazine .gpt-card-media { transition: transform .4s ease; }
.gpt-eng-magazine .gpt-card:hover .gpt-card-media { transform: scale(1.04); }
.gpt-eng-magazine .gpt-card-name { font-weight: 800; letter-spacing: -.01em; }
.gpt-eng-magazine .gpt-card-badge { background: var(--gpt-primary); }

@media (max-width: 720px) {
    .gpt-eng-magazine .gpt-card--feat { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 520px) {
    .gpt-eng-magazine .gpt-grid { grid-template-columns: 1fr 1fr; }
    .gpt-eng-magazine .gpt-card--feat { grid-column: span 2; }
}

/* ─────────────────────────────────────────────
   VITRINA — filas horizontales (lista showcase)
───────────────────────────────────────────── */
.gpt-eng-vitrina .gpt-grid {
    grid-template-columns: 1fr;          /* una columna: filas anchas */
    gap: var(--gpt-gap);
}
.gpt-eng-vitrina .gpt-featured .gpt-grid {
    grid-template-columns: 1fr 1fr;       /* destacados en 2 columnas */
}
.gpt-eng-vitrina .gpt-card {
    flex-direction: row;                  /* imagen izq + info der */
    align-items: stretch;
}
.gpt-eng-vitrina .gpt-card-media {
    flex: 0 0 38%; max-width: 320px; aspect-ratio: auto; min-height: 180px;
}
.gpt-eng-vitrina .gpt-card-body {
    flex: 1; justify-content: center; padding: 22px 26px;
}
.gpt-eng-vitrina .gpt-card-name { font-size: 20px; }
.gpt-eng-vitrina .gpt-card-desc { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.gpt-eng-vitrina .gpt-card-foot { margin-top: 12px; }
.gpt-eng-vitrina .gpt-card-price { font-size: 22px; }
.gpt-eng-vitrina .gpt-add { padding: 10px 22px; font-size: 14px; }

/* en vitrina, el destacado de magazine no aplica spans */
.gpt-eng-vitrina .gpt-card--feat { grid-column: auto; grid-row: auto; }

@media (max-width: 760px) {
    .gpt-eng-vitrina .gpt-featured .gpt-grid { grid-template-columns: 1fr; }
    .gpt-eng-vitrina .gpt-card { flex-direction: column; }
    .gpt-eng-vitrina .gpt-card-media { flex: none; max-width: none; width: 100%; aspect-ratio: 4/3; }
}