@charset "UTF-8";

/* =====================================================================
   OLLATOEDU ECOSYS
   Global Responsive Styles
   =====================================================================

   File:
   assets/css/responsive.css

   Phase:
   Phase 4 - Global CSS Foundation

   Purpose:
   - Coordinate cross-site responsive behaviour
   - Provide responsive visibility utilities
   - Provide responsive spacing utilities
   - Refine global typography at smaller sizes
   - Improve container and section behaviour
   - Protect against overflow on narrow devices
   - Support tablet and desktop layout transitions
   - Provide reusable responsive helper classes

   Dependencies:
   - assets/css/style.css
   - assets/css/website.css
   - assets/css/forms.css

   IMPORTANT:

   Component-specific responsiveness remains in:
   - assets/css/components/*.css

   Page-specific responsiveness remains in:
   - assets/css/pages/*.css

   This file should not contain detailed styling for individual
   components or pages.
   ===================================================================== */


/* =====================================================================
   1. RESPONSIVE BREAKPOINT REFERENCE
   =====================================================================

   Small mobile:
   < 24rem

   Mobile:
   < 48rem

   Tablet:
   >= 48rem

   Desktop:
   >= 64rem

   Large desktop:
   >= 80rem

   Extra-large desktop:
   >= 90rem
   ===================================================================== */


/* =====================================================================
   2. GLOBAL RESPONSIVE SAFETY
   ===================================================================== */

html {
    overflow-x: hidden;
}


body {
    width: 100%;

    overflow-x: clip;
}


img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}


pre,
code,
table {
    max-width: 100%;
}


pre {
    overflow-x: auto;
}


iframe {
    width: 100%;
}


/* =====================================================================
   3. LONG CONTENT PROTECTION
   ===================================================================== */

p,
li,
dd,
td,
th,
a,
span,
label,
button {
    overflow-wrap: break-word;
    word-wrap: break-word;
}


.break-word {
    overflow-wrap: anywhere;
    word-break: break-word;
}


.no-break {
    overflow-wrap: normal;
    word-break: normal;
}


/* =====================================================================
   4. RESPONSIVE VISIBILITY - BASE
   ===================================================================== */

.show-mobile,
.show-tablet,
.show-desktop,
.show-large-desktop {
    display: none !important;
}


.hide-mobile,
.hide-tablet,
.hide-desktop,
.hide-large-desktop {
    display: initial;
}


/* =====================================================================
   5. RESPONSIVE WIDTH UTILITIES
   ===================================================================== */

.responsive-width {
    width: 100%;
}


.responsive-max-width {
    width: 100%;

    max-width: 100%;
}


/* =====================================================================
   6. RESPONSIVE FLEX SAFETY
   ===================================================================== */

.responsive-flex {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-4);
}


.responsive-flex > * {
    min-width: 0;
}


/* =====================================================================
   7. RESPONSIVE GRID SAFETY
   ===================================================================== */

.responsive-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-5);
}


.responsive-grid > * {
    min-width: 0;
}


/* =====================================================================
   8. RESPONSIVE MEDIA
   ===================================================================== */

.responsive-media {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.responsive-media img,
.responsive-media video,
.responsive-media iframe {
    width: 100%;
}


/* =====================================================================
   9. RESPONSIVE EMBEDS
   ===================================================================== */

.embed-responsive {
    position: relative;

    width: 100%;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background-color: var(--color-grey-100);

    border-radius: var(--radius-lg);
}


.embed-responsive iframe,
.embed-responsive video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =====================================================================
   10. RESPONSIVE TABLE WRAPPER
   ===================================================================== */

.table-responsive {
    width: 100%;

    overflow-x: auto;

    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}


.table-responsive table {
    min-width: 40rem;
}


/* =====================================================================
   11. TOUCH DEVICE IMPROVEMENTS
   ===================================================================== */

@media (hover: none) and (pointer: coarse) {

    a,
    button,
    .btn,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"],
    summary {
        -webkit-tap-highlight-color: transparent;
    }


    .btn {
        min-height: 2.75rem;
    }


    .form-check__input {
        width: 1.25rem;
        height: 1.25rem;
    }
}


/* =====================================================================
   12. SMALL MOBILE
   ===================================================================== */

@media (max-width: 23.9375rem) {

    :root {
        --page-gutter: 1rem;

        --section-spacing-sm: 2.5rem;
        --section-spacing: 3.25rem;
        --section-spacing-lg: 4rem;
    }


    html {
        font-size: 15px;
    }


    h1 {
        font-size: clamp(
            2rem,
            11vw,
            2.75rem
        );
    }


    h2 {
        font-size: clamp(
            1.65rem,
            9vw,
            2.25rem
        );
    }


    h3 {
        font-size: clamp(
            1.35rem,
            7vw,
            1.75rem
        );
    }


    .container,
    .container--fluid {
        width: 100%;

        padding-inline: var(--page-gutter);
    }


    .section,
    .website-section {
        padding-block: var(--section-spacing);
    }


    .section--sm,
    .website-section--sm {
        padding-block: var(--section-spacing-sm);
    }


    .section--lg,
    .website-section--lg {
        padding-block: var(--section-spacing-lg);
    }


    .btn {
        width: 100%;

        white-space: normal;
    }


    .cluster {
        align-items: stretch;
    }


    .cluster > .btn {
        width: 100%;
    }


    .responsive-grid {
        gap: var(--space-4);
    }


    .table-responsive table {
        min-width: 36rem;
    }
}


/* =====================================================================
   13. MOBILE
   ===================================================================== */

@media (max-width: 47.9375rem) {

    :root {
        --section-spacing-sm: 3rem;
        --section-spacing: 4rem;
        --section-spacing-lg: 5rem;
    }


    .show-mobile {
        display: initial !important;
    }


    .hide-mobile {
        display: none !important;
    }


    .mobile-block {
        display: block !important;
    }


    .mobile-flex {
        display: flex !important;
    }


    .mobile-grid {
        display: grid !important;
    }


    .mobile-full {
        width: 100% !important;
    }


    .mobile-text-left {
        text-align: left !important;
    }


    .mobile-text-center {
        text-align: center !important;
    }


    .mobile-text-right {
        text-align: right !important;
    }


    .mobile-order-first {
        order: -1 !important;
    }


    .mobile-order-last {
        order: 99 !important;
    }


    .container {
        width:
            calc(
                100% - (var(--page-gutter) * 2)
            );
    }


    .content-width,
    .content-width--sm,
    .content-width--md,
    .content-width--lg {
        max-width: 100%;
    }


    .section-heading,
    .website-section__header {
        max-width: 100%;
    }


    .section-heading__description,
    .website-section__description {
        max-width: 100%;
    }


    .content-split {
        gap: var(--space-8);
    }


    .content-copy {
        gap: var(--space-4);
    }


    .feature-grid,
    .content-card-grid,
    .process-list {
        grid-template-columns: 1fr;
    }


    .stats-grid {
        gap: var(--space-3);
    }


    .cta-band__inner {
        align-items: stretch;
    }


    .cta-band__actions {
        width: 100%;
    }


    .cta-band__actions .btn {
        width: 100%;
    }


    .profile-summary {
        align-items: flex-start;
    }


    .form-grid {
        grid-template-columns: 1fr;
    }


    .form-grid__full {
        grid-column: auto;
    }


    .form-group--inline {
        flex-direction: column;
        align-items: stretch;
    }


    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .form-actions .btn {
        width: 100%;
    }


    .form-options--inline {
        flex-direction: column;
        align-items: stretch;
    }


    .responsive-flex {
        flex-direction: column;
        align-items: stretch;
    }


    .responsive-flex > * {
        width: 100%;
    }
}


/* =====================================================================
   14. MOBILE LANDSCAPE / LARGE MOBILE
   ===================================================================== */

@media
    (min-width: 30rem)
    and
    (max-width: 47.9375rem) {

    .mobile-two-column {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: var(--space-4);
    }


    .stats-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* =====================================================================
   15. TABLET
   ===================================================================== */

@media
    (min-width: 48rem)
    and
    (max-width: 63.9375rem) {

    .show-tablet {
        display: initial !important;
    }


    .hide-tablet {
        display: none !important;
    }


    .tablet-block {
        display: block !important;
    }


    .tablet-flex {
        display: flex !important;
    }


    .tablet-grid {
        display: grid !important;
    }


    .tablet-full {
        width: 100% !important;
    }


    .tablet-text-left {
        text-align: left !important;
    }


    .tablet-text-center {
        text-align: center !important;
    }


    .tablet-text-right {
        text-align: right !important;
    }


    .tablet-two-column {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: var(--space-6);
    }


    .responsive-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .section,
    .website-section {
        padding-block:
            clamp(
                4rem,
                7vw,
                5rem
            );
    }
}


/* =====================================================================
   16. DESKTOP
   ===================================================================== */

@media
    (min-width: 64rem)
    and
    (max-width: 79.9375rem) {

    .show-desktop {
        display: initial !important;
    }


    .hide-desktop {
        display: none !important;
    }


    .desktop-block {
        display: block !important;
    }


    .desktop-flex {
        display: flex !important;
    }


    .desktop-grid {
        display: grid !important;
    }


    .desktop-full {
        width: 100% !important;
    }


    .desktop-text-left {
        text-align: left !important;
    }


    .desktop-text-center {
        text-align: center !important;
    }


    .desktop-text-right {
        text-align: right !important;
    }


    .desktop-two-column {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: var(--space-8);
    }


    .desktop-three-column {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: var(--space-6);
    }


    .responsive-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}


/* =====================================================================
   17. LARGE DESKTOP
   ===================================================================== */

@media (min-width: 80rem) {

    .show-large-desktop {
        display: initial !important;
    }


    .hide-large-desktop {
        display: none !important;
    }


    .large-desktop-block {
        display: block !important;
    }


    .large-desktop-flex {
        display: flex !important;
    }


    .large-desktop-grid {
        display: grid !important;
    }


    .large-desktop-two-column {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: var(--space-10);
    }


    .large-desktop-three-column {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: var(--space-8);
    }


    .large-desktop-four-column {
        display: grid;

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        gap: var(--space-6);
    }


    .responsive-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}


/* =====================================================================
   18. EXTRA-LARGE DESKTOP
   ===================================================================== */

@media (min-width: 90rem) {

    :root {
        --container-width: 87.5rem;
    }


    .section-heading,
    .website-section__header {
        max-width: 52rem;
    }


    .content-split {
        gap: var(--space-24);
    }
}


/* =====================================================================
   19. SHORT VIEWPORT HEIGHT
   =====================================================================

   Useful for smaller laptops and landscape mobile/tablet screens.
   ===================================================================== */

@media (max-height: 42rem) {

    .section,
    .website-section {
        padding-block:
            clamp(
                2.75rem,
                7vh,
                4rem
            );
    }
}


/* =====================================================================
   20. PORTRAIT ORIENTATION
   ===================================================================== */

@media (orientation: portrait) {

    .portrait-full {
        width: 100% !important;
    }
}


/* =====================================================================
   21. LANDSCAPE ORIENTATION
   ===================================================================== */

@media (orientation: landscape) {

    .landscape-flex {
        display: flex !important;
    }
}


/* =====================================================================
   22. RESPONSIVE SPACING UTILITIES
   ===================================================================== */

@media (max-width: 47.9375rem) {

    .mobile-mt-0 {
        margin-top: 0 !important;
    }


    .mobile-mt-4 {
        margin-top: var(--space-4) !important;
    }


    .mobile-mt-6 {
        margin-top: var(--space-6) !important;
    }


    .mobile-mb-0 {
        margin-bottom: 0 !important;
    }


    .mobile-mb-4 {
        margin-bottom: var(--space-4) !important;
    }


    .mobile-mb-6 {
        margin-bottom: var(--space-6) !important;
    }


    .mobile-p-0 {
        padding: 0 !important;
    }


    .mobile-px-0 {
        padding-inline: 0 !important;
    }
}


/* =====================================================================
   23. RESPONSIVE ORDER UTILITIES
   ===================================================================== */

@media (min-width: 48rem) {

    .tablet-up-order-first {
        order: -1 !important;
    }


    .tablet-up-order-last {
        order: 99 !important;
    }
}


/* =====================================================================
   24. RESPONSIVE BUTTON GROUP
   ===================================================================== */

.responsive-actions {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-3);
}


@media (max-width: 47.9375rem) {

    .responsive-actions {
        flex-direction: column;

        width: 100%;
    }


    .responsive-actions .btn {
        width: 100%;
    }
}


/* =====================================================================
   25. RESPONSIVE CARD SAFETY
   ===================================================================== */

.card,
.feature-item,
.content-card,
.form-card,
.quote-card,
.info-panel,
.highlight-box {
    min-width: 0;
}


/* =====================================================================
   26. RESPONSIVE TEXT SIZE HELPERS
   ===================================================================== */

.responsive-title {
    font-size:
        clamp(
            2rem,
            5vw,
            3.75rem
        );

    line-height: var(--line-height-tight);
}


.responsive-subtitle {
    font-size:
        clamp(
            1.125rem,
            2vw,
            1.5rem
        );

    line-height: var(--line-height-relaxed);
}


/* =====================================================================
   27. RESPONSIVE MAXIMUM LINE LENGTH
   ===================================================================== */

.readable-text {
    max-width: 65ch;
}


.readable-text--narrow {
    max-width: 52ch;
}


.readable-text--wide {
    max-width: 75ch;
}


/* =====================================================================
   28. SAFER STICKY ELEMENTS
   ===================================================================== */

.sticky-responsive {
    position: sticky;

    top: var(--space-4);
}


@media (max-width: 63.9375rem) {

    .sticky-responsive {
        position: static;
    }
}


/* =====================================================================
   29. SAFE MOBILE SCROLL CONTAINER
   ===================================================================== */

.mobile-scroll {
    max-width: 100%;

    overflow-x: auto;

    overscroll-behavior-inline: contain;

    scrollbar-width: thin;
}


.mobile-scroll > * {
    min-width: max-content;
}


/* =====================================================================
   30. MOBILE SAFE AREA SUPPORT
   ===================================================================== */

@supports (
    padding:
        max(
            0px,
            env(safe-area-inset-left)
        )
) {

    .safe-area-x {
        padding-left:
            max(
                var(--page-gutter),
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                var(--page-gutter),
                env(safe-area-inset-right)
            );
    }


    .safe-area-bottom {
        padding-bottom:
            max(
                var(--space-4),
                env(safe-area-inset-bottom)
            );
    }
}


/* =====================================================================
   31. HOVER-SPECIFIC ENHANCEMENTS
   ===================================================================== */

@media (hover: hover) and (pointer: fine) {

    .hover-lift {
        transition:
            transform var(--transition-base),
            box-shadow var(--transition-base);
    }


    .hover-lift:hover {
        transform: translateY(-2px);

        box-shadow: var(--shadow-md);
    }
}


/* =====================================================================
   32. NON-HOVER DEVICES
   ===================================================================== */

@media (hover: none) {

    .feature-item:hover,
    .content-card:hover {
        transform: none;
    }


    .content-card:hover
    .content-card__media img {
        transform: none;
    }
}


/* =====================================================================
   33. HIGH-DENSITY DISPLAY MEDIA
   ===================================================================== */

@media (min-resolution: 2dppx) {

    img {
        image-rendering: auto;
    }
}


/* =====================================================================
   34. REDUCED DATA PREFERENCE
   =====================================================================

   Browsers supporting prefers-reduced-data may benefit from avoiding
   decorative background imagery/animations later.
   ===================================================================== */

@media (prefers-reduced-data: reduce) {

    .website-pattern::before {
        display: none;
    }
}


/* =====================================================================
   35. REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

    .hover-lift,
    .responsive-actions,
    .responsive-grid {
        transition: none !important;
    }


    .hover-lift:hover {
        transform: none;
    }
}


/* =====================================================================
   36. PRINT SAFETY
   =====================================================================

   Full print behaviour belongs in print.css.

   This only prevents responsive-only elements from creating obvious
   layout problems when print.css has not yet loaded.
   ===================================================================== */

@media print {

    .show-mobile,
    .show-tablet,
    .show-desktop,
    .show-large-desktop {
        display: initial !important;
    }


    .hide-mobile,
    .hide-tablet,
    .hide-desktop,
    .hide-large-desktop {
        display: initial !important;
    }


    .sticky-responsive {
        position: static;
    }
}


/* =====================================================================
   END OF OLLATOEDU ECOSYS GLOBAL RESPONSIVE STYLES
   ===================================================================== */