/* A roomier mobile reading rhythm. Desktop layout remains unchanged. */
@media (max-width: 900px) {
  :root { --mobile-header-height: 76px; scroll-padding-top: calc(var(--mobile-header-height) + 12px); }
  .site-header__bar,
  .site-header.is-scrolled .site-header__bar {
    min-height: var(--mobile-header-height);
    padding: .6rem max(1rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left));
    gap: .8rem;
  }
  .site-header__brand {
    flex: 1 1 auto;
    max-width: calc(100vw - 110px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(1.2rem, 4.6vw, 1.55rem);
  }
  .site-header__meta > .spotify-collab,
  .site-header__meta > .language-switcher,
  .site-header__meta > form:not(.language-switcher) { display: none; }
  .menu-toggle {
    display: flex;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 12px;
    gap: 6px;
    border: 1px solid rgba(77, 110, 109, .23);
    border-radius: 50%;
    background: rgba(255, 253, 247, .8);
  }
  .menu-toggle span { width: 24px; height: 2px; }
  .day-pills--editorial { top: var(--mobile-header-height); }
}

@media (max-width: 760px) {
  .container { width: min(100% - 2rem, var(--max-width)); }
  #main-content > section,
  #main-content > main > section,
  .guide-card,
  .favorite-place,
  .stay-card,
  .nightlife-card { scroll-margin-top: calc(var(--mobile-header-height) + 14px); }
  .section { padding-block: clamp(3.5rem, 8svh, 5rem); }
  .section__header { margin-bottom: 2rem; }
  .section__header h2 { font-size: clamp(2.25rem, 9vw, 3.1rem); line-height: 1.05; }
  .section__header > p:not(.eyebrow),
  .favorite-places__heading > p,
  .ibiza-cartoon-heading > p { font-size: 1.04rem; line-height: 1.65; }
  .eyebrow { font-size: .72rem; line-height: 1.5; }
  .mobile-nav { padding: 1.35rem 1.4rem max(1.7rem, env(safe-area-inset-bottom)); }
  .mobile-nav a { min-height: 53px; padding-block: .72rem; font-size: clamp(1.15rem, 5.1vw, 1.4rem); }
  .mobile-nav__head { margin-bottom: .6rem; padding-bottom: 1rem; }
  .mobile-reading .page-scroll-down { opacity: 0; visibility: hidden; pointer-events: none; }
  .mobile-reading .wedding-music-toggle:not(.rsvp-page .wedding-music-toggle) { left: auto; right: .7rem; bottom: calc(4.3rem + env(safe-area-inset-bottom)); }
  .mobile-reading .back-to-top { right: .7rem; bottom: max(.7rem, env(safe-area-inset-bottom)); }

  /* Landing and the wedding programme: large pictures, full paragraphs. */
  .editorial-home-hero,
  .wedding-editorial-hero,
  .ibiza-editorial-hero { min-height: max(570px, calc(100svh - var(--mobile-header-height))); }
  .origin-editorial { padding-block: 4rem 5rem; }
  .origin-editorial__header { margin-bottom: 2rem; }
  .origin-story figure { min-height: 340px; aspect-ratio: 1 / 1; }
  .origin-story__copy { padding: 1.55rem; }
  .origin-story__copy > p:last-child { font-size: 1.04rem; line-height: 1.65; }
  .wedding-days-section { display: block; min-height: 0; padding-block: 2.4rem 1.1rem; }
  .wedding-days-section .section__header h2 { font-size: clamp(1.8rem, 7vw, 2.2rem); }
  .day-pills--editorial .day-pill { min-width: 142px; min-height: 88px; flex: 0 0 142px; }
  .day-pills--editorial .day-pill span { max-width: none; overflow: visible; white-space: normal; text-overflow: clip; font-size: .8rem; line-height: 1.25; }
  .day-panel__chapter--story { gap: 2rem; padding-block: 3rem 4rem; }
  .day-panel__chapter--story .day-panel__intro > p:not(.eyebrow,.day-location) { font-size: 1.05rem; line-height: 1.65; }
  .day-panel__chapter--story { width: 100%; max-width: none; min-height: 0; grid-template-columns: minmax(0, 1fr); transform: none; }
  .day-panel__chapter--story .day-panel__intro { transform: none; }
  .day-panel__chapter--story .main-day-party,
  .welcome-day-gathering,
  .afterparty-day-scene { min-height: 320px; aspect-ratio: 4 / 3; }

  /* Ibiza cards show the full editorial copy instead of a four-line excerpt. */
  .guide-section { padding-block: 4rem 5rem; }
  .guide-section .section__header--wide-title h2 { font-size: clamp(1.85rem, 7.7vw, 2.3rem); line-height: 1.05; }
  .guide-place-filters,
  .favorite-place-filters,
  .ibiza-cartoon-filters { margin-bottom: 1.55rem; }
  .guide-place-filters button,
  .favorite-place-filters button,
  .ibiza-cartoon-filters button { min-height: 48px; padding-inline: 1.05rem; font-size: .81rem; }
  .guide-grid--editorial { gap: 1.35rem; }
  .guide-grid--editorial .guide-card { --guide-photo-height: clamp(285px, 42svh, 385px); min-height: 570px; height: auto; padding-bottom: 1.75rem; }
  .guide-grid--editorial .guide-card__photo,
  .guide-grid--editorial .guide-card__wash { height: var(--guide-photo-height); aspect-ratio: auto; margin-bottom: 1.2rem; }
  .guide-grid--editorial .guide-card__number { top: calc(var(--guide-photo-height) - 26px); }
  .guide-grid--editorial .guide-card h3 { font-size: clamp(1.75rem, 7vw, 2.15rem); line-height: 1.1; }
  .guide-grid--editorial .guide-card > p { display: block; overflow: visible; font-size: 1.04rem; line-height: 1.6; -webkit-line-clamp: unset; line-clamp: unset; }
  .guide-grid--editorial .guide-tags { margin-top: 1.2rem; font-size: .78rem; line-height: 1.35; }
  .guide-card[data-beach-name="Sa Pedrera / Atlantis"] .guide-card__photo img,
  .guide-card[data-beach-name="Far de sa Punta Grossa"] .guide-card__photo img { object-fit: contain; background: #e6eae5; }
  .favorite-places { padding-block: 4rem 5rem; }
  .favorite-place__art { min-height: 320px; aspect-ratio: 5 / 4; }
  .favorite-place__copy { padding: 1.55rem 2.8rem 1.8rem 1.4rem; }
  .favorite-place__copy strong { font-size: clamp(1.8rem, 7vw, 2.2rem); line-height: 1.08; }
  .favorite-place__copy > span { font-size: 1.04rem; line-height: 1.6; }
  .ibiza-cartoon-section { padding-block: 4rem 5rem; }
  .ibiza-cartoon-cards { max-height: none; overflow: visible; padding: .8rem; }
  .ibiza-cartoon-cards .cartoon-place-card { min-height: 0; padding: 1.35rem 1rem; }
  .cartoon-place-card h3 { font-size: 1.35rem; line-height: 1.2; }
  .cartoon-place-card small { font-size: .72rem; }
  .cartoon-place-card p,
  .cartoon-place-card:hover p,
  .cartoon-place-card:focus p,
  .cartoon-place-card.is-active p { max-height: none; margin-top: .6rem; overflow: visible; opacity: 1; font-size: 1rem; line-height: 1.6; }
  .cartoon-place-card a { font-size: .78rem; }
  .nightlife-editorial { min-height: max(680px, calc(100svh - var(--mobile-header-height))); }
  .nightlife-card { min-height: 360px; }
  .nightlife-card > p:not(.eyebrow) { font-size: 1rem; line-height: 1.6; }
  #ibiza-guide-map { height: min(75svh, 650px); min-height: 500px; }

  /* Practical pages have comfortable reading lengths and touch targets. */
  .stay-hero { min-height: max(620px, calc(100svh - var(--mobile-header-height))); }
  .stay-card { margin-bottom: 1.5rem; }
  .stay-card__photo,
  .stay-card__wash { min-height: 310px; aspect-ratio: 5 / 4; }
  .stay-card__body,
  .stay-card:nth-child(even) .stay-card__body { padding: 1.6rem 1.35rem 1.8rem; }
  .stay-card__body > p:not(.stay-card__address) { font-size: 1.04rem; line-height: 1.65; }
  .stay-card__address { font-size: .96rem; line-height: 1.5; }
  .stay-card__badge { font-size: .84rem; }
  .page-getting-there .arrival-guide__header { min-height: max(630px, calc(100svh - var(--mobile-header-height))); }
  .arrival-panel,
  .journey-origin-panel { padding-block: 1.5rem 2.2rem; }
  .arrival-route-list article > div,
  .arrival-route-list .arrival-route-list__facts,
  .arrival-route-list small,
  .journey-package > header > p:last-child,
  .journey-package__warning,
  .journey-line__stop small,
  .journey-costs dt,
  .journey-schedule > div { font-size: .96rem; line-height: 1.6; }
  .dress-editorial,
  .gift-page,
  .world-hero { min-height: calc(100svh - var(--mobile-header-height)); }
  .dress-editorial__art { min-height: 360px; }
  .dress-editorial__copy > p:not(.eyebrow),
  .gift-page__message,
  .world-hero__copy > p:not(.eyebrow) { font-size: 1.05rem; line-height: 1.65; }
  .gift-detail p { font-size: .93rem; line-height: 1.5; }
  .gift-detail small,
  .world-summary dd { font-size: .74rem; line-height: 1.4; }
  .world-heritage__portrait { min-height: 380px; }
}

@media (max-width: 360px) {
  :root { --mobile-header-height: 72px; }
  .container { width: min(100% - 1.5rem, var(--max-width)); }
  .guide-grid--editorial .guide-card { --guide-photo-height: 285px; }
  .site-header__brand { font-size: 1.15rem; }
  .guide-section .section__header--wide-title h2 { font-size: clamp(1.5rem, 7.8vw, 1.65rem); }
}