/* ===================================
   RESPONSIVE DESIGN SYSTEM
   Matching professional design Layout
   =================================== */

/* ===================================
   MOBILE FIRST APPROACH
   =================================== */

/* Base Mobile Styles (Default) */
:root {
    --grid-columns: 1;
    --grid-gap: 20px;
    --container-padding: 20px;
    --hero-padding: 40px 20px;
    --section-padding: 60px 20px;
}

/* ===================================
   LAYOUT CONTAINERS
   =================================== */

.header-container,
.albums-section,
.about-content,
.footer-content {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ===================================
   MOBILE STYLES (< 768px)
   Default - Single Column
   =================================== */

/* Header Mobile */
.header-container {
    padding: 12px var(--container-padding);
    height: 56px; /* Slightly smaller on mobile */
}

.menu-toggle {
    display: block;
}

/* Ensure proper alignment on mobile */
@media (max-width: 767px) {
    .header-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        align-items: center;
        padding: 12px var(--container-padding);
        height: 56px;
    }
    
    .language-selector,
    .logo,
    .navigation {
        display: flex;
        align-items: center;
    }
    
    .language-selector {
        justify-content: flex-start;
    }
    
    .logo {
        justify-content: center;
    }
    
    .navigation {
        justify-content: flex-end;
    }
    
    /* Consistent text styling for header elements */
    .language-selector .lang-link,
    .logo-text,
    .menu-toggle {
        font-size: 13px;
        font-family: var(--font-mono);
        font-weight: 300;
        text-transform: uppercase;
        line-height: 1;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* Brand logo mobile adjustments */
    .brand-logo-link {
        width: 26px;
        height: 26px;
    }

    .brand-logo-wrapper {
        min-width: 26px;
    }
}

/* Hero Mobile */
.hero {
    min-height: 80vh;
    padding: var(--hero-padding);
    margin-top: 70px;
}

.hero-content {
    text-align: center;
    max-width: 100%;
}

/* Albums Grid Mobile - Handled by album-grid.css */

/* About Section Mobile */
.about-section {
    padding: var(--section-padding);
}

.about-text {
    font-size: 29.0625px;
    line-height: 34.875px;
}

/* Footer Mobile */
.footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

.newsletter-section {
    grid-template-columns: 1fr;
}

.input-group {
    flex-direction: column;
    gap: var(--spacing-sm);
}

.email-input,
.submit-btn {
    border-radius: 24px;
    padding: 12px 20px;
}

.social-links {
    gap: var(--spacing-sm);
}

/* ===================================
   TABLET STYLES (768px - 1023px)
   Two Column Layout
   =================================== */

@media (min-width: 768px) {
    :root {
        --grid-columns: 2;
        --grid-gap: 24px;
        --container-padding: 32px;
        --hero-padding: 80px 32px;
        --section-padding: 80px 32px;
    }

    /* Brand logo tablet adjustments */
    .brand-logo-link {
        width: 32px;
        height: 32px;
    }

    .brand-logo-wrapper {
        min-width: 32px;
    }

    /* Consistent text sizing for tablet */
    .logo-text,
    .menu-toggle {
        font-size: 14px;
    }

    /* Header Tablet */
    .header-container {
        padding: 16px var(--container-padding);
    }

    /* Hero Tablet */
    .hero {
        min-height: 90vh;
        padding: var(--hero-padding);
    }

    /* Albums Grid Tablet - Handled by album-grid.css */

    /* About Section Tablet */
    .about-text {
        font-size: 32px;
        line-height: 42px;
    }

    /* Footer Tablet */
    .footer-content {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }

    .newsletter-section {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }

    .input-group {
        flex-direction: row;
    }

    .email-input {
        border-radius: 100px 0 0 100px;
    }

    .submit-btn {
        border-radius: 0 100px 100px 0;
    }
}

/* ===================================
   SMALL DESKTOP (1024px - 1199px)
   Three Column Layout
   =================================== */

@media (min-width: 1024px) {
    :root {
        --grid-columns: 3;
        --grid-gap: 30px;
        --container-padding: 40px;
        --hero-padding: 100px 40px;
        --section-padding: 100px 40px;
    }

    /* Header desktop adjustments */
    .brand-logo-link {
        width: 40px;
        height: 40px;
    }

    .brand-logo-wrapper {
        min-width: 40px;
    }

    /* Consistent text sizing for desktop */
    .logo-text,
    .menu-toggle {
        font-size: 15px;
    }

    /* Albums Grid Small Desktop - Handled by album-grid.css */

    .about-text {
        font-size: 36px;
        line-height: 48px;
    }

    /* Footer Desktop */
    .footer-content {
        grid-template-columns: 2fr 1fr;
    }
}

/* ===================================
   LARGE DESKTOP (1200px+)
   Four Column Layout for Large Screens
   =================================== */

@media (min-width: 1200px) {
    :root {
        --grid-columns: 4;
        --container-padding: 40px;
    }

    /* Albums Grid Large Desktop - Handled by album-grid.css */
}

/* ===================================
   EXTRA LARGE SCREENS (1440px+)
   Enhanced Typography and Spacing
   =================================== */

@media (min-width: 1440px) {
    :root {
        --max-width: 1400px;
    }

    .album-title {
        font-size: 58px;
        line-height: 68px;
    }

    .about-text {
        font-size: 42px;
        line-height: 54px;
    }

    .hero-content {
        max-width: 900px;
    }
}

/* ===================================
   LANDSCAPE MOBILE ADJUSTMENTS
   =================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        min-height: 60vh;
        padding: 40px var(--container-padding);
    }

    .albums-section {
        padding: 40px var(--container-padding);
    }

    .about-section {
        padding: 40px var(--container-padding);
    }
}

/* ===================================
   SPECIFIC BREAKPOINT ADJUSTMENTS
   =================================== */

/* iPhone SE and smaller */
@media (max-width: 375px) {
    :root {
        --container-padding: 16px;
        --grid-gap: 16px;
    }

    .album-title {
        font-size: 28px;
        line-height: 34px;
    }

    .album-subtitle {
        font-size: 18px;
        line-height: 22px;
    }

    .about-text {
        font-size: 24px;
        line-height: 30px;
    }
}

/* Large phones (iPhone Plus, etc.) */
@media (min-width: 414px) and (max-width: 767px) {
    .album-title {
        font-size: 36px;
        line-height: 42px;
    }
}

/* iPad Pro and large tablets */
@media (min-width: 1024px) and (max-width: 1366px) {
    .albums-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================================
   HOVER STATES (Desktop Only)
   =================================== */

/* Hover states now handled by album-grid.css */

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

@media print {
    .header,
    .footer,
    .scroll-indicator {
        display: none;
    }

    .hero {
        margin-top: 0;
        page-break-inside: avoid;
    }

    .album-card {
        break-inside: avoid;
        margin-bottom: 20px;
    }

    body {
        background: white;
        color: black;
    }
}

/* ===================================
   ACCESSIBILITY RESPONSIVE FEATURES
   =================================== */

/* Larger touch targets on mobile */
@media (max-width: 767px) {
    .menu-toggle,
    .social-link,
    .submit-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .album-link {
        min-height: 44px;
    }
}

/* Reduced motion for responsive elements */
@media (prefers-reduced-motion: reduce) {
    .album-card {
        transition: none;
    }

    .album-image img {
        transition: none;
    }
}

/* ===================================
   GRID LAYOUT UTILITIES
   =================================== */

.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive utilities */
.mobile-only { display: block; }
.tablet-up { display: none; }
.desktop-up { display: none; }

@media (min-width: 768px) {
    .mobile-only { display: none; }
    .tablet-up { display: block; }
}

@media (min-width: 1024px) {
    .desktop-up { display: block; }
}

/* ===================================
   HERO SECTION RESPONSIVE FIXES
   =================================== */

/* Mobile devices - center the image better */
@media (max-width: 767px) {
    .hero-section {
        height: calc(100vh - 76px); /* Subtract header height + buffer for text visibility */
        background-position: center 40%; /* Show more of the middle/lower portion */
        background-attachment: scroll; /* Better performance on mobile */
        margin-top: 56px; /* Adjust for smaller mobile header */
    }
    
    .hero-brand {
        padding: 5px 20px 0; /* Very minimal padding to fit everything */
    }

    .hero-brand-text {
        font-size: clamp(30px, 9vw, 48px); /* Slightly smaller text */
        letter-spacing: 1px;
        margin-bottom: 0; /* Remove any default margin */
    }

    .hero-brand-sub-text {
        font-size: clamp(10px, 2.8vw, 15px); /* Slightly smaller */
        letter-spacing: 0.3px;
        margin-top: 2px; /* Very minimal spacing */
        margin-bottom: 0;
        line-height: 1;
    }
}

/* Tablet devices */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section {
        background-position: center 45%; /* Slightly higher for tablets */
        margin-top: 60px;
    }
    
    .hero-brand-text {
        font-size: clamp(50px, 8vw, 80px);
    }

    .hero-brand-sub-text {
        font-size: clamp(15px, 2.4vw, 24px); /* 30% of tablet main title */
        letter-spacing: 0.3px;
        margin-top: 10px;
        line-height: 1.2;
    }
}

/* Desktop and larger */
@media (min-width: 1024px) {
    .hero-section {
        background-position: center center; /* Full center for desktop */
        background-attachment: fixed; /* Parallax effect on desktop */
    }
}

/* Landscape mobile devices */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-section {
        background-position: center 35%; /* Show even more of the middle */
        height: 100vh;
    }
    
    .hero-brand {
        padding: 20px;
    }
}

/* ===================================
   PHOTOGRAPHY MESSAGE RESPONSIVE
   =================================== */

/* Mobile devices */
@media (max-width: 767px) {
    .photography-message-section {
        padding: 60px 20px;
        min-height: auto;
    }

    .photography-message {
        max-width: 100%;
    }

    .large-photography-text {
        line-height: 1.6;
        text-align: left;
    }

    .studio-name {
        display: inline-block;
    }
}

/* Tablet devices */
@media (min-width: 768px) and (max-width: 1023px) {
    .photography-message-section {
        padding: 80px 40px;
    }

    .large-photography-text {
        text-align: center;
    }
}

/* Desktop and larger */
@media (min-width: 1024px) {
    .photography-message-section {
        padding: 100px 40px;
    }

    .large-photography-text {
        text-align: center;
    }
}

/* ===================================
   CONTAINER QUERY SUPPORT
   (Future Enhancement)
   =================================== */

@container (min-width: 600px) {
    .albums-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 900px) {
    .albums-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================================
   MARGEST FONT RESPONSIVE ADJUSTMENTS
   =================================== */

/* Mobile devices (max-width: 767px) */
@media (max-width: 767px) {
    .hero-brand-text {
        /* Margest Extra Bold may need different scaling on mobile */
        font-size: clamp(40px, 12vw, 80px);
        line-height: 0.85;
        letter-spacing: 0.5px;
    }

    .hero-brand-sub-text {
        /* 30% of mobile main title - Margest Regular */
        font-size: clamp(12px, 3.6vw, 24px);
        letter-spacing: 0.15px;
        margin-top: 8px;
        line-height: 1.3;
    }

    .large-photography-text {
        line-height: 1.5; /* More readable on mobile */
        text-align: left;
    }

    .studio-name-intro {
        /* Bold Italic may need larger size on mobile for readability */
        font-size: 1.1em;
        line-height: 1.3;
    }

    .studio-description {
        /* Medium weight optimization for mobile */
        font-size: 1em;
        line-height: 1.6;
    }

    .large-title-text {
        /* Footer font adjustments for mobile */
        font-size: clamp(24px, 2vw, 30px); /* Further reduced for mobile */
        letter-spacing: 0.5px; /* Reduced letter-spacing */
        line-height: 0.8;
    }
}

/* Tablet devices (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-brand-text {
        font-size: clamp(40px, 6vw, 70px);
        line-height: 0.9;
        letter-spacing: 1px;
    }

    .hero-brand-sub-text {
        /* 30% of tablet main title - Margest Regular */
        font-size: clamp(12px, 1.8vw, 21px);
        letter-spacing: 0.3px;
        margin-top: 10px;
        line-height: 1.2;
    }

    .large-photography-text {
        text-align: center;
        line-height: 1.4;
    }

    .studio-name-intro {
        font-size: 1.05em;
        line-height: 1.2;
    }

    .large-title-text {
        font-size: clamp(35px, 5vw, 55px); /* Tablet specific sizing */
        letter-spacing: 1.0px; /* Reduced from 2px */
        line-height: 0.85;
    }
}

/* Desktop devices (1024px+) */
@media (min-width: 1024px) {
    .hero-brand-text {
        line-height: 0.9;
        letter-spacing: 2px;
    }

    .hero-brand-sub-text {
        /* 30% of desktop main title - uses styles.css base */
        font-size: clamp(15.6px, 2.4vw, 45px);
        letter-spacing: 0.6px;
        margin-top: 12px;
        line-height: 1.2;
    }

    .large-photography-text {
        text-align: center;
        line-height: 1.35; /* Optimized for larger screens */
    }

    .studio-name-intro {
        font-size: 1em;
        line-height: 1.2;
    }

    .studio-description {
        line-height: 1.4;
    }

    .large-title-text {
        /* Desktop maintains larger size */
        font-size: clamp(40px, 8vw, 70px);
        letter-spacing: 2px; /* Reduced from 3px */
        line-height: 0.8;
    }
}

/* Large displays (1440px+) */
@media (min-width: 1440px) {
    .hero-brand-text {
        letter-spacing: 3px;
        line-height: 0.85;
    }

    .hero-brand-sub-text {
        /* 30% of large display main title - enhanced spacing */
        letter-spacing: 0.9px; /* 30% of 3px */
        line-height: 1.1;
        margin-top: 15px;
    }

    .large-photography-text {
        line-height: 1.3; /* Tighter for better visual impact */
    }

    .large-title-text {
        /* Large displays maintain maximum size */
        font-size: clamp(50px, 8vw, 70px);
        letter-spacing: 3px; /* Reduced from 4px */
        line-height: 0.75;
    }
}

/* ===================================
   SECTION 2 RESPONSIVE TYPOGRAPHY
   Consistent layout with proportional scaling
   =================================== */

/* Mobile devices (max-width: 767px) - 50% Scale */
@media (max-width: 767px) {
    .section-two-header {
        margin-bottom: 30px;
    }

    .word-treasured-wrapper {
        display: inline-block;
        margin: 8px 0;
    }

    .infinity-badge {
        transform: rotate(-10deg) scale(0.9);
    }

    .section-two-content {
        padding: 20px 15px;
    }

    .main-text-box {
        margin: 20px 10px;
        padding: 20px 18px;
        padding-top: 25px;
    }
}

/* Tablet devices (768px - 1023px) - 75% Scale */
@media (min-width: 768px) and (max-width: 1023px) {
    .section-two-header {
        margin-bottom: 40px;
    }

    .word-treasured-wrapper {
        margin: 12px 0;
    }

    .section-two-content {
        padding: 30px 20px;
    }

    .main-text-box {
        padding: 25px 22px;
        padding-top: 28px;
    }
}

/* Desktop devices (1024px+) - 100% Scale */
@media (min-width: 1024px) {
    /* Base styles already defined in styles.css with clamp() */
    .section-two-header {
        margin-bottom: 50px;
    }
}

/* Large displays (1440px+) - 110% Scale */
@media (min-width: 1440px) {
    .section-two-header {
        margin-bottom: 55px;
    }

    .word-treasured-wrapper {
        margin: 18px 0;
    }

    .infinity-badge {
        transform: rotate(-10deg) scale(1.1);
    }
}