/**
 * Layout Styles for Hunter Fashion Commission
 * Layout components, sections, and page structure
 * 
 * ============================================
 * DESIGN PRINCIPLES
 * ============================================
 * 
 * Mobile-First Responsive Design:
 * - Base styles target mobile devices (default, no media query)
 * - Tablet: min-width: 768px (--breakpoint-tablet)
 * - Desktop: min-width: 992px (--breakpoint-desktop)
 * 
 * ============================================
 * CSS VARIABLES
 * ============================================
 * 
 * Spacing Scale:
 * - --spacing-xs: 0.25rem (4px)
 * - --spacing-sm: 0.5rem (8px)
 * - --spacing-md: 1rem (16px)
 * - --spacing-lg: 1.5rem (24px)
 * - --spacing-xl: 2rem (32px)
 * - --spacing-2xl: 3rem (48px)
 * 
 * Layout Gaps:
 * - --layout-gap-sm: 0.5rem
 * - --layout-gap-md: 1rem
 * - --layout-gap-lg: 1.5rem
 * - --layout-gap-xl: 2rem
 * 
 * Border Radius:
 * - --radius-sm: 0.25rem
 * - --radius-md: 0.5rem
 * - --radius-lg: 1rem
 * 
 * Breakpoints:
 * - --breakpoint-tablet: 768px
 * - --breakpoint-desktop: 992px
 * 
 * Z-index Scale:
 * - --z-index-base: 1
 * - --z-index-elevated: 2
 * - --z-index-modal: 1000
 * 
 * ============================================
 * NAMING CONVENTIONS
 * ============================================
 * 
 * Custom Components: BEM-like naming
 * - Block: .featured-item
 * - Element: .featured-item__overlay (double underscore)
 * - Modifier: .featured-item--large (double hyphen, if needed)
 * 
 * Bootstrap Classes: Unchanged, used as-is
 * 
 * ============================================
 * LAYOUT PATTERNS
 * ============================================
 * 
 * CSS Grid: Used for multi-column layouts
 * - .album-edit-content: 1 column mobile, 2 columns tablet+
 * - .album-photos-grid: Responsive grid with auto-fill
 * 
 * Flexbox: Used for component internal layouts
 * - .interaction-bar: Horizontal button container
 * - .hero-content: Centered content container
 * 
 * ============================================
 * CSS LOGICAL PROPERTIES
 * ============================================
 * 
 * This file uses CSS logical properties for better internationalization:
 * - margin-left/right → margin-inline-start/end
 * - padding-top/bottom → padding-block-start/end
 * - left/right → inset-inline-start/end
 * - top/bottom → inset-block-start/end
 * 
 * This ensures layouts work correctly in RTL languages and different writing modes.
 * 
 * ============================================
 * PROPERTY ORDERING
 * ============================================
 * 
 * CSS properties are ordered consistently:
 * 1. Positioning (position, top, left, etc.)
 * 2. Box Model (display, width, height, padding, margin, etc.)
 * 3. Typography (font, line-height, text-align, etc.)
 * 4. Visual (background, border, box-shadow, etc.)
 * 5. Misc (transition, cursor, etc.)
 */

/* ============================================
   CSS CUSTOM PROPERTIES - LAYOUT & SPACING
   ============================================ */

:root {
    /* Spacing Scale */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    
    /* Layout Gaps */
    --layout-gap-sm: 0.5rem;
    --layout-gap-md: 1rem;
    --layout-gap-lg: 1.5rem;
    --layout-gap-xl: 2rem;
    
    /* Border Radius Scale */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    
    /* Breakpoint Values */
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 992px;
    
    /* Z-index Scale */
    --z-index-base: 1;
    --z-index-elevated: 2;
    --z-index-modal: 1000;
}

/* ============================================
   CUSTOM LAYOUT COMPONENTS
   ============================================ */

/* Content Section */
.content-section {
    padding-block: var(--spacing-xl);
}

/* Section Title */
.section-title {
    position: relative;
    display: inline-block;
    margin-block-end: var(--spacing-lg);
}

.section-title::after {
    content: '';
    position: absolute;
    inset-block-end: -8px;
    inset-inline-start: 0;
    width: 50px;
    height: 3px;
    background-color: var(--metallic-gold);
}

/* Featured Item */
.featured-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.featured-item__overlay {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    padding: var(--spacing-lg);
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    color: var(--text-primary);
}

.featured-item__title {
    font-size: 1.5rem;
    margin-block-end: var(--spacing-sm);
    font-family: var(--heading-font);
}

/* Hero Section */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    margin-block-end: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('/static/img/home_images/hero image.webp');
    background-size: cover;
    background-position: center;
}

.hero-content {
    width: 100%;
    z-index: var(--z-index-elevated);
}

/* Hero Logo */
.hero-logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding-inline-start: var(--spacing-xl);
}

/* Constrain container when it has award-header-logo */
.hero-logo-container:has(.award-header-logo),
.col-md-6.text-center .hero-logo-container:has(.award-header-logo),
.row .col-md-6.text-center .hero-logo-container:has(.award-header-logo) {
    max-width: 400px !important;
    width: auto !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding-inline-start: 0 !important;
}

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

.hero-logo {
    width: 100%;
    max-width: 400px;
    height: auto;
    opacity: 0.9;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Award header logo - match exact styling of home page hero logo */
.hero-logo.award-header-logo,
img.hero-logo.award-header-logo,
.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;
    opacity: 0.9 !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

@media (min-width: 768px) {
    .hero-section {
        height: 70vh;
        min-height: 70vh;
    }
}

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

/* Awards Banner Button Container */
.awards-banner .awards-banner-button-container {
    justify-content: center;
}

@media (min-width: 992px) {
    .awards-banner .awards-banner-button-container {
        justify-content: flex-start;
    }
}

/* Legal Section */
.legal-section h2 {
    color: var(--accent-color);
    padding-block-end: var(--spacing-sm);
    border-block-end: 1px solid var(--border-light);
}

.legal-section ul {
    padding-inline-start: var(--spacing-lg);
}

.legal-section li {
    margin-block-end: var(--spacing-sm);
}

.legal-section p {
    line-height: 1.6;
}

.legal-section a {
    color: var(--accent-color);
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}

/* Stats Section */
.stats-section {
    padding-block: var(--spacing-2xl);
    margin-block: var(--spacing-xl);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
}

/* CTA Section */
.cta-section {
    padding: var(--spacing-xl);
    margin-block: var(--spacing-xl);
    text-align: center;
    background-color: var(--bg-elevated);
    border-radius: var(--radius-md);
}

/* Fashion Detail Page - Sidebar Cards */
.col-md-3 .list-group-item {
    padding-block: var(--spacing-sm);
}

.col-md-3 .card {
    margin-block-end: var(--spacing-md);
}

.col-md-3 .card-body {
    padding: var(--spacing-md);
    overflow: visible;
    max-height: none;
}

/* Maintenance Mode */
.maintenance-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, var(--deep-charcoal) 0%, var(--ash-gray) 100%);
}

.maintenance-content {
    text-align: center;
    max-width: 600px;
    padding: var(--spacing-2xl);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.maintenance-content h1 {
    color: var(--metallic-gold);
    margin-block-end: var(--spacing-lg);
    font-size: 2.5rem;
}

.maintenance-content p {
    color: var(--text-secondary);
    margin-block-end: var(--spacing-lg);
    font-size: 1.1rem;
    line-height: 1.8;
}

.maintenance-content .maintenance-icon {
    color: var(--metallic-gold);
    margin-block-end: var(--spacing-lg);
    font-size: 4rem;
    animation: pulse 2s infinite;
}

.maintenance-content .btn {
    margin-block-start: var(--spacing-md);
    padding: 0.75rem var(--spacing-xl);
    font-size: 1.1rem;
}

.maintenance-content .maintenance-details {
    margin-block-start: var(--spacing-xl);
    padding-block-start: var(--spacing-xl);
    text-align: start;
    border-block-start: 1px solid var(--border-light);
}

.maintenance-content .maintenance-details h3 {
    color: var(--metallic-gold);
    margin-block-end: var(--spacing-md);
    font-size: 1.3rem;
}

.maintenance-content .maintenance-details ul {
    list-style: none;
    padding-inline-start: 0;
}

.maintenance-content .maintenance-details li {
    padding-block: var(--spacing-sm);
    color: var(--text-secondary);
    border-block-end: 1px solid var(--border-light);
}

.maintenance-content .maintenance-details li:last-child {
    border-block-end: none;
}

.maintenance-content .maintenance-details li strong {
    color: var(--text-primary);
    display: inline-block;
    min-width: 120px;
}

/* Album Selection Modal */
.album-selection-modal .modal-content {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.album-selection-modal .modal-header {
    background-color: var(--bg-secondary);
    border-block-end: 1px solid var(--border-medium);
}

.album-selection-modal .modal-header .modal-title {
    color: var(--metallic-gold);
    font-family: var(--heading-font);
}

.album-selection-modal .modal-body {
    padding: var(--spacing-lg);
}

.album-selection-modal .modal-footer {
    background-color: var(--bg-secondary);
    border-block-start: 1px solid var(--border-medium);
}

.album-selection-modal .list-group-item {
    background-color: var(--bg-elevated);
    border-color: var(--border-light);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.album-selection-modal .list-group-item:hover {
    background-color: var(--bg-elevated-hover);
    border-color: var(--metallic-gold);
}

.album-selection-modal .list-group-item.active {
    background-color: var(--metallic-gold);
    border-color: var(--metallic-gold);
    color: var(--deep-charcoal);
}

/* Album Edit Page */
.album-edit-page {
    padding-block: var(--spacing-xl);
}

.album-edit-header {
    margin-block-end: var(--spacing-xl);
    padding-block-end: var(--spacing-md);
    border-block-end: 2px solid var(--metallic-gold);
}

.album-edit-header h1 {
    color: var(--metallic-gold);
    margin-block-end: var(--spacing-sm);
    font-family: var(--heading-font);
}

.album-edit-header .album-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.album-edit-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--layout-gap-xl);
    margin-block-start: var(--spacing-xl);
}

.album-edit__sidebar {
    background-color: var(--bg-elevated);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    height: fit-content;
}

.album-edit__main {
    background-color: var(--bg-elevated);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
}

.album-photos-section {
    margin-block-start: var(--spacing-xl);
}

.album-photos-section h3 {
    color: var(--metallic-gold);
    margin-block-end: var(--spacing-md);
    font-size: 1.3rem;
}

.album-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--layout-gap-md);
    margin-block-start: var(--spacing-md);
}

@media (min-width: 768px) {
    .album-edit-content {
        grid-template-columns: 1fr 2fr;
    }
}

.album-photo-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.album-photo-item:hover {
    border-color: var(--metallic-gold);
    transform: scale(1.05);
}

.album-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-photo-item .remove-photo {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: rgba(220, 53, 69, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.album-photo-item:hover .remove-photo {
    opacity: 1;
}

.album-photo-item .remove-photo:hover {
    background-color: rgba(220, 53, 69, 1);
}

/* Fashion Set Section */
.fashion-set-section {
    margin-block-end: var(--spacing-xl);
    padding-block-end: var(--spacing-lg);
    border-block-end: 1px solid var(--border-light);
}

.fashion-set-section:last-child {
    margin-block-end: 0;
    border-block-end: none;
}

/* Cover Photo/Item Section */
.cover-photo-section {
    margin-block-end: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
}

.cover-photo-section h3 {
    color: var(--metallic-gold);
    margin-block-end: var(--spacing-md);
    font-size: 1.2rem;
}

/* Empty State */
.empty-state {
    padding: var(--spacing-2xl) var(--spacing-md);
    text-align: center;
    color: var(--text-secondary);
}

.empty-state-icon {
    color: var(--text-muted);
    margin-block-end: var(--spacing-md);
    font-size: 4rem;
}

.empty-state-title {
    color: var(--text-primary);
    margin-block-end: var(--spacing-sm);
    font-size: 1.5rem;
}

.empty-state-message {
    color: var(--text-secondary);
    margin-block-end: var(--spacing-lg);
    font-size: 1rem;
}