/**
 * Responsive CSS
 * @package SportBreak
 */

/* ========================================
   GLOBAL OVERFLOW FIX
   ======================================== */

html {
    overflow-x: hidden;
}

html,
body {
    max-width: 100vw;
}

/* ========================================
   TABLET (max-width: 992px)
   ======================================== */

@media (max-width: 992px) {
    /* Layout */
    .media-block,
    .media-block--content-left {
        grid-template-columns: 1fr;
    }

    .media-block .media-content,
    .media-block--content-left .media-content {
        margin-left: 0;
        margin-right: 0;
        margin-top: -30px;
        order: 2;
    }

    .media-block .media-image,
    .media-block--content-left .media-image {
        order: 1;
    }

    .media-block .media-image img,
    .media-block .media-image video {
        height: 400px;
    }

    .media-image--video .video-background-embed {
        height: 400px;
    }

    /* Cards Grid */
    .block-cards-grid__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .block-cards-slider__card {
        width: calc((100% - 30px) / 2);
    }

    .block-reviews-slider__card,
    .block-reviews__card {
        width: calc((100% - 30px) / 2);
    }

    /* Hero */
    .block-hero__title {
        font-size: 60px;
    }

    /* Practical Info */
    .block-practical-info__grid {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .block-practical-info__card {
        margin-left: 0;
        margin-right: 0;
        margin-top: -30px;
    }

    /* Parallax */
    .block-parallax-banner__title {
        font-size: 40px;
    }

    /* Slider nav - reduce protrusion on tablet */
    .block-cards-slider__nav,
    .block-reviews__nav {
        width: calc(100% + 60px);
        left: -30px;
    }
}

/* ========================================
   MOBILE (max-width: 768px)
   ======================================== */

@media (max-width: 768px) {
    /* Sections */
    section {
        padding: var(--section-padding-mobile) 0;
    }

    /* Spacing between content blocks in section */
    .block-section > .container > *:not(.section-header):not(.block-section__footer) + *:not(.block-section__footer) {
        margin-top: 30px;
    }

    /* Main content offset for smaller header */
    #main-content {
        padding-top: var(--header-height-mobile);
    }

    #main-content:has(> .block-hero:first-child) {
        padding-top: 0;
    }

    /* Hero */
    .block-hero {
        min-height: 500px;
        margin-top: calc(var(--header-height-mobile) * -1);
        padding-top: var(--header-height-mobile);
    }

    .block-hero__title {
        font-size: 40px;
    }

    .block-hero__baseline {
        font-size: 18px;
    }

    .block-hero__ctas {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .block-hero__ctas .btn {
        width: 100%;
    }

    .block-hero__breadcrumb {
        bottom: 12px;
        left: 16px;
        font-size: 11px;
    }

    /* Cards Grid - single column stack on mobile */
    .block-cards-grid__grid {
        grid-template-columns: 1fr;
    }

    .block-cards-grid__grid .shortcut-card,
    .block-cards-grid__grid .card {
        width: 100%;
        min-width: 0;
    }

    /* Cards Slider - full width cards on mobile */
    .block-cards-slider__card {
        width: 100%;
    }

    .block-reviews-slider__card,
    .block-reviews__card {
        width: 100%;
    }

    .review-card {
        min-width: 0;
    }

    /* Slider containers - clip overflow */
    .block-cards-slider__container,
    .block-reviews__container {
        overflow: hidden;
        padding-bottom: 5px;
    }

    /* Info Bar */
    .block-info-bar__items {
        flex-direction: column;
        gap: 20px;
    }

    .block-info-bar__item span {
        font-size: 14px;
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 30px 20px;
    }

    /* Parallax */
    .block-parallax-banner {
        min-height: 400px;
        height: auto;
    }

    .block-parallax-banner__title {
        font-size: 32px;
    }

    .block-parallax-banner__description {
        font-size: 16px;
    }

    .block-parallax-banner__content {
        padding: 40px 20px 60px;
    }

    /* Practical Info */
    .block-practical-info__map {
        height: 300px;
    }

    .block-practical-info__card {
        padding: 30px;
    }

    .block-practical-info__buttons-row {
        flex-direction: column;
    }

    /* Media Block */
    .media-block .media-content {
        padding: 30px;
    }

    .media-block .media-image img,
    .media-block .media-image video,
    .media-slider__slide img {
        height: 350px;
    }

    .media-image--video .video-background-embed {
        height: 350px;
    }

    .media-slider__caption {
        bottom: 30px;
    }

    /* Typography */
    h2 {
        font-size: 28px;
    }

    .section-header h2 {
        font-size: 28px;
    }

    .section-header p {
        font-size: 16px;
    }

    /* Slider Navigation - reposition below slider on mobile */
    .block-cards-slider__nav,
    .block-reviews-slider__nav,
    .block-reviews__nav {
        position: static;
        transform: none;
        width: auto;
        justify-content: center;
        gap: 12px;
        margin-top: 20px;
        pointer-events: auto;
    }

    .block-cards-slider__nav .slider-btn,
    .block-reviews-slider__nav .slider-btn,
    .block-reviews__nav .slider-btn {
        pointer-events: auto;
    }

    /* Experience highlights - full width */
    .experience-highlights {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        width: 100vw;
    }

    /* Partners logos overflow fix */
    .block-partners-logos__container {
        border-radius: 16px;
        padding: 15px 20px;
    }

    .block-reviews__partners-container {
        padding: 0;
    }

    .block-reviews__partners-wrapper {
        padding: 0;
    }
}

/* ========================================
   SMALL MOBILE (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .block-hero__title {
        font-size: 32px;
    }

    .block-hero__badge {
        font-size: 14px;
        padding: 8px 16px;
    }

    .btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .btn-xl {
        padding: 14px 28px;
        font-size: 16px;
    }

    .shortcut-card .card-body {
        padding: 20px;
    }

    .review-card {
        min-width: 0;
        padding: 20px;
    }

    /* Experience highlights - full width */
    .experience-highlights {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        width: 100vw;
    }
}

/* ========================================
   GUTENBERG EDITOR
   ======================================== */

@media (min-width: 992px) {
    /* Hide slider nav when 3 cards are visible */
    .slider-nav-auto.hide-on-3 {
        display: none !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .site-header,
    .site-footer,
    .block-parallax-banner,
    .slider-nav,
    .hamburger {
        display: none !important;
    }

    #main-content {
        padding-top: 0;
    }

    body {
        background: white;
    }

    a {
        color: var(--dark);
        text-decoration: underline;
    }
}