/**
 * Shared responsive foundation — all āshrams front pages.
 * Figma 1440px is a reference frame: width 100%, max-width 1440px, fluid type & grids.
 */

/*
 * Viewport ranges (use min/max pairs — avoid single-pixel cuts like 1023.98px).
 * Mobile:     ≤ 480px
 * Tablet:     481px – 999px
 * Desktop-M:  1000px – 1300px
 * Desktop-L:  ≥ 1301px
 */
:root {
    --ashrams-page-max: 1440px;
    --ashrams-shell-pad: clamp(1rem, 4vw, 3.75rem);
    --ashrams-bp-mobile-max: 480px;
    --ashrams-bp-tablet-max: 999px;
    --ashrams-bp-desktop-sm-min: 1000px;
    --ashrams-bp-desktop-sm-max: 1300px;
    --ashrams-bp-desktop-lg-min: 1301px;
}

/* Page shells (legacy Bootstrap class name cnt-max__1320) */
body.ashrams-home .container.cnt-max__1320,
body.ashrams-paths-page .container.cnt-max__1320,
body.ashrams-place-page .container.cnt-max__1320,
body.ashrams-contact-page .container.cnt-max__1320,
body.ashrams-blog-page .container.cnt-max__1320,
body.ashrams-blog-detail-page .container.cnt-max__1320,
body.ashrams-journeys-page .container.cnt-max__1320,
body.ashrams-retreat-detail-page .container.cnt-max__1320,
body.ashrams-checkout-page .container.cnt-max__1320,
body.ashrams-balance-page .container.cnt-max__1320,
body.ashrams-my-journeys-page .container.cnt-max__1320,
body.ashrams-profile-page .container.cnt-max__1320,
body.ashrams-confirmation-page .container.cnt-max__1320,
body.ashrams-auth-page .container.cnt-max__1320 {
    width: 100%;
    max-width: var(--ashrams-page-max);
    margin-inline: auto;
    padding-inline: var(--ashrams-shell-pad);
    box-sizing: border-box;
}

/* Prevent horizontal scroll from full-bleed hacks */
body.ashrams-home,
body.ashrams-paths-page,
body.ashrams-place-page,
body.ashrams-contact-page,
body.ashrams-blog-page,
body.ashrams-blog-detail-page,
body.ashrams-journeys-page,
body.ashrams-retreat-detail-page,
body.ashrams-checkout-page,
body.ashrams-balance-page,
body.ashrams-my-journeys-page,
body.ashrams-profile-page,
body.ashrams-confirmation-page,
body.ashrams-auth-page {
    overflow-x: clip;
}

img,
video {
    max-width: 100%;
    height: auto;
}
