/* =========================================================
   Skitts – Responsive Desktop Gutters
   =========================================================
   Widens the side gutters inside the theme's containers on desktop so
   content no longer runs almost edge-to-edge on laptop-sized screens.
   The parent theme's 1540px max-widths are NOT changed.

   Tune:   edit --skitts-gutter below.
   Revert: remove the "skitts-gutters" enqueue in the child functions.php.

   Selectors match (or only just exceed) the parent theme's specificity, so
   more specific overrides, e.g. the homepage hero cards and the
   .rep-content-list header, keep working. No !important is used.
   ========================================================= */

@media (min-width: 1200px) {

    :root {
        --skitts-gutter: clamp(16px, 4vw, 64px);
        /* Parent theme variable, used by .rep-content-list--style-1 */
        --art-container-padding: 0 var(--skitts-gutter);
    }

    /* ---------------------------------------------------------
       1. Content containers (page content, footer, property archive)
       --------------------------------------------------------- */

    .container,
    .art-container,
    .art-property-slider .art-container,
    .property-archive-container,
    .saved-searches-container,
    .page-image-sidebar-content,
    .art-module-multi-content-container,
    .rep-cta__content-wrapper,
    .gr-container,
    .hero-text-img-content {
        padding-left: var(--skitts-gutter);
        padding-right: var(--skitts-gutter);
    }

    /* Nested containers keep the theme's original 15px so the gutter isn't doubled */
    :where(.container, .art-container, .property-archive-container) :is(.container, .art-container, .property-archive-container) {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Intentionally narrow layouts (970px blog, 1240px team listing) already sit
       well inside the viewport, so they keep the theme's original 15px */
    .container.container-blog,
    .container.skitts-team-container,
    .container-blog.single_block .art-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* ...except the blog layout with sidebar, which uses the full 1540px */
    .single-post-sidebar-list .container-blog.single_block .art-container {
        padding-left: var(--skitts-gutter);
        padding-right: var(--skitts-gutter);
    }

    /* CTA image/text style 3: content box is offset by margin rather than padding */
    .rep-cta-img-txt-module--s3 .rep-cta-img-txt__content {
        margin-left: var(--skitts-gutter);
    }

    /* Modern slider arrows: keep the theme's extra 10px on the right */
    .art-slider--modern-navigation {
        padding-left: var(--skitts-gutter);
        padding-right: calc(var(--skitts-gutter) + 10px);
    }

    /* ---------------------------------------------------------
       2. Header
       The top bar sits inside .nav-container, so the gutter goes on the
       inner rows rather than .nav-container to avoid doubling it.
       --------------------------------------------------------- */

    .top-nav .header-centered,
    .top-navbar-inner-container {
        padding-left: var(--skitts-gutter);
        padding-right: var(--skitts-gutter);
    }

    /* Header Two / Three pad .nav-container itself */
    .top-nav .nav-container:has(> .header-two, > .header-three) {
        padding-left: var(--skitts-gutter);
        padding-right: var(--skitts-gutter);
    }

    /* ---------------------------------------------------------
       3. Property search (filter style 3)
       The grey bands stay full width; their side padding is removed so the
       gutter is applied once, on the inner 1540px rows. The bands are styled
       by an inline <style> in search-form-3.php, hence the extra class.
       --------------------------------------------------------- */

    .art-property-search-filter-container.art-property-search-filter-3 .art-property-search-filter-title-wrapper,
    .art-property-search-filter-container.art-property-search-filter-3 .art-property-search-form-container {
        padding-left: 0;
        padding-right: 0;
    }

    .art-property-search-filter-3 .art-property-search-filter-title,
    .art-property-search-filter-3 .art-property-action-bar,
    .art-property-search-filter-3 .property-search-form {
        padding-left: var(--skitts-gutter);
        padding-right: var(--skitts-gutter);
    }

    /* ---------------------------------------------------------
       4. Content cards slider (bleeds off the right-hand edge)
       Replaces the parent's calc((100vw - 1540px) / 2) offset. Percentages
       resolve against the full-width section, so the scrollbar is excluded
       and the 2560px page cap is handled without a separate rule.
       --------------------------------------------------------- */

    /* First slide lines up with the heading text in the .art-container above */
    .art-content-cards--slider .swiper {
        margin-left: calc(max(0px, (100% - 1540px) / 2) + var(--skitts-gutter));
        padding-left: 0;
    }

    /* Arrows end 15px inside the content's right edge, as at the original
       1540px design width. The nav is left-anchored to the shifted .swiper
       (which stays 100% wide, minus 15px right padding), so its width is set
       to match; its 1540px max-width is untouched. */
    .art-content-cards--slider .art-swiper-nav-container {
        width: calc(min(100% + 30px, 1555px) - 2 * var(--skitts-gutter));
    }
}