/**
 * Responsive Styles - Media Queries
 * Partecipazione Matrimonio
 *
 * Breakpoints:
 * - Mobile: < 576px
 * - Tablet: 576px - 768px
 * - Desktop: 768px - 992px
 * - Large Desktop: > 992px
 */

/* === MOBILE FIRST BASE === */
/* Gli stili base sono già mobile-first negli altri file */

/* === EXTRA SMALL DEVICES (phones, <576px) === */
@media (max-width: 575px) {
    /* Spaziature più compatte */
    .section {
        padding: var(--spacing-3xl) var(--spacing-md);
    }

    .section__header {
        margin-bottom: var(--spacing-xl);
    }

    /* Header */
    .sposi-names {
        font-size: var(--font-size-4xl);
    }

    .couple-photo__frame {
        max-width: 240px;
    }

    /* Countdown più leggibile */
    .countdown__item {
        min-width: 70px;
        padding: var(--spacing-sm);
    }

    /* Timeline: una colonna pulita */
    .timeline {
        padding-left: var(--spacing-lg);
    }

    .timeline__item {
        padding-left: var(--spacing-md);
    }

    /* Form: tutto a colonna */
    .form-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .rsvp-form__grid {
        grid-template-columns: 1fr;
    }

    /* RSVP container e card più compatti */
    .rsvp-form-container {
        padding: var(--spacing-lg);
        border-radius: var(--border-radius-md);
    }

    .guest-card {
        padding: var(--spacing-md);
    }

    .rsvp-form__subsection-title {
        margin-top: var(--spacing-lg);
        padding-top: var(--spacing-md);
    }

    /* Allergeni in una colonna su mobile */
    .allergen-fieldset {
        padding: var(--spacing-sm);
    }

    .allergen-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    .allergen-checkbox__label {
        flex-wrap: wrap;
        word-break: break-word;
    }

    /* RSVP nav: pulsanti full width */
    .rsvp-form__navigation {
        flex-direction: column;
    }

    .rsvp-form__navigation .btn {
        max-width: none;
        width: 100%;
    }

    /* Transport options verticali */
    .transport-options {
        flex-direction: column;
        align-items: stretch;
    }

    /* Quiz opzioni una colonna */
    .quiz__options {
        grid-template-columns: 1fr;
    }

    /* Footer links più touch-friendly */
    .footer__social-links {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
}

/* === SMALL DEVICES (landscape phones, 576px and up) === */
@media (min-width: 576px) {
    .container {
        padding: 0 var(--spacing-lg);
    }

    /* Grid helpers */
    .row-sm {
        display: flex;
        flex-wrap: wrap;
        margin: calc(var(--spacing-md) * -1);
    }

    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: var(--spacing-md);
    }

    /* Form layout */
    .form-row {
        display: flex;
        gap: var(--spacing-md);
    }

    .form-row .form-group {
        flex: 1;
    }

    /* Cards grid */
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

/* === MEDIUM DEVICES (tablets, 768px and up) === */
@media (min-width: 768px) {
    /* Typography adjustments */
    .section__title {
        font-size: var(--font-size-4xl);
    }

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

    /* Grid helpers */
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        padding: var(--spacing-md);
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: var(--spacing-md);
    }

    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        padding: var(--spacing-md);
    }

    /* Dress code layout */
    .dress-code {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }

    /* Timeline */
    .timeline {
        padding-left: 50%;
    }

    /* Nascondi linea verticale su desktop */
    .timeline::before {
        display: none;
    }

    .timeline__item {
        width: 100%;
        padding-left: var(--spacing-xl);
    }

    .timeline__item:nth-child(even) {
        margin-left: -100%;
        padding-left: 0;
        padding-right: var(--spacing-xl);
        text-align: right;
    }

    /* Countdown */
    .countdown {
        flex-direction: row;
        gap: var(--spacing-xl);
    }

    .countdown__item {
        min-width: 100px;
    }

    /* Program schedule */
    .schedule {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    /* Travel section */
    .travel-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }

    .travel-grid__map {
        grid-column: 1 / -1;
    }

    /* Quiz */
    .quiz__options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    /* Form */
    .rsvp-form {
        padding: var(--spacing-2xl);
    }

    /* Footer */
    .footer__content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Hide mobile only elements */
    .mobile-only {
        display: none;
    }
}

/* === LARGE DEVICES (desktops, 992px and up) === */
@media (min-width: 992px) {
    /* Container width */
    .container {
        max-width: 960px;
    }

    /* Typography */
    .section__title {
        font-size: var(--font-size-5xl);
    }

    /* Grid helpers */
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
        padding: var(--spacing-md);
    }

    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        padding: var(--spacing-md);
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: var(--spacing-md);
    }

    /* Cards grid */
    .cards-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Schedule layout */
    .schedule {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Accommodations grid */
    .accommodations-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Photo gallery */
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Quiz wider options */
    .quiz__container {
        max-width: 700px;
        margin: 0 auto;
    }

    /* Form two columns */
    .rsvp-form__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .rsvp-form__grid .form-group--full {
        grid-column: 1 / -1;
    }

    /* Hide tablet and mobile elements */
    .tablet-only {
        display: none;
    }
}

/* === EXTRA LARGE DEVICES (large desktops, 1200px and up) === */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    /* More spacing on large screens */
    .section {
        padding: var(--spacing-4xl) var(--spacing-2xl);
    }
}

/* === DESKTOP OPTIMIZATIONS (1024px and up) === */
@media (min-width: 1024px) {
    /* Hero section - better centering */
    .letter-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xl);
    }

    /* Letter content - wider container on desktop */
    .letter-content {
        padding: var(--spacing-4xl) var(--spacing-2xl);
    }

    /* Header section - layout with more space */
    .section--header .container {
        max-width: 1100px;
    }

    /* Countdown inline on desktop */
    .countdown {
        flex-wrap: nowrap;
        gap: var(--spacing-lg);
    }

    .countdown__item {
        min-width: 120px;
        padding: var(--spacing-lg);
    }

    .countdown__number {
        font-size: var(--font-size-5xl);
    }

    /* Dress code side by side with more space */
    .dress-code {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2xl);
    }

    .dress-code__card {
        padding: var(--spacing-2xl);
    }

    /* Travel grid - improved layout */
    .travel-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--spacing-xl);
    }

    .travel-grid__map {
        grid-column: 1 / -1;
        min-height: 450px;
    }

    /* Form - wider on desktop */
    .rsvp-form-container {
        max-width: 800px;
        margin: 0 auto;
        padding: var(--spacing-2xl);
    }

    /* Guest cards better layout */
    .guest-card__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .guest-card__grid .form-group--full {
        grid-column: 1 / -1;
    }
}

/* === ULTRA WIDE DESKTOP (1440px and up) === */
@media (min-width: 1440px) {
    .container {
        max-width: 1280px;
    }

    .section {
        padding: var(--spacing-4xl) var(--spacing-3xl);
    }

    /* Even wider sections */
    .section--header .container {
        max-width: 1300px;
    }

    /* Quiz wider */
    .quiz__container {
        max-width: 900px;
    }

    /* Schedule 4-column on very large screens */
    .schedule {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Travel grid 3-column layout */
    .travel-grid {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .travel-grid__map {
        grid-column: 1;
        grid-row: 1 / 3;
        min-height: 500px;
    }

    .travel-grid__directions {
        grid-column: 2;
        grid-row: 1;
    }

    .travel-grid__accommodations {
        grid-column: 3;
        grid-row: 1;
    }

    /* Form even wider */
    .rsvp-form-container {
        max-width: 900px;
    }

    /* Guest cards 3 columns */
    .guest-card__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === UTILITY CLASSES FOR HIDING/SHOWING === */
/* Mobile only */
@media (max-width: 575.98px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Tablet only */
@media (min-width: 576px) and (max-width: 991.98px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Desktop only */
@media (min-width: 992px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 576px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Show only on tablet */
@media (max-width: 575.98px), (min-width: 992px) {
    .show-tablet-only {
        display: none !important;
    }
}

/* Show only on desktop */
@media (max-width: 991.98px) {
    .show-desktop-only {
        display: none !important;
    }
}

/* === TOUCH DEVICE OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .form-control {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Remove hover effects */
    .card:hover {
        transform: none;
    }

    /* Tap highlight */
    a, button, .btn {
        -webkit-tap-highlight-color: rgba(139, 69, 19, 0.1);
    }
}

/* === PRINT STYLES === */
@media print {
    /* Reset colors for printing */
    body {
        background: white;
        color: black;
    }

    /* Hide interactive elements */
    .letter-hero,
    .quiz,
    .rsvp-form,
    .footer__social,
    .scroll-indicator,
    .btn {
        display: none !important;
    }

    /* Full width sections */
    .section {
        padding: 20px;
        page-break-inside: avoid;
    }

    /* Remove shadows and backgrounds */
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    /* Links */
    a {
        color: black;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Map placeholder */
    .map-container {
        border: 1px solid #ddd;
        min-height: 200px;
    }

    .map-container::after {
        content: "Visualizza la mappa online";
        display: block;
        text-align: center;
        padding: 80px 20px;
        color: #666;
    }
}

/* === LANDSCAPE ORIENTATION ON MOBILE === */
@media (max-width: 767.98px) and (orientation: landscape) {
    .letter-hero {
        min-height: auto;
        padding: var(--spacing-lg);
    }

    .envelope {
        max-width: 250px;
    }

    .countdown {
        flex-wrap: wrap;
    }

    .countdown__item {
        flex: 0 0 calc(50% - var(--spacing-sm));
    }
}

/* === HIGH DPI / RETINA DISPLAYS === */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Use higher resolution images if available */
    .envelope__body {
        /* Texture would use @2x version */
    }
}

/* === SAFE AREA INSETS (for notched devices) === */
@supports (padding: max(0px)) {
    .letter-hero {
        padding-left: max(var(--spacing-xl), env(safe-area-inset-left));
        padding-right: max(var(--spacing-xl), env(safe-area-inset-right));
        padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
    }

    .footer {
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }
}