/**
 * Responsive Styles for Hunter Fashion Commission
 * All media queries and responsive breakpoint styles
 * 
 * Mobile-First Approach:
 * - Base styles (mobile) apply by default
 * - Tablet: min-width: 768px
 * - Desktop: min-width: 992px
 */

/* ============================================
   MOBILE BASE STYLES (Default)
   ============================================ */

/* Image containers - base styles (desktop default, mobile overridden below) */

.event-card-wrapper {
    width: 100%;
}

.event-card-wrapper .event-card-img-container {
    aspect-ratio: 2 / 1;
    height: auto;
}

.event-card-wrapper .row .col-md-3 {
    width: 100%;
}

.event-card-wrapper .card-img-container {
    height: auto;
}

/* Event section Recent Submissions: tablet 2 per row */
@media (min-width: 768px) and (max-width: 991px) {
    .event-card-wrapper .row .col-md-3 {
        width: 50%;
    }
}

/* Event section Recent Submissions: desktop 4 per row */
@media (min-width: 992px) {
    .event-card-wrapper .row .col-md-3 {
        width: 25%;
    }
}

/* Single column images on mobile - full height */
.col-md-6 .fashion-card-img-container,
.col-md-6 .photo-card-img-container {
    height: auto;
    aspect-ratio: unset;
}

.col-md-6 .fashion-card-img-container img,
.col-md-6 .photo-card-img-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ============================================
   TABLET BREAKPOINT (768px+)
   ============================================ */

@media (min-width: 768px) {
    /* Desktop: Grid layouts with multiple images per row - standardized sizing, fill space */
    /* Exclude event-card-img-container - event banners use 2:1 ratio */
    .row .col-md-3 .card-img-container,
    .row .col-md-3 .fashion-card-img-container,
    .row .col-md-3 .photo-card-img-container,
    .row .col-md-4 .card-img-container,
    .row .col-md-4 .fashion-card-img-container,
    .row .col-md-4 .photo-card-img-container,
    .row .col-md-6 .card-img-container,
    .row .col-md-6 .fashion-card-img-container,
    .row .col-md-6 .photo-card-img-container,
    .row .col-lg-3 .card-img-container,
    .row .col-lg-3 .fashion-card-img-container,
    .row .col-lg-3 .photo-card-img-container,
    .row .col-lg-4 .card-img-container,
    .row .col-lg-4 .fashion-card-img-container,
    .row .col-lg-4 .photo-card-img-container {
        aspect-ratio: 1 / 1 !important;
        height: auto;
        min-height: 300px;
        display: block;
        position: relative;
    }
    
    /* Event card containers - 2:1 ratio so images are never square */
    .event-card-img-container,
    .row .col-md-6 .event-card-img-container,
    .row .col-md-4 .event-card-img-container,
    .row .col-lg-3 .event-card-img-container,
    .row .col-lg-4 .event-card-img-container,
    .event-card-wrapper .event-card-img-container,
    .event-cards-container .event-card-img-container {
        aspect-ratio: 2 / 1 !important;
        min-height: 200px !important;
        height: auto !important;
        position: relative !important;
        width: 100% !important;
        background-color: var(--bg-tertiary);
        overflow: hidden;
    }
    
    /* Event card images should maintain their original styling on desktop */
    .event-card-img-container img,
    .row .col-md-6 .event-card-img-container img,
    .row .col-md-4 .event-card-img-container img,
    .row .col-lg-3 .event-card-img-container img,
    .row .col-lg-4 .event-card-img-container img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block;
    }
    
    .row .col-md-3 .card-img-container > a,
    .row .col-md-3 .fashion-card-img-container > a,
    .row .col-md-3 .photo-card-img-container > a,
    .row .col-md-4 .card-img-container > a,
    .row .col-md-4 .fashion-card-img-container > a,
    .row .col-md-4 .photo-card-img-container > a,
    .row .col-md-6 .card-img-container > a,
    .row .col-md-6 .fashion-card-img-container > a,
    .row .col-md-6 .photo-card-img-container > a,
    .row .col-lg-3 .card-img-container > a,
    .row .col-lg-3 .fashion-card-img-container > a,
    .row .col-lg-3 .photo-card-img-container > a,
    .row .col-lg-4 .card-img-container > a,
    .row .col-lg-4 .fashion-card-img-container > a,
    .row .col-lg-4 .photo-card-img-container > a {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block;
        z-index: 2;
    }
    
    .row .col-md-3 .card-img-container img,
    .row .col-md-3 .fashion-card-img-container img,
    .row .col-md-3 .photo-card-img-container img,
    .row .col-md-4 .card-img-container img,
    .row .col-md-4 .fashion-card-img-container img,
    .row .col-md-4 .photo-card-img-container img,
    .row .col-md-6 .card-img-container img,
    .row .col-md-6 .fashion-card-img-container img,
    .row .col-md-6 .photo-card-img-container img,
    .row .col-lg-3 .card-img-container img,
    .row .col-lg-3 .fashion-card-img-container img,
    .row .col-lg-3 .photo-card-img-container img,
    .row .col-lg-4 .card-img-container img,
    .row .col-lg-4 .fashion-card-img-container img,
    .row .col-lg-4 .photo-card-img-container img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block;
    }
}

/* Mobile-specific adjustments for very small screens */
@media (max-width: 575.98px) {
    .custom-color-picker {
        width: 90vw;
    }
    
    .color-picker-content {
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .color-swatches {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .hsl-control-group {
        flex-wrap: wrap;
    }
    
    .hsl-control-group label {
        width: 100%;
        margin-bottom: 4px;
    }
    
    .color-slider {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .hsl-value {
        width: 50px;
    }
    
    .equipment-row {
        grid-template-columns: 1fr;
    }
    
    .equipment-type {
        grid-column: 1;
        margin-bottom: 0.5rem;
    }
    
    .equipment-details {
        grid-column: 1;
    }
}

/* Event hero image - mobile base styles (2:1 to match image) */
.event-hero-image {
    aspect-ratio: 2 / 1;
    min-height: 250px;
}

.event-hero-overlay {
    padding-block-end: var(--spacing-lg);
}

.event-hero-overlay h1 {
    font-size: 2rem;
}

.event-detail-image {
    aspect-ratio: 2 / 1;
    min-height: 200px;
}

.current-event-gradient-overlay {
    padding: var(--spacing-lg);
}

.current-event-content {
    max-width: 100%;
}

.event-title {
    font-size: 1.8rem;
}

.event-description {
    font-size: 1rem;
}

.event-button {
    font-size: 1rem;
    padding: var(--spacing-sm) 1.2rem;
}

@media (min-width: 768px) {
    .event-hero-overlay h1 {
        font-size: 2.5rem;
    }
    
    .event-title {
        font-size: 2.2rem;
    }
    
    .event-description {
        font-size: 1.1rem;
    }
    
    .event-button {
        font-size: 1.1rem;
        padding: var(--spacing-md) 1.5rem;
    }
}

/* Legacy max-width query removed - using mobile-first approach above */

/* Hero section - mobile base styles */
.hero-section {
    height: auto;
    min-height: 100vh;
    padding-block: 80px;
}

.hero-section .container {
    padding-inline: 15px;
}

.hero-section .row {
    margin-inline: 0;
}

.hero-section .col-md-7 {
    text-align: start;
    padding-inline: 15px;
}

.hero-section .d-flex.gap-2.flex-wrap {
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-inline-start: 0;
    padding-inline-start: 0;
}

.hero-section .d-flex.gap-2.flex-wrap > .btn,
.hero-section .d-flex.gap-2.flex-wrap > a.btn {
    margin-inline-end: var(--spacing-sm);
    margin-block-end: var(--spacing-sm);
    margin-inline-start: 0;
    text-align: start;
    align-self: flex-start;
}

@media (min-width: 768px) {
    .hero-section {
        height: 70vh;
        min-height: 70vh;
        padding-block: 0;
    }
    
    .hero-section .col-md-7 {
        text-align: start;
    }
    
    .hero-section .d-flex.gap-2.flex-wrap {
        justify-content: flex-start;
        align-items: flex-start;
    }
}

/* Fashion gallery - mobile base styles */
.fashion-gallery .row > div {
    margin-block-end: 15px;
    width: 100%;
}

.fashion-image-card img {
    max-height: none;
}

@media (min-width: 768px) {
    .fashion-gallery .row {
        display: flex;
        justify-content: center;
    }
    
    .fashion-gallery .row > div {
        padding-inline: 10px;
    }
}

/* Event cards - desktop enhancements (2:1 ratio preserved, no fixed height) */
@media (min-width: 992px) {
    .event-cards-container.many-events .event-card-wrapper {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    
    .event-cards-container.many-events .event-card-img-container {
        aspect-ratio: 2 / 1 !important;
        min-height: 160px;
        height: auto;
    }
}

/* Mobile button styles - ensures proper touch targets and clickability */
@media (max-width: 767.98px) {
    /* Ensure all buttons have minimum touch target size */
    .btn, button, a.btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
        pointer-events: auto;
        -webkit-tap-highlight-color: rgba(200, 164, 81, 0.3);
        touch-action: manipulation;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Proper spacing between buttons */
    .btn + .btn:not(.btn-group .btn) {
        margin-inline-start: var(--spacing-sm);
    }
    
    /* Ensure interaction buttons are clickable */
    .interaction-buttons .btn,
    .interaction-buttons button {
        pointer-events: auto;
        z-index: 10;
    }
    
    /* Button groups should wrap properly */
    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .btn-group > .btn {
        margin: 0;
    }
    
    /* Fix flex containers with buttons - stack on mobile */
    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }
    
    /* Ensure card footer/body button containers never wrap - keep buttons on same line */
    .card-footer .d-flex.justify-content-between.align-items-center,
    .card-body .d-flex.justify-content-between.align-items-center {
        flex-wrap: nowrap !important;
        gap: var(--spacing-sm);
        justify-content: space-between !important;
    }
    
    /* Make card footer buttons match other buttons on the page */
    .card-footer .btn,
    .card-footer button,
    .card-footer a.btn,
    .card-body .btn,
    .card-body button,
    .card-body a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Remove extra margin between buttons in card footers */
    .card-footer .btn + .btn,
    .card-body .btn + .btn {
        margin-inline-start: 0 !important;
    }
    
    .d-flex.justify-content-between.align-items-center > h1,
    .d-flex.justify-content-between.align-items-center > .h1 {
        width: 100%;
        margin-bottom: 0;
    }
    
    .d-flex.justify-content-between.align-items-center > .d-flex.gap-2 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        justify-content: flex-start;
    }
    
    /* Target any div containing buttons in justify-content-between containers */
    .d-flex.justify-content-between.align-items-center > div > .btn,
    .d-flex.justify-content-between.align-items-center > div > a.btn {
        flex: 0 0 auto;
    }
    
    /* Ensure button containers with gap-2 work properly */
    .d-flex.gap-2 {
        flex-wrap: wrap;
        gap: var(--spacing-sm) !important;
    }
    
    .d-flex.gap-2 > .btn,
    .d-flex.gap-2 > a.btn {
        margin: 0;
        flex: 0 0 auto;
    }
    
    /* Center buttons in mt-auto containers (awards dashboard buttons) */
    .award-card .card-body {
        display: flex;
        flex-direction: column;
    }
    
    .award-card .card-body .mt-auto {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: auto;
    }
    
    .award-card .card-body .mt-auto .btn,
    .award-card .card-body .mt-auto a.btn {
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-inline: 0;
    }
    
    /* Ensure all cards show full height on mobile */
    .card,
    .content-card,
    .fashion-card,
    .event-card-wrapper .card,
    .event-card-wrapper .content-card,
    .photo-card,
    .photo-selection-card,
    .fashion-selection-card,
    .hall-of-fame-card .content-card,
    .event-participation-card {
        height: 100% !important;
        display: flex;
        flex-direction: column;
    }
    
    /* Ensure card bodies can grow to fill space */
    .card .card-body,
    .content-card .card-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    
    /* EXCEPTION: Fashion detail sidebar cards - must size to content, no internal scrolling */
    .col-md-3 .card {
        height: auto !important;
        display: block !important;
        overflow: visible !important;
    }
    
    .col-md-3 .card-body {
        flex: none !important;
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
    }
    
    .col-md-3 {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* EXCEPTION: Detail page cards (fashion, photo, moderation) - must size to content, no internal scrolling */
    /* This prevents cards from being forced to 100% height and creating double scrollbars */
    .container .row > .col-12 > .card,
    .container .row > .col-md-9 > .card {
        height: auto !important;
        display: block !important;
        overflow: visible !important;
    }
    
    .container .row > .col-12 > .card .card-body,
    .container .row > .col-md-9 > .card .card-body {
        flex: none !important;
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
    }
    
    /* Mobile: Image containers - natural aspect ratio for vertical images */
    /* Exclude event-card-img-container - event banners use 2:1 ratio */
    .card-img-container,
    .fashion-card-img-container,
    .photo-card-img-container,
    .current-event-img-container,
    .content-card .card-img-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: unset !important;
        min-height: 0 !important;
        flex-shrink: 0;
        display: block !important;
        background-color: var(--bg-tertiary);
        overflow: hidden;
    }
    
    /* Event card containers - 2:1 ratio on mobile */
    .event-card-img-container,
    .event-card-wrapper .event-card-img-container,
    .event-cards-container .event-card-img-container {
        aspect-ratio: 2 / 1 !important;
        min-height: 200px !important;
        height: auto !important;
        position: relative !important;
        width: 100% !important;
        background-color: var(--bg-tertiary);
        overflow: hidden;
    }
    
    /* Override photography.css specific rules */
    .photo-card-img-container {
        aspect-ratio: unset !important;
        min-height: 0 !important;
    }
    
    .card-img-container > a,
    .fashion-card-img-container > a,
    .photo-card-img-container > a {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        z-index: 2;
    }
    
    .card-img-container img,
    .fashion-card-img-container img,
    .photo-card-img-container img,
    .current-event-img-container img {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        object-fit: unset !important;
        display: block;
    }
    
    /* Award images should display at natural size - exclude from vertical image rules */
    .award-image,
    .award-image-container img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        display: block;
    }
    
    /* Event card images should maintain their original styling - exclude from mobile vertical rules */
    .event-card-img-container img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block;
    }
    
    /* Exclude hero and award header images from card image rules */
    .hero-logo,
    .hero-logo img,
    .hero-logo-container img,
    .col-md-6 .hero-logo,
    .col-md-6 .hero-logo-container img,
    .col-md-6 .hero-logo-container,
    .tha-logo {
        width: auto !important;
        max-width: 250px !important;
        height: auto !important;
        position: static !important;
        object-fit: contain !important;
    }
    
    /* Ensure hero logo container centers content on mobile and doesn't force width */
    .hero-logo-container {
        width: auto !important;
        max-width: 100% !important;
        justify-content: center !important;
        padding-inline-start: 0 !important;
    }
}

/* Special style for award header logos - prevents conflicts with card image rules */
/* Must be very specific to override all other rules including .hero-logo from layout.css */
/* Target the exact HTML structure: .row .col-md-6.text-center .hero-logo-container img.hero-logo.award-header-logo */
/* This rule must come after layout.css to override .hero-logo max-width: 400px / 500px */
.award-header-logo,
img.award-header-logo,
.hero-logo.award-header-logo,
.col-md-6 .award-header-logo,
.row .col-md-6 .award-header-logo,
.hero-logo-container .award-header-logo,
.col-md-6 .hero-logo-container .award-header-logo,
.row .col-md-6 .hero-logo-container .award-header-logo,
.row .col-md-6 .hero-logo-container img.award-header-logo,
.hero-logo.award-header-logo,
.row .col-md-6 .hero-logo.award-header-logo,
.row .col-md-6.text-center .hero-logo-container .award-header-logo,
.row .col-md-6.text-center .hero-logo-container img.hero-logo.award-header-logo,
.row .col-md-6.text-center img.hero-logo.award-header-logo,
.hero-section .row .col-md-6.text-center .hero-logo-container img.hero-logo.award-header-logo {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    position: static !important;
    object-fit: contain !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    flex-shrink: 0 !important;
    opacity: 0.9 !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

/* Constrain the container that holds the award header logo */
/* Target containers that have the award-header-logo inside */
.hero-logo-container:has(.award-header-logo),
.col-md-6 .hero-logo-container:has(.award-header-logo),
.row .col-md-6 .hero-logo-container:has(.award-header-logo),
.col-md-6.text-center .hero-logo-container,
.row .col-md-6.text-center .hero-logo-container {
    max-width: 400px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding-inline-start: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Ensure parent containers don't force width */
.col-md-6.text-center:has(.award-header-logo),
.row .col-md-6.text-center:has(.award-header-logo) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (min-width: 992px) {
    .hero-logo-container:has(.award-header-logo),
    .col-md-6 .hero-logo-container:has(.award-header-logo),
    .row .col-md-6 .hero-logo-container:has(.award-header-logo),
    .col-md-6.text-center .hero-logo-container,
    .row .col-md-6.text-center .hero-logo-container {
        max-width: 500px !important;
    }
}

@media (min-width: 992px) {
    .award-header-logo,
    img.award-header-logo,
    .hero-logo.award-header-logo,
    .col-md-6 .award-header-logo,
    .row .col-md-6 .award-header-logo,
    .hero-logo-container .award-header-logo,
    .col-md-6 .hero-logo-container .award-header-logo,
    .row .col-md-6 .hero-logo-container .award-header-logo,
    .row .col-md-6 .hero-logo-container img.award-header-logo,
    .hero-logo.award-header-logo,
    .row .col-md-6 .hero-logo.award-header-logo,
    .row .col-md-6.text-center .hero-logo-container .award-header-logo,
    .row .col-md-6.text-center .hero-logo-container img.hero-logo.award-header-logo,
    .row .col-md-6.text-center img.hero-logo.award-header-logo,
    .hero-section .row .col-md-6.text-center .hero-logo-container img.hero-logo.award-header-logo {
        max-width: 500px !important;
    }
}

/* Desktop: Ensure hero and award header images maintain proper sizing */
@media (min-width: 768px) {
    .hero-logo:not(.award-header-logo),
    .hero-logo:not(.award-header-logo) img,
    .hero-logo-container img:not(.award-header-logo),
    .col-md-6 .hero-logo:not(.award-header-logo),
    .col-md-6 .hero-logo-container img:not(.award-header-logo),
    .row .col-md-6 .hero-logo:not(.award-header-logo),
    .row .col-md-6 .hero-logo-container img:not(.award-header-logo),
    .tha-logo {
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        position: static !important;
        object-fit: contain !important;
    }
    
    @media (min-width: 992px) {
        .hero-logo:not(.award-header-logo),
        .hero-logo:not(.award-header-logo) img,
        .hero-logo-container img:not(.award-header-logo),
        .col-md-6 .hero-logo:not(.award-header-logo),
        .col-md-6 .hero-logo-container img:not(.award-header-logo),
        .row .col-md-6 .hero-logo:not(.award-header-logo),
        .row .col-md-6 .hero-logo-container img:not(.award-header-logo) {
            max-width: 500px !important;
        }
    }
}

/* Cover photo section - mobile base styles */
.cover-photo-section {
    padding: var(--spacing-md);
}

.cover-photo-section h3 {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .cover-photo-section {
        padding: var(--spacing-lg);
    }
    
    .cover-photo-section h3 {
        font-size: 1.2rem;
    }
}

/* Selection Grid - mobile base styles */
.photo-selection-grid .col-md-4,
.photo-selection-grid .col-lg-3,
.fashion-selection-grid .col-md-4,
.fashion-selection-grid .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 576px) {
    .photo-selection-grid .col-md-4,
    .fashion-selection-grid .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .photo-selection-grid .col-lg-3,
    .fashion-selection-grid .col-lg-3 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Album edit form - mobile base styles (already handled in layout.css) */