/* responsive-fix.css (2025-12-21)
   Small overrides to fix layout issues on narrow screens and prevent empty gaps.
*/

/* Make fixed-width containers fluid ONLY on narrower screens.
   On desktop, keep the base fixed-width layout from styles.min.css.
*/
@media only screen and (max-width: 1200px) {
    .container-fluid,
    .container-fluid-980,
    .container-fluid-1200,
    .content {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        /* Keep a consistent “gutters” padding on narrow screens */
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    .container-fluid,
    .content {
        max-width: 1140px;
    }

    .container-fluid-980 {
        max-width: 980px;
    }

    .container-fluid-1200 {
        max-width: 1200px;
    }

    /* Common fixed-width helpers used on articles. */
    .article__w.w940,
    .share__w {
        width: 100%;
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* Extra attention: custom.css forces a fixed 940px wrapper for the homepage
       publications block: `.article-more.mt40 .article-items-wrapper { width: 940px; }`
       On smaller viewports this causes cards to sit too close to the edges.
    */
    .article-more.mt40 .article-items-wrapper {
        width: 100% !important;
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
}

/* Fix “two cards + huge empty middle” on homepage/blog lists. */
.news-list .article-items-wrapper {
    justify-content: center;
    gap: 30px;
}

/* Homepage "Нові публікації": keep text aligned with preview image at all widths.
   Base CSS centers images inside a fixed-height wrapper; when images have different
   intrinsic sizes this makes the content appear misaligned.
*/
.news-list .article-items-wrapper .article-item .img-wrapper {
    display: block;
    height: 220px;
    overflow: hidden;
}

.news-list .article-items-wrapper .article-item .img-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 767px) {
    .news-list .article-items-wrapper {
        justify-content: center;
    }
}

/* Fix broken 2-column grids in mobile dropdowns (levels/categories).
   The base CSS uses `space-between`, which can create huge gaps on some widths.
*/
.static-fixed-top_mobile .static-levels-switcher .dropdown-menu ul,
.static-fixed-top_mobile .static-categ-switcher .dropdown-menu ul {
    justify-content: center;
    gap: 12px;
}

/* Category pages: keep the header (incl. search icon) clickable/visible.
    Some category top blocks can overlap the header area.
*/
header.header {
	position: relative;
	z-index: 50;
}

.category-levels.content-top-block {
	position: relative;
	z-index: 1;
}

/* Hover preview: never exceed viewport width.
    Horizontal positioning is clamped via templates/default/js/preview-clamp.js
*/
.img-preview {
	max-width: calc(100vw - 16px);
}

/* =============================================
   TABLET FIX: Grade cards grid (Малюки, Дошкільнята, etc.)
   The base CSS uses space-between which creates a visible gap.
   ============================================= */

/* Make the grades wrapper use gap instead of space-between */
.category-grades .grades__w {
    justify-content: center;
    gap: 20px;
}

/* Ensure grade cards (levels) fill available space nicely on tablet */
.category-grades .grades-group .level {
    width: 100%;
}

/* Category pages: keep 2-column layout from 600px and up.
   Some base breakpoints around ~1024–1366 can revert to 1 column.
*/
@media only screen and (min-width: 600px) {
    .category-grades .grades__w {
        /* Use grid to make a stable 2-column layout across tablet/desktop,
           regardless of base flex/width overrides in styles/custom CSS. */
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
    }

    .category-grades .grades-group {
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .category-grades .grades-group.whole-row,
    .category-grades .grades-group.grades-group-books {
        grid-column: 1 / -1;
    }

    /* If there's only one block on the page, make it span full width
       (otherwise the second column looks like an empty gap). */
    .category-grades .grades__w > .grades-group:not(.whole-row):not(.grades-group-books):only-child {
        grid-column: 1 / -1;
    }

    /* TaskCategLevel_1: when the grade-group spans full width (whole-row),
       the template JS splits tasks into .tasks__w.j-first and .tasks__w.j-second.
       Make those wrappers render as 2 columns at 600px+.
    */
    .category-grades .grades-group.whole-row .level-tasks:not(.level-tasks-books) {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }

    .category-grades .grades-group.whole-row .level-tasks:not(.level-tasks-books) .tasks__w {
        flex: 1 1 0;
        min-width: 0;
    }

    .category-grades .grades-group.whole-row .level-tasks:not(.level-tasks-books) .tasks__w.j-second {
        display: block !important;
    }
}

/* Category pages (Option B): keep ONLY 2 columns total on the page from 600px+.
   The page already shows two sections side-by-side, so each section should stay
   single-column internally (otherwise it looks like 4 columns).
   We do this by hiding the secondary task column and letting the main one fill.
   Scope narrowly and do not touch books lists or full-row blocks.
*/
@media only screen and (min-width: 600px) {
    .category-grades .grades-group:not(.whole-row) .level-tasks:not(.level-tasks-books) .tasks__w.j-second {
        display: none !important;
    }

    .category-grades .grades-group:not(.whole-row) .level-tasks:not(.level-tasks-books) .tasks__w.j-first {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Smaller tablets / large phones: single column */
@media only screen and (max-width: 599px) {
    .category-grades .grades-group,
    .category-grades .grades-group:not(.whole-row) {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* =============================================
   HOMEPAGE FIX: Category cards (Малюки, Дошкільнята, etc.)
   At ~1060px only 2 cards fit but they left-align with gap on right.
   ============================================= */

/* Center the cards wrapper and use gap instead of margin */
.index-categories .categories-wrapper {
    justify-content: center;
    gap: 24px;
}

/* Remove original margins since we use gap now */
.index-categories .categories-wrapper .category {
    margin: 0;
}

/* First row top margin */
.index-categories .categories-wrapper {
    margin-top: 30px;
    row-gap: 30px;
}

/* Tablet: 2 columns, cards should be flexible width */
@media only screen and (min-width: 768px) and (max-width: 1139px) {
    .index-categories .categories-wrapper {
        gap: 20px;
        row-gap: 24px;
    }
    
    .index-categories .categories-wrapper .category {
        width: calc(50% - 12px);
        max-width: 360px;
        flex: 0 0 calc(50% - 12px);
    }
}

/* Large tablet / small desktop: 3 columns */
@media only screen and (min-width: 1140px) {
    .index-categories .categories-wrapper .category {
        width: 360px !important;
        max-width: 360px;
        flex: 0 0 360px !important;
    }
}

/* Phone: single column */
@media only screen and (max-width: 767px) {
    .index-categories .categories-wrapper .category {
        width: 100%;
        max-width: 360px;
        flex: 0 0 100%;
    }
}

/* =============================================
   Blog/News cards grids (incl. "Нові публікації")
   Center leftover cards on tablet and avoid huge empty space.
   Scope to .article-more to avoid affecting unrelated flex grids.
   ============================================= */

.article-more .article-items-wrapper {
    justify-content: center;
    /* Prefer consistent spacing over `space-between` gaps */
    gap: 30px;
}

.article-more .article-items-wrapper .article-item {
    flex: 0 0 320px;
    max-width: 320px;
    /* Prevent subtle overflow when padding/borders exist in base CSS */
    box-sizing: border-box;
}

/* Extra attention: keep card media/text widths in sync.
   Some breakpoints render the image narrower than the text container.
*/
.article-more .article-items-wrapper .article-item img {
    max-width: 100%;
    height: auto;
}

/* Tablet: 2 columns centered */
@media only screen and (min-width: 768px) and (max-width: 1139px) {
    .article-more .article-items-wrapper .article-item {
        flex: 0 0 calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
}

/* Desktop: 3 columns */
@media only screen and (min-width: 1140px) {
    .article-more .article-items-wrapper .article-item {
        flex: 0 0 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
}

/* Phone: single column */
@media only screen and (max-width: 767px) {
    .article-more .article-items-wrapper .article-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =============================================
   "Наші переваги" (Our Advantages) section
   space-between causes gaps at intermediate widths
   ============================================= */

.advantages .blocks__w {
    justify-content: center;
    gap: 24px;
}

/* Prevent overlap on tablet: base CSS sets fixed height: 760px. */
@media only screen and (max-width: 1139px) {
    .advantages {
        height: auto !important;
        padding-bottom: 60px;
    }
}

/* =============================================
   MONOTONIC LAYOUT: homepage category cards
   Avoid 1→2→3→2→3 flicker around 765–1024px caused by mixed breakpoints
   across styles.min / styles_mobile.min. Grid auto-fit only increases columns
   as the viewport grows.
   ============================================= */

.index-categories .categories-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
    justify-content: center;
    gap: 24px;
    row-gap: 30px;
    margin-top: 30px;
}

/* Desktop: keep a stable 3-column layout */
@media only screen and (min-width: 1140px) {
    .index-categories .categories-wrapper {
        grid-template-columns: repeat(3, minmax(300px, 360px));
    }
}

.index-categories .categories-wrapper .category {
    width: auto !important;
    max-width: 360px;
    margin: 0 !important;
    flex: initial !important;
}

@media only screen and (max-width: 767px) {
    .index-categories .categories-wrapper {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .index-categories .categories-wrapper .category {
        width: 100% !important;
        max-width: 360px;
    }
}

/* Keep homepage hero images proportional (avoid stretched img when height is constrained by breakpoint CSS). */
.index-banner .sliders-wrapper .img img,
.index-banner .sliders-wrapper .img.t1 img,
.index-banner .sliders-wrapper .img.t2 img,
.index-banner .sliders-wrapper .img.t23 img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.advantages .block {
    flex: 0 0 320px;
    width: 320px;
}

/* Tablet: 2 or 3 blocks depending on space */
@media only screen and (min-width: 768px) and (max-width: 1139px) {
    .advantages .blocks__w {
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .advantages .block {
        flex: 0 0 calc(50% - 12px);
        width: calc(50% - 12px);
        max-width: 360px;
    }
}

/* Large desktop: 3 columns */
@media only screen and (min-width: 1140px) {
    .advantages .block {
        flex: 0 0 360px;
        width: 360px;
    }
}

/* Phone: single column */
@media only screen and (max-width: 767px) {
    .advantages .blocks__w {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .advantages .block {
        flex: 0 0 100%;
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}