/*
 * syw-responsive.css — Phase F: Responsive Foundation
 *
 * Contains:
 *   1. CSS custom property tokens (breakpoints, spacing, container widths)
 *   2. syw-* responsive utility classes
 *   3. Component rules extracted from inline <style> blocks in track review templates
 *
 * Bootstrap version: 4.x (Mezzanine 6.0.0 default)
 * Breakpoint set (aligns with Bootstrap 4 defaults):
 *   --bp-sm : 576px  (large phones / small tablets)
 *   --bp-md : 768px  (tablets)
 *   --bp-lg : 992px  (small desktops)
 *   --bp-xl : 1200px (large desktops)
 *
 * Phase H safelist note: all selectors in this file are under the /^syw-/
 * prefix or are named class extractions from templates.  PurgeCSS safelist
 * must include /^syw-/ (already in css-consolidation-spec.md purgecss.config.js).
 */

/* ==========================================================================
   1. CSS Custom Property Tokens
   ========================================================================== */

:root {
    /* Breakpoints — informational; use @media queries directly */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;

    /* Container max-widths (match Bootstrap 4) */
    --container-max-sm:  540px;
    --container-max-md:  720px;
    --container-max-lg:  960px;
    --container-max-xl: 1140px;

    /* Typography scale */
    --font-scale-sm:   0.875rem;
    --font-scale-base: 1rem;
    --font-scale-lg:   1.125rem;
}

/* ==========================================================================
   2. syw-* Responsive Utility Classes
   ========================================================================== */

/* Hide on mobile (< 576px) */
@media screen and (max-width: 575px) {
    .syw-hidden-mobile {
        display: none !important;
    }
}

/* Center text on mobile */
@media screen and (max-width: 575px) {
    .syw-text-center-mobile {
        text-align: center !important;
    }
}

/* Stack flex children on mobile */
@media screen and (max-width: 575px) {
    .syw-stack-mobile {
        flex-direction: column !important;
    }
}

/* Ensure responsive images within grid columns */
.syw-img-fluid {
    max-width: 100%;
    height: auto;
}

/* Responsive iframe container (aspect-ratio wrapper) */
.syw-iframe-responsive {
    width: 100%;
    max-width: 100%;
}

/* Touch-target minimum for interactive elements on mobile */
@media screen and (max-width: 767px) {
    .syw-touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================================================
   3. Track Review Page — Shared Component Styles
   Extracted from inline <style> blocks in:
     - templates/tracks/quick_track_review.html
     - templates/tracks/track_feature_review.html
   Note: .bg rule is intentionally NOT here — it uses Django template variables
   for the background-image URL and must remain inline in each template.
   ========================================================================== */

.parallax-container {
    min-height: 400px;
    background: transparent;
}

.magic-display {
    opacity: 0;
}

.credits-label {
    text-shadow: 1px 1px 2px #bb39d7;
    font-family: 'Cormorant Unicase', sans-serif !important;
    color: white;
}

.modal {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
}

.ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
}

a.disabled {
    pointer-events: none;
    cursor: default;
    background-color: #4e5b6c !important;
}

/* Score table reset — quick/feature review pages */
#scoretable tr, #scoretable td {
    padding: 0px !important;
    margin: 0px !important;
    border: 0px !important;
    line-height: 0px !important;
    height: 5px !important;
}

/* ==========================================================================
   4. Header Visual Polish
   Superseded by syw-header.css (loads after this file) which provides
   the full fluid-bar override with proper body.msl-black scoping and
   @media (min-width: 992px) guard. Rules previously here are removed
   to avoid specificity conflicts.
   ========================================================================== */

/* Account block base layout (theme-agnostic flex column).
   syw-header.css adds min-width / font-size for desktop. */
.syw-account-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    line-height: 1.2;
}