/* A roomier mobile reading rhythm. Desktop layout remains unchanged. */
.mobile-spotify-invite { display: none; }
.day-pills__mobile-hint { display: none; }
.day-pills--editorial .day-pill--soft { display: none; }

@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; }
  .site-header__meta { gap: .55rem; }
  .mobile-spotify-invite {
    position: relative;
    display: block;
    flex: 0 0 auto;
    z-index: 142;
  }
  .mobile-spotify-invite__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 48px;
    padding: .5rem .72rem .5rem .55rem;
    border: 1px solid rgba(15, 126, 54, .18);
    border-radius: 999px;
    background: #1db954;
    box-shadow: 0 8px 20px rgba(29, 185, 84, .2);
    color: #fff;
    cursor: pointer;
    font: 600 .7rem/1 var(--font-sans);
    letter-spacing: .035em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .mobile-spotify-invite__trigger:hover,
  .mobile-spotify-invite__trigger:focus-visible,
  .mobile-spotify-invite.is-open .mobile-spotify-invite__trigger {
    background: #159b45;
    box-shadow: 0 10px 24px rgba(29, 185, 84, .3);
    transform: translateY(-1px);
  }
  .mobile-spotify-invite__trigger svg {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
  }
  .mobile-spotify-invite__trigger svg circle { fill: currentColor; }
  .mobile-spotify-invite__trigger svg path {
    fill: none;
    stroke: #1b8e43;
    stroke-width: 1.8;
    stroke-linecap: round;
  }
  .mobile-spotify-invite__popup {
    position: fixed;
    z-index: 145;
    top: calc(var(--mobile-header-height) + .65rem);
    right: max(1rem, env(safe-area-inset-right));
    width: min(320px, calc(100vw - 2rem));
    padding: 1rem 2.8rem 1rem 1rem;
    border: 1px solid rgba(58, 91, 77, .18);
    border-radius: 16px;
    background: rgba(255, 253, 248, .985);
    box-shadow: 0 18px 48px rgba(30, 48, 42, .22);
    color: var(--color-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: 82% top;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    pointer-events: none;
  }
  .mobile-spotify-invite__popup::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 84px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(58, 91, 77, .18);
    border-left: 1px solid rgba(58, 91, 77, .18);
    background: #fffdf8;
    transform: rotate(45deg);
  }
  .mobile-spotify-invite.is-open .mobile-spotify-invite__popup {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .mobile-spotify-invite__popup strong {
    display: block;
    margin-bottom: .25rem;
    color: #14883d;
    font: 600 .68rem/1 var(--font-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .mobile-spotify-invite__popup p {
    margin: 0 0 .8rem;
    color: #4b514b;
    font: 500 .84rem/1.45 var(--font-sans);
  }
  .mobile-spotify-invite__popup > a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .62rem .8rem;
    border-radius: 999px;
    background: #1db954;
    color: #fff;
    font: 600 .68rem/1.2 var(--font-sans);
    letter-spacing: .025em;
    text-decoration: none;
  }
  .mobile-spotify-invite__popup > a::after { content: none; }
  .mobile-spotify-invite__close {
    position: absolute;
    top: .65rem;
    right: .65rem;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(72, 93, 84, .16);
    border-radius: 50%;
    background: #f4f1e9;
    color: #59625b;
    cursor: pointer;
    font: 400 1.15rem/1 var(--font-sans);
  }
  .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 .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)); }
  .ibiza-page .page-scroll-down { display: flex; }

  /* 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: 0; aspect-ratio: 4 / 3; }
  .origin-story--naples figure { min-height: 0; aspect-ratio: 4 / 3; }
  .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: 128px; min-height: 88px; flex: 0 0 128px; }
  .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-pills__mobile-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: .55rem;
    color: rgba(74,105,104,.82);
    font: 600 .68rem/1 var(--font-sans);
    letter-spacing: .12em;
  }
  .day-pills__mobile-hint b { color: var(--color-terracotta); font-size: 1.05rem; font-weight: 400; }
  .day-pills__mobile-hint span { min-width: 42px; }
  .day-pills__mobile-hint span:first-child { text-align: right; }
  .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--planning .day-planning__heading { display: none; }
  .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); }
}

/* Mobile artwork pass: dedicated portrait scenes and lighter, readable veils. */
@media (max-width: 760px) {
  .editorial-home-hero {
    min-height: max(594px, calc(100svh - var(--mobile-header-height) + 24px));
  }
  .editorial-home-hero {
    background:
      linear-gradient(180deg, rgba(251,246,236,.04) 0 42%, rgba(251,246,236,.5) 65%, rgba(251,246,236,.94) 100%),
      url("../img/martin-blanca-ibiza-watercolor-mobile-v1.webp") center 78% / auto 130% no-repeat;
  }
  .editorial-home-hero .hero__content {
    margin: auto 1rem .55rem;
    background: rgba(251,246,236,.53);
    border-left-color: rgba(166,91,71,.72);
    box-shadow: 0 18px 44px rgba(47,63,59,.11);
    backdrop-filter: blur(4px);
  }

  .wedding-editorial-hero__image img {
    content: url("../img/wedding-week-editorial-mobile-v1.webp");
    object-position: center;
    filter: saturate(.82) contrast(.98) brightness(1.01);
  }
  .wedding-editorial-hero__image::after {
    background: linear-gradient(0deg, rgba(250,247,240,.94) 0 27%, rgba(250,247,240,.5) 48%, rgba(250,247,240,.08) 70%, transparent 82%);
  }

  .welcome-gate__art {
    opacity: .58;
  }
  .welcome-gate__art img {
    content: url("../img/wedding-week-editorial-mobile-v1.webp");
    object-position: center;
    filter: saturate(.78) brightness(1.03);
  }
  .welcome-gate__art::after {
    background: rgba(248,241,229,.28);
  }
  .welcome-gate--editorial .welcome-gate__card {
    background: rgba(252,249,242,.84);
    backdrop-filter: blur(5px);
  }

  .page-getting-there .arrival-guide__mural {
    content: url("../img/como-llegar-mural-mobile-v1.webp");
    object-position: center;
    filter: saturate(.88) contrast(1.02);
  }
  .page-getting-there .arrival-guide__header::after {
    background:
      radial-gradient(ellipse at center, rgba(248,244,235,.64) 0 18%, rgba(248,244,235,.34) 38%, transparent 62%),
      linear-gradient(0deg, rgba(248,244,235,.7) 0, rgba(248,244,235,.12) 32%, transparent 55%);
  }

  .ibiza-editorial-hero__art { background-position: 28% center; }
  .ibiza-editorial-hero__art img {
    object-position: 28% center;
    transform: scale(1.04);
    opacity: .68;
    filter: saturate(.86) contrast(.98) brightness(1.02);
  }
  .ibiza-editorial-hero__art::after {
    background: linear-gradient(0deg, rgba(251,248,241,.94) 0 29%, rgba(251,248,241,.42) 49%, rgba(251,248,241,.06) 70%, transparent 80%);
  }

  .stay-hero {
    background-image:
      linear-gradient(180deg, rgba(250,248,242,.94) 0%, rgba(250,248,242,.67) 41%, rgba(250,248,242,.08) 68%),
      url("../img/stay-casa-payesa-background-v1.webp");
    background-position: 78% center;
  }
  .page-stay .stay-hero {
    align-items: start;
  }
  .page-stay .stay-hero__content {
    padding-block: 1.5rem 1rem;
  }

  .gift-page {
    min-height: auto;
    padding-bottom: 1.5rem;
    background-image: url("../img/gift-skydiving-martin-blanca-mobile-v1.webp");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .gift-page::before {
    background: linear-gradient(180deg, rgba(249,246,239,.18) 0%, rgba(249,246,239,.12) 48%, rgba(249,246,239,.08) 100%);
  }
  .gift-detail {
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(5px);
  }

  .world-hero--story {
    min-height: max(720px, calc(100svh - var(--mobile-header-height)));
    background-image: url("../img/world-cultural-mural-mobile-v1.webp");
    background-position: center;
    background-size: cover;
  }
  .world-hero--story::before {
    background:
      radial-gradient(ellipse at 50% 43%, rgba(248,244,235,.92) 0 15%, rgba(248,244,235,.76) 32%, rgba(248,244,235,.2) 57%, transparent 72%),
      linear-gradient(0deg, rgba(248,244,235,.8) 0 12%, rgba(248,244,235,.2) 33%, transparent 49%);
  }
  .world-story-hero__copy {
    padding: 1.25rem .35rem 1rem;
  }
  .world-hero--story .world-story-hero__copy h1 {
    text-shadow: 0 2px 20px rgba(250,247,239,.98);
  }

  .rsvp-drive-art {
    position: relative;
    top: auto;
    display: block;
    height: clamp(240px, 38svh, 340px);
  }
  .rsvp-drive-art img {
    object-position: center 58%;
    filter: saturate(.88) contrast(.98) brightness(1.03);
  }
  .rsvp-drive-art figcaption {
    inset: auto 1rem 1rem;
  }
  .rsvp-drive-art figcaption span { font-size: clamp(1.45rem, 7vw, 2rem); }
  .rsvp-drive-art figcaption small { font-size: .58rem; }

  .dress-editorial__art {
    min-height: clamp(410px, 62svh, 540px);
    margin-top: .75rem;
    background: rgba(255,255,255,.25);
  }
  .dress-editorial__art img {
    filter: saturate(.82) contrast(.98) brightness(1.03);
  }

  /* Dress code: keep the portrait visible from the first mobile viewport. */
  .page-dress-code .dress-editorial {
    min-height: calc(100svh - var(--mobile-header-height));
    padding-block: 1rem 1.5rem;
    align-items: start;
    background: #eef2ee;
  }
  .page-dress-code .dress-editorial__grid {
    position: relative;
    display: block;
    min-height: max(680px, calc(100svh - var(--mobile-header-height) - 2.5rem));
    padding-inline: 0;
    overflow: hidden;
    isolation: isolate;
  }
  .page-dress-code .dress-editorial__art {
    position: absolute;
    z-index: -1;
    inset: 0;
    min-height: 0;
    height: 100%;
    margin: 0;
    background: #e8efec;
  }
  .page-dress-code .dress-editorial__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(249,246,239,.08), rgba(249,246,239,.18));
    pointer-events: none;
  }
  .page-dress-code .dress-editorial__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(.86) contrast(.98) brightness(1.02);
  }
  .page-dress-code .dress-editorial__copy {
    position: relative;
    z-index: 1;
    margin: clamp(225px, 34svh, 285px) .75rem .75rem;
    padding: clamp(1rem, 4.2vw, 1.35rem);
    border: 1px solid rgba(255,255,255,.48);
    background: rgba(251,248,241,.58);
    box-shadow: 0 18px 46px rgba(42,61,56,.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .page-dress-code .dress-editorial__copy h1 {
    margin-block: .45rem .8rem;
    max-width: 11ch;
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: .93;
    text-shadow: 0 1px 16px rgba(255,252,246,.72);
  }
  .page-dress-code .dress-editorial__copy > p:not(.eyebrow) {
    font-size: clamp(.9rem, 4vw, 1rem);
    line-height: 1.5;
  }
  .page-dress-code .dress-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 1rem;
    border-color: rgba(117,103,83,.16);
    background: rgba(255,255,255,.18);
  }
  .page-dress-code .dress-values span {
    min-width: 0;
    padding: .7rem .35rem;
    border-right: 1px solid rgba(117,103,83,.16);
    border-bottom: 0;
    border-color: rgba(117,103,83,.16);
    background: rgba(255,255,255,.2);
    font-size: clamp(.61rem, 2.8vw, .72rem);
    overflow-wrap: anywhere;
  }
  .page-dress-code .dress-values span:last-child { border-right: 0; }

  /* Keep every cultural cameo in the visible lower viewport while scrolling. */
  .sargantana,
  .culture-easter-egg,
  .loco-arts-crosser,
  .pulcinella-crosser,
  .ibiza-dancer-crosser {
    position: fixed;
    z-index: 117;
    bottom: calc(4.25rem + env(safe-area-inset-bottom)) !important;
  }
  .wedding-music-toggle,
  .back-to-top,
  .page-scroll-down {
    z-index: 215;
  }
  .culture-easter-egg {
    width: clamp(68px, 20vw, 90px);
    aspect-ratio: 3 / 5;
  }
}