/*
 * Website Builder - responsive shim for pages built in Settings -> Pages.
 *
 * The builder writes every section's geometry into an inline style="" attribute
 * (see WebsiteBuilderBladeSupport::styleAttribute), and an inline style cannot
 * carry a media query - so a padding authored at desktop is the same padding on
 * a 390px phone. This sheet reinterprets those authored pixels at narrow widths
 * using !important, which is the one thing that outranks an inline declaration.
 *
 * Two rules keep it safe to live alongside the existing styling:
 *
 *   1. Everything is inside @media (max-width: 1279px). At 1280px and above not
 *      a single declaration here applies, so the desktop design is untouched.
 *   2. Every override is keyed to the exact authored value it replaces, and can
 *      only ever make a value smaller (vertical padding) or larger (horizontal
 *      gutters) - never the reverse. A value with no matching rule below simply
 *      keeps its current behaviour.
 *
 * Because of (2), introducing a new authored value in the builder means adding a
 * line here. The vertical ladder mirrors WebsiteBuilderBladeSupport::fluidSpace()
 * exactly - floor = max(24, 0.35 x px), preferred = px/12 vw, cap = px - so the
 * two cannot drift. The hero already calls fluidSpace() in PHP and therefore
 * emits a clamp() rather than a pixel value; it is deliberately not matched here.
 *
 * Scope: body.website-builder-page .wb-page-content, which exists only on
 * sections-mode builder pages. Custom-HTML pages, the LMS, the admin dashboard
 * and the site chrome header/footer are all excluded and unaffected.
 */

@media (max-width: 1279px) {

    /* ---------------------------------------------------------------
     * 1. Vertical rhythm
     *
     * Authored section padding is frozen at its desktop value (80px and
     * 88px dominate this install), which is most of the page height on a
     * phone. Each rule scales its own value down and reaches the authored
     * pixel again at a 1200px viewport, so the 1280px boundary is seamless.
     * padding-top and padding-bottom are always emitted as the same value.
     * --------------------------------------------------------------- */

    body.website-builder-page .wb-page-content > section[style*="padding-top:40px"] { padding-top: clamp(24px, 3.333vw, 40px) !important; padding-bottom: clamp(24px, 3.333vw, 40px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:48px"] { padding-top: clamp(24px, 4vw, 48px) !important; padding-bottom: clamp(24px, 4vw, 48px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:56px"] { padding-top: clamp(24px, 4.667vw, 56px) !important; padding-bottom: clamp(24px, 4.667vw, 56px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:64px"] { padding-top: clamp(24px, 5.333vw, 64px) !important; padding-bottom: clamp(24px, 5.333vw, 64px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:72px"] { padding-top: clamp(25px, 6vw, 72px) !important; padding-bottom: clamp(25px, 6vw, 72px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:80px"] { padding-top: clamp(28px, 6.667vw, 80px) !important; padding-bottom: clamp(28px, 6.667vw, 80px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:88px"] { padding-top: clamp(31px, 7.333vw, 88px) !important; padding-bottom: clamp(31px, 7.333vw, 88px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:96px"] { padding-top: clamp(34px, 8vw, 96px) !important; padding-bottom: clamp(34px, 8vw, 96px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:104px"] { padding-top: clamp(36px, 8.667vw, 104px) !important; padding-bottom: clamp(36px, 8.667vw, 104px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:112px"] { padding-top: clamp(39px, 9.333vw, 112px) !important; padding-bottom: clamp(39px, 9.333vw, 112px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:120px"] { padding-top: clamp(42px, 10vw, 120px) !important; padding-bottom: clamp(42px, 10vw, 120px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:128px"] { padding-top: clamp(45px, 10.667vw, 128px) !important; padding-bottom: clamp(45px, 10.667vw, 128px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:136px"] { padding-top: clamp(48px, 11.333vw, 136px) !important; padding-bottom: clamp(48px, 11.333vw, 136px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:144px"] { padding-top: clamp(50px, 12vw, 144px) !important; padding-bottom: clamp(50px, 12vw, 144px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:152px"] { padding-top: clamp(53px, 12.667vw, 152px) !important; padding-bottom: clamp(53px, 12.667vw, 152px) !important; }
    body.website-builder-page .wb-page-content > section[style*="padding-top:160px"] { padding-top: clamp(56px, 13.333vw, 160px) !important; padding-bottom: clamp(56px, 13.333vw, 160px) !important; }

    /* ---------------------------------------------------------------
     * 2. Horizontal gutters
     *
     * Section containers are capped at a 1280px max-width, so below that
     * the authored padding is the entire gutter. Every section on this
     * install authors 16px or 24px, which leaves copy glued to the screen
     * edge on a tablet. These grow the gutter with the viewport and never
     * drop below the authored value, so phones are unchanged.
     *
     * Only the values actually authored are matched; anything wider than
     * 24px is already generous and is left alone. padding-left and
     * padding-right are always emitted as the same value.
     * --------------------------------------------------------------- */

    body.website-builder-page .wb-page-content > section div[style*="padding-left:16px"] { padding-left: clamp(16px, 4vw, 32px) !important; padding-right: clamp(16px, 4vw, 32px) !important; }
    body.website-builder-page .wb-page-content > section div[style*="padding-left:24px"] { padding-left: clamp(24px, 4vw, 36px) !important; padding-right: clamp(24px, 4vw, 36px) !important; }

    /* The hero's gutter is already fluid but tops out at 24px, which leaves
       it narrower than its neighbours once they start growing. Match them. */
    body.website-builder-page .wb-page-content > section div[style*="padding-left:clamp(16px, 2vw, 24px)"] { padding-left: clamp(16px, 4vw, 32px) !important; padding-right: clamp(16px, 4vw, 32px) !important; }

    /* ---------------------------------------------------------------
     * 3. Hero decoration
     *
     * The hero's decorative SVG is shown from Tailwind's lg: (1024px) and
     * takes the right half of the section, but the hero copy is a plain
     * max-w-3xl block with no reserved space - so between 1024px and
     * 1279px the paragraph runs underneath the artwork. It is marked
     * aria-hidden and purely decorative, so hide it until there is room,
     * which is how it already behaves below 1024px.
     * --------------------------------------------------------------- */

    body.website-builder-page .wb-page-content > section > div.pointer-events-none[aria-hidden="true"] { display: none !important; }

    /* ---------------------------------------------------------------
     * 4. Card grid track floors
     *
     * Card grids use repeat(auto-fit, minmax(Npx, 1fr)). auto-fit collapses
     * to a single column correctly, but that last column is still N pixels
     * wide - so on a narrow phone a 260px or 280px floor overflows its
     * container. min(Npx, 100%) lets the final column shrink instead.
     * The N values are derived from the authored column count in
     * cards-grid, features-grid, gallery and logo-cloud.
     * --------------------------------------------------------------- */

    body.website-builder-page .wb-page-content [style*="minmax(124px"] { grid-template-columns: repeat(auto-fit, minmax(min(124px, 100%), 1fr)) !important; }
    body.website-builder-page .wb-page-content [style*="minmax(144px"] { grid-template-columns: repeat(auto-fit, minmax(min(144px, 100%), 1fr)) !important; }
    body.website-builder-page .wb-page-content [style*="minmax(150px"] { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important; }
    body.website-builder-page .wb-page-content [style*="minmax(168px"] { grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)) !important; }
    body.website-builder-page .wb-page-content [style*="minmax(180px"] { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important; }
    body.website-builder-page .wb-page-content [style*="minmax(190px"] { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important; }
    body.website-builder-page .wb-page-content [style*="minmax(220px"] { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; }
    body.website-builder-page .wb-page-content [style*="minmax(260px"] { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important; }
    body.website-builder-page .wb-page-content [style*="minmax(280px"] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }

    /* ---------------------------------------------------------------
     * 5. Testimonial carousel
     *
     * The track is a peek carousel: cards are a percentage of the viewport
     * and the next one is meant to show at the edge. Scrolled to the end
     * the last card sits flush against the screen with no gutter, which
     * reads as clipped rather than intentional. Give the track an end
     * gutter and align snapped cards to the same gutter.
     * --------------------------------------------------------------- */

    body.website-builder-page .wb-page-content [data-carousel-track] { scroll-padding-left: 16px !important; }
    body.website-builder-page .wb-page-content [data-carousel-track] > *:last-child { margin-right: 16px !important; }
}