/**
 * Homepage Hero — Featured + Hub Tiles
 * Split from homepage.css for performance
 *
 * @package MyChooz_Aesthetic
 */

/* ═══════════════════════════════════════════════════════════════
   FEATURED (full-bleed, no island)
   ═══════════════════════════════════════════════════════════════ */

.hp-featured {
    padding: 24px 0;
    margin-bottom: var(--hp-section-gap);
}

/* ═══════════════════════════════════════════════════════════════
   HUB TILES - Mobile: edge-to-edge, Desktop: island
   ═══════════════════════════════════════════════════════════════ */

.hp-hub {
    background: var(--hp-island-bg);
    border-top: 1px solid var(--hp-island-border);
    border-bottom: 1px solid var(--hp-island-border);
    box-shadow: var(--hp-island-shadow);
    padding: 16px;
    margin: 0 0 var(--hp-section-gap);
}

.hp-hub .hp-container {
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP — island
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    .hp-hub {
        border: 1px solid var(--hp-island-border);
        border-radius: var(--hp-island-radius);
        padding: var(--hp-island-padding);
        margin: 0 20px var(--hp-section-gap);
        max-width: calc(1200px - 40px);
        margin-left: auto;
        margin-right: auto;
    }
}