/* ==========================================
   VILLA.PHP - MOBILE FIXES v1.0
   Corrections critiques scroll/contraste/tactile
   À charger APRÈS villa-mobile-ux.css

   Corrections appliquées :
   - Scroll horizontal (badges, dates)
   - Contraste WCAG AA (section-title, labels)
   - Tailles tactiles minimales 44px
   - Spacing harmonisé
   - Hero responsive (aspect-ratio)
   - Cards borders accessibilité
   - Grid dates responsive
   - Button states
   - Lightbox contraintes
   - Padding sections
   ========================================== */

@media (max-width: 767px) {

  /* ===== FIX #1: Scroll horizontal (badges) ===== */

  .villa-header-section .collection-badge {
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .spec-item {
    max-width: calc(50% - 4px);
    white-space: normal;
    word-wrap: break-word;
  }

  .date-field {
    min-width: 0; /* Reset grid default */
  }

  .date-field-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ===== FIX #2: Contraste WCAG AA ===== */

  .section-title {
    font-size: clamp(12px, 2.8vw, 13px);
    color: #B8941F; /* Gold foncé, ratio 3.2:1 sur cream */
    letter-spacing: clamp(0.8px, 0.15em, 1.2px);
  }

  .date-field-label {
    color: #777; /* Ratio 4.6:1 sur cream */
  }

  .guests-label {
    color: #777;
  }

  /* ===== FIX #3: Tailles tactiles ===== */

  .guests-select-compact {
    min-height: 44px;
    padding: 10px 30px 10px 12px;
  }

  .cal-close-btn {
    width: 44px;
    height: 44px;
  }

  /* ===== FIX #4: Spacing harmonisé ===== */

  /* Réduction espace hero → booking */
  .villa-header-section {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }

  .booking-card {
    margin: 0 !important;
    margin-bottom: 0 !important;
  }

  .section-block + .section-block {
    border-top: 12px solid var(--color-white) !important;
  }

  .villa-specs {
    gap: 10px 8px !important;
  }

  /* ===== FIX #5: Hero responsive ===== */

  .gallery-main {
    min-height: 240px;
    max-height: 50vh;
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  /* ===== FIX #6: Cards borders (accessibilité) ===== */

  .highlight-item,
  .info-card,
  .condition-card {
    border: 1px solid rgba(0,0,0,0.06);
  }

  .highlight-item:active {
    border-color: rgba(0,0,0,0.12);
    background: #F0EDE6;
  }

  .info-card:active,
  .condition-card:active {
    border-color: rgba(0,0,0,0.12);
  }

  /* ===== FIX #7: Grid dates small devices ===== */

  .booking-dates-compact {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* ===== FIX #8: Button disabled state ===== */

  .btn-booking-compact:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
  }

  /* ===== FIX #9: Lightbox image contrainte ===== */

  .photo-lightbox .lightbox-content img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 120px);
  }

  /* ===== FIX #10: Padding horizontal sections ===== */
  /* Désormais défini dans villa-mobile-ux.css */

  /* ===== FIX #11: Background sections cohérent ===== */

  .villa-main {
    background: transparent !important;
  }

  .section-block {
    background: var(--color-white);
    margin-bottom: 0 !important;
  }

  .section-block:nth-child(even) {
    background: var(--color-cream);
  }

  .section-block + .section-block {
    border-top: none !important;
    margin-top: 2px !important;
  }

  /* ===== FIX #12: Hiérarchie visuelle prix ===== */

  .booking-price-inline .price-amount {
    font-size: 24px; /* Au lieu de 22px pour plus de prominence */
  }

  /* ===== FIX #13: Tagline contraste ===== */

  .villa-tagline {
    color: #555 !important; /* Au lieu de #666 */
  }

  /* ===== FIX #14: Contact CTA breathing room ===== */

  .contact-cta {
    margin: 32px 0 !important; /* Au lieu de 24px 0 0 */
  }

  /* ===== FIX #15: Gallery grid première image contrainte ===== */

  .gallery-item:first-child {
    max-height: calc(2 * ((100vw - 32px - 8px) / 3));
  }

  /* ===== FIX #16: Order sections - Contact CTA avant footer ===== */

  .villa-main {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Contact CTA en dernier (juste avant footer) */
  .contact-cta {
    order: 999 !important;
    margin-top: 24px !important;
  }

  /* Location section après contact */
  .location-section {
    order: 998 !important;
  }

  /* Conditions section avant location */
  .conditions-section {
    order: 997 !important;
  }

  /* Sections de contenu normales (description, gallery, etc.) */
  .section-block {
    order: 1 !important;
  }

}

/* ===== SMALL MOBILE (≤375px) ===== */

@media (max-width: 375px) {

  .booking-dates-compact {
    grid-template-columns: 1fr; /* Stack vertical */
    gap: 8px;
  }

  .spec-item {
    font-size: 12px;
    padding: 6px 10px !important;
  }

  .villa-title-block h1 {
    font-size: 22px !important;
  }

  .booking-price-inline .price-amount {
    font-size: 22px;
  }

  .section-title {
    font-size: 12px;
  }

}

/* ===== VERY SMALL MOBILE (≤360px - Android budget) ===== */

@media (max-width: 360px) {

  .date-field-value {
    font-size: 13px;
  }

  .price-amount {
    font-size: 20px !important;
  }

  .container {
    padding: 0 12px; /* Réduire padding sur petits écrans */
  }

  .villa-specs {
    gap: 8px 6px !important;
  }

}