/**
 * Homepage Posts — Latest Publications Island
 * Split from homepage.css for performance
 *
 * @package MyChooz_Aesthetic
 */

/* ═══════════════════════════════════════════════════════════════
   LATEST POSTS - Mobile: edge-to-edge, Desktop: island
   → Card styles in: components/article-card.css
   ═══════════════════════════════════════════════════════════════ */

.hp-posts {
    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-posts .hp-container {
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   COMBINED ISLAND — hp-featured + hp-posts делят белый фон
   Featured — верх, posts — низ. Граница между ними скрыта.
   ═══════════════════════════════════════════════════════════════ */

.hp-featured {
    background: var(--hp-island-bg);
    border-top: 1px solid var(--hp-island-border);
    border-left: 1px solid var(--hp-island-border);
    border-right: 1px solid var(--hp-island-border);
    box-shadow: none;
    /* padding-bottom 16px — гарантированно показывает тень нижнего ряда hp-fc */
    padding: 16px 16px 16px;
    /* Отступ от хедера — как у hp-hub/hp-posts через section-gap */
    margin: var(--hp-section-gap) 0 0;
}

/* Совпадение боковых отступов с hp-posts — убираем дефолтный padding hp-container */
.hp-featured .hp-container {
    padding: 0;
}

.hp-featured + .hp-posts {
    border-top: none;
    margin-top: 0;
    /* featured pb 16 уже обеспечивает gap — posts top padding 0 */
    padding-top: 0;
}

/* Mobile: единый шаг gap 18px в обоих гридах */
@media (max-width: 768px) {
    .hp-posts__grid:not(.wp-block-query) {
        gap: 18px !important;
    }
    .hp-featured + .hp-posts {
        padding-top: 0;
    }
}

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

@media (min-width: 769px) {
    .hp-posts {
        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;
    }

    .hp-featured {
        border-radius: var(--hp-island-radius) var(--hp-island-radius) 0 0;
        padding: var(--hp-island-padding) var(--hp-island-padding) 18px;
        max-width: calc(1200px - 40px);
        margin: var(--hp-section-gap) auto 0;
    }

    .hp-featured + .hp-posts {
        border-radius: 0 0 var(--hp-island-radius) var(--hp-island-radius);
        border-top: none;
        margin-top: 0;
        /* featured pb 18 обеспечивает gap между островами */
        padding-top: 0;
    }
}