/* =========================================================================
   MOBILE COMPACT REFINEMENT · M'Imbarco
   Refinement-only stylesheet. Loaded LAST, after page-shell.css, on the
   12 in-scope pages only (never on termini.html / privacy.html / cookie.html).
   Every rule below is scoped inside a max-width media query so desktop and
   large-tablet layouts are guaranteed untouched. Aligns with the project's
   existing 760px mobile breakpoint convention (see sea.css/styles.css/etc.)
   with 430px / 390px sub-refinements for the smallest phones.
   ========================================================================= */

@media (max-width: 760px) {

  /* ---------- Global spacing compaction ---------- */
  .section{padding:var(--section-y) 0}
  .band-paper.section,.band-sand.section,.band-sky.section,.band-mint.section,.band-ink.section{padding:var(--section-y) 0}
  .mi-bridge{padding:var(--section-y) 0}
  .shell{padding-left:18px;padding-right:18px}

  /* ---------- Hero compaction (all page-hero variants + template heroes) ---------- */
  .page-hero{padding:var(--page-hero-top) 0 var(--page-hero-bottom)}
  .page-hero .page-lead{font-size:15.5px}
  .archive-head{padding:var(--page-hero-top) 0 var(--page-hero-bottom)}
  .blog-head,.template-hero{padding-top:70px}
  .destination-hero{height:auto;min-height:420px;padding-top:20px}
  .destination-hero .shell{padding-bottom:36px}
  .destination-hero h1{font-size:44px!important}

  /* ---------- Touch targets ---------- */
  a.button,button.button,.button{min-height:46px}
  .accordion.ticket-panel summary,.service-detail-accordion summary,details summary{min-height:44px;display:flex;align-items:center}

  /* ---------- Existing accordion compaction (FAQ + servizi approfondimenti) ---------- */
  .accordion.ticket-panel details{padding:0}
  .accordion.ticket-panel summary{padding:14px 4px;font-size:15px}
  .accordion.ticket-panel details > p{padding:0 4px 16px;font-size:14px}
  .service-detail-accordion summary{padding:14px 4px}

  /* ---------- Carousel conversion: self-contained card components only ---------- */
  .mi-bridge-grid,
  .route-rail,
  .archive-grid,
  .seasonal-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:18px;
    gap:14px;
    margin-inline:-18px;
    padding-inline:18px;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mi-bridge-grid::-webkit-scrollbar,
  .route-rail::-webkit-scrollbar,
  .archive-grid::-webkit-scrollbar,
  .seasonal-grid::-webkit-scrollbar{display:none;height:0}

  .mi-bridge-grid > *{flex:0 0 82%;scroll-snap-align:start}
  .route-rail > a{flex:0 0 62%;scroll-snap-align:start;border-right:1px solid var(--line)!important;border-bottom:0!important}
  .archive-grid > *{flex:0 0 78%;scroll-snap-align:start}
  .archive-grid .destination-card{height:340px}
  .seasonal-grid > *{flex:0 0 68%;scroll-snap-align:start}

  /* ---------- servizio.html: "cosa valutare" -> native accordion ---------- */
  .valutare-grid{display:block;margin-top:20px}
  .valutare-grid details.info-card{
    display:block;padding:0;border-bottom:1px solid var(--line);
  }
  .valutare-grid details.info-card summary{
    display:flex;align-items:center;
    list-style:none;cursor:pointer;padding:14px 26px 14px 0;position:relative;
    font:600 15px/1.4 Manrope,sans-serif;color:var(--ink);min-height:auto;
  }
  .valutare-grid details.info-card summary::-webkit-details-marker{display:none}
  .valutare-grid details.info-card summary span{display:inline;margin-right:8px;color:var(--muted);font-weight:500}
  .valutare-grid details.info-card summary h3{margin:0}
  .valutare-grid details.info-card summary:after{
    content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
    font-size:20px;color:var(--coral);
  }
  .valutare-grid details.info-card[open] summary:after{content:"-"}
  .valutare-grid details.info-card p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--muted)}

  /* ---------- destinazione.html: secondary sections -> accordion ---------- */
  .guide-body details.dest-detail{border-bottom:1px solid var(--line);margin-top:0}
  .guide-body details.dest-detail summary{
    display:block;
    list-style:none;cursor:pointer;padding:20px 30px 20px 0;position:relative;min-height:auto;
  }
  .guide-body details.dest-detail summary::-webkit-details-marker{display:none}
  .guide-body details.dest-detail summary h2{margin:0;font-size:22px;display:inline}
  .guide-body details.dest-detail summary:after{
    content:"+";position:absolute;right:2px;top:20px;font-size:22px;color:var(--coral);
  }
  .guide-body details.dest-detail[open] summary:after{content:"-"}
  .guide-body details.dest-detail p{margin:0 0 22px}

  /* ---------- Home hero: un po' più giù su mobile ---------- */
  .hero{min-height:0;height:auto;padding:112px 0 30px;align-items:flex-start}
  .hero-content{
    display:flex;flex-direction:column;align-items:flex-start;
    padding-top:18px;width:100%;
  }
  /* Kicker/gate: non sotto il logo, dopo H1 */
  .hero-content > .eyebrow{order:1;margin-bottom:12px}
  .hero-content > h1{order:2}
  .hero-content > .hero-gate{
    order:3;margin:16px 0 0;align-self:flex-start;
  }
  .hero-content > .hero-lead{order:4;margin:14px 0 18px}
  .hero-content > .journey-finder{order:5;margin-top:4px;width:100%}
  .hero-content > .trust-line{order:6;margin-top:8px;gap:4px;font-size:10px;line-height:1.3}
  .hero h1{font-size:36px}
  .hero-lead{font-size:15px}

  /* ---------- Servizi: 9 service cards -> carousel ---------- */
  .service-grid,
  .services-page .service-grid{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;scroll-padding-inline:18px;gap:14px;
    margin-inline:-18px;padding-inline:18px;padding-bottom:6px;
    border:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .service-grid::-webkit-scrollbar,
  .services-page .service-grid::-webkit-scrollbar{display:none;height:0}
  .service-grid > .service-card,
  .services-page .service-grid > .service-card{
    flex:0 0 76%;scroll-snap-align:start;
    border:1px solid var(--line);border-radius:14px;min-height:190px;
  }
  .service-grid > .service-featured,
  .services-page .service-grid > .service-featured{flex:0 0 76%;grid-column:auto}

  /* Chi siamo / split: gap % su mobile faceva sovrapporre testo e card */
  .split-content{gap:28px}
  .direction-aside{position:static;margin:0 0 8px}
  .mi-direction-visual{margin:8px 0 4px}
  .info-grid{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;scroll-padding-inline:18px;gap:14px;
    margin-inline:-18px;padding-inline:18px;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    position:relative;z-index:1;
  }
  .info-grid::-webkit-scrollbar{display:none;height:0}
  .info-grid > .info-card{
    flex:0 0 76%;scroll-snap-align:start;
    transform:none!important;opacity:1!important;
  }

  /* ---------- Ispirazioni: 6 mood-detail blocks -> accordion ---------- */
  .mood-detail{padding-top:0;margin-top:0}
  .mood-detail summary{
    list-style:none;cursor:pointer;padding:18px 30px 18px 0;position:relative;
    min-height:44px;display:flex;align-items:center;
  }
  .mood-detail summary h3{margin:0;font-size:17px}
  .mood-detail summary:after{
    content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
    font-size:20px;color:var(--coral);
  }
  .mood-detail[open] summary:after{content:"-"}
  .mood-detail p{margin:0 0 10px}
  .mood-detail > a{display:inline-block;margin:0 0 18px}

  /* ---------- Home: Ispirazioni di viaggio -> swipe carousel ----------
     .article-grid is 3-col desktop / 1-col stacked in styles.css. Keep desktop
     untouched; on mobile match the other home carousels (peek next card). */
  .journal .article-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:18px;
    gap:14px;
    margin-inline:-18px;
    padding-inline:18px;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .journal .article-grid::-webkit-scrollbar{display:none;height:0}
  .journal .article-grid > .article-card{
    flex:0 0 76%;
    scroll-snap-align:start;
    min-width:0;
  }

  /* ---------- Home: "Semplice per davvero" tickets -> carousel ----------
     Scoped to .process-tickets so servizio.html "Come funziona" stays vertical. */
  .process-tickets .ticket-stack{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;scroll-padding-inline:18px;gap:14px;
    margin-inline:-18px;padding-inline:18px;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .process-tickets .ticket-stack::-webkit-scrollbar{display:none;height:0}
  .process-tickets .ticket-stack > .mi-ticket{
    flex:0 0 76%;scroll-snap-align:start;min-width:0;
  }

  /* ---------- Home: Guide links -> carousel ---------- */
  .editorial-band .guide-links{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;scroll-padding-inline:18px;gap:14px;
    margin-inline:-18px;margin-bottom:24px;padding-inline:18px;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .editorial-band .guide-links::-webkit-scrollbar{display:none;height:0}
  .editorial-band .guide-links > a{
    flex:0 0 76%;scroll-snap-align:start;min-width:0;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
    gap:18px;min-height:150px;padding:18px 16px;
    border:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);
    border-radius:14px;background:rgba(255,255,255,.06);
    box-sizing:border-box;
  }
  .editorial-band .guide-links > a span{opacity:.7;font-size:10px;letter-spacing:.12em}
  .editorial-band .guide-links > a b{align-self:flex-end;margin-top:auto}

  /* ---------- Home: "Prima volta in traghetto" — no crop/clip ----------
     Photo was height:430px + global object-fit:cover (portrait slice of a
     landscape). Badge sat at right:-8px and html/body overflow-x:hidden
     chopped it. H2 line-height 1.14 clipped Playfair descenders (p in
     "risposte" / "semplici"). Scale(1.03) added extra crop on stack. */
  .editorial-band,
  .editorial-band .editorial-layout,
  .editorial-band .editorial-copy{
    overflow:visible;
    max-height:none;
  }
  .editorial-band .editorial-layout{
    align-items:start;
    gap:28px;
    min-width:0;
  }
  .editorial-band .editorial-image{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    min-width:0;
  }
  .editorial-band .editorial-image img{
    width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:4/3;
    object-fit:cover;
    object-position:center 62%;
    transform:none;
  }
  .editorial-band.is-in .editorial-image img{
    transform:none;
  }
  .editorial-band .image-note{
    right:12px;
    bottom:12px;
  }
  .editorial-band .editorial-copy{
    min-width:0;
  }
  .editorial-band .editorial-copy .eyebrow,
  .editorial-band .editorial-copy h2,
  .editorial-band .editorial-copy h2 em,
  .editorial-band .editorial-copy > p{
    overflow:visible;
    max-height:none;
  }
  .editorial-band .editorial-copy h2{
    line-height:1.2;
    padding-bottom:.14em;
  }
  .editorial-band .button-light{
    min-height:44px;
  }

  /* ---------- Home: Perché M'Imbarco -> carousel ---------- */
  .ticket-promise .promise-list.ticket-cards{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;scroll-padding-inline:18px;gap:14px;
    margin-inline:-18px;margin-top:18px;padding-inline:18px;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .ticket-promise .promise-list.ticket-cards::-webkit-scrollbar{display:none;height:0}
  .ticket-promise .promise-list.ticket-cards > div{
    flex:0 0 76%;scroll-snap-align:start;min-width:0;
  }

  /* ---------- Home FAQ: kicker separation from previous block ---------- */
  .faq.section{
    padding:var(--section-y) 0;
    margin-top:0;
  }
  .faq.section .faq-layout > div:first-child{
    margin-bottom:22px;
  }
  .faq.section .faq-layout > div:first-child .eyebrow{
    display:block;
    margin-top:0;
  }

  /* ---------- Home FAQ: question text vs + icon clearance ---------- */
  .faq.section .accordion.ticket-panel summary{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:16px 0;
    font-size:15px;
    min-height:44px;
    position:relative;
  }
  .faq.section .accordion.ticket-panel summary .faq-q{
    flex:1 1 auto;
    min-width:0;
    padding-right:0;
  }
  .faq.section .accordion.ticket-panel summary > span:not(.faq-q){
    position:relative;
    inset:auto;
    right:auto;
    top:auto;
    flex:0 0 22px;
    width:15px;
    height:1px;
    margin-top:11px;
    margin-right:2px;
    align-self:flex-start;
    background:var(--ink);
  }
  .faq.section .accordion.ticket-panel summary > span:not(.faq-q):after{
    position:absolute;
    inset:0;
    width:15px;
    height:1px;
    background:var(--ink);
    content:"";
    transform:rotate(90deg);
  }
  .faq.section .accordion.ticket-panel details > p{
    padding-right:12px;
  }

  /* ---------- Footer: secondary link groups compaction ---------- */
  .footer-top{gap:28px}

  /* ---------- Read-more / "Continua a leggere" ---------- */
  [data-readmore]{
    position:relative;max-height:8.6em;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 65%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 65%,transparent 100%);
  }
  [data-readmore].is-expanded{
    max-height:none;-webkit-mask-image:none;mask-image:none;
  }
  .readmore-toggle{
    display:inline-flex;align-items:center;gap:6px;margin-top:10px;
    background:none;border:0;padding:6px 0;font:600 14px Manrope,sans-serif;
    color:var(--coral-dark,var(--coral));cursor:pointer;min-height:44px;
  }
}

@media (max-width: 430px) {
  .page-hero{padding:var(--page-hero-top) 0 var(--page-hero-bottom)}
  .section{padding:var(--section-y) 0}
  .faq.section{padding:var(--section-y) 0}
  .mi-bridge-grid > *{flex:0 0 90%}
  .route-rail > a{flex:0 0 76%}
  .archive-grid > *{flex:0 0 88%}
  .seasonal-grid > *{flex:0 0 80%}
  .destination-hero h1{font-size:38px!important}
  .hero{padding:96px 0 26px}
  .hero h1{font-size:32px}
  .service-grid > .service-card,
  .services-page .service-grid > .service-card,
  .service-grid > .service-featured,
  .services-page .service-grid > .service-featured{flex:0 0 86%}
  .info-grid > .info-card{flex:0 0 86%}
  .process-tickets .ticket-stack > .mi-ticket,
  .editorial-band .guide-links > a,
  .ticket-promise .promise-list.ticket-cards > div,
  .journal .article-grid > .article-card{flex:0 0 86%}
}

@media (max-width: 390px) {
  .shell{padding-left:16px;padding-right:16px}
  .mi-bridge-grid,.route-rail,.archive-grid,.seasonal-grid,
  .service-grid,.services-page .service-grid,.info-grid,
  .process-tickets .ticket-stack,
  .editorial-band .guide-links,
  .ticket-promise .promise-list.ticket-cards,
  .journal .article-grid{margin-inline:-16px;padding-inline:16px}
}

@media (prefers-reduced-motion: reduce) {
  @media (max-width:760px){
    .mi-bridge-grid,.route-rail,.archive-grid,.seasonal-grid,
    .process-tickets .ticket-stack,
    .editorial-band .guide-links,
    .ticket-promise .promise-list.ticket-cards,
    .journal .article-grid,
    .service-grid,.info-grid{scroll-behavior:auto}
  }
}

/* ---------- Home FAQ: keep .faq-q as text, not as the + bar ----------
   styles.css styles `.accordion summary span` as the + icon. Wrapping the
   question in .faq-q would otherwise inherit that absolute bar on desktop. */
.faq .accordion.ticket-panel summary > .faq-q{
  position:static;
  inset:auto;
  right:auto;
  top:auto;
  width:auto;
  height:auto;
  background:none;
  transform:none;
}
.faq .accordion.ticket-panel summary > .faq-q::before,
.faq .accordion.ticket-panel summary > .faq-q::after{
  content:none;
  display:none;
}

/* ---------- Native <summary> marker reset (all viewports) ----------
   These three groups are the only places the refinement introduced a
   <details>/<summary> element where none existed before (servizio.html
   "cosa valutare", destinazione.html secondary sections, ispirazioni.html
   mood-detail blocks). Browsers draw a default disclosure marker on every
   <summary> regardless of viewport; without resetting it here, that marker
   would appear on DESKTOP too, which never had one. This reset is required
   at all sizes to keep desktop unchanged, it does not touch any
   selector/element that existed before the refinement.
   NOTE: intentionally does NOT set `display` here, that stayed scoped to
   each media query (mobile needs display:flex for the number/title/icon
   row on .valutare-grid summary; desktop needs display:block). Setting
   display in this unscoped rule was overriding the mobile display:flex
   because it came later in the cascade at equal specificity, that was
   the bug fixed in this pass. */
.valutare-grid details.info-card summary,
.guide-body details.dest-detail summary,
.mood-detail summary{
  list-style:none;
}
.valutare-grid details.info-card summary::-webkit-details-marker,
.guide-body details.dest-detail summary::-webkit-details-marker,
.mood-detail summary::-webkit-details-marker{display:none}
.valutare-grid details.info-card summary::marker,
.guide-body details.dest-detail summary::marker,
.mood-detail summary::marker{display:none}

/* ---------- Desktop-freeze: robust, non-collapsing solution ----------
   IMPORTANT: this deliberately does NOT use display:contents. On
   servizio.html, display:contents strips the .info-card element's own box
   (border/padding/background/shadow) and lets its children (summary, p)
   become independent grid items, breaking the 4-card layout. On
   destinazione.html it makes spacing depend on fragile margin-collapse
   behaviour through the new <summary> wrapper.
   Instead, at >760px the <details> stay as normal boxes (so .info-card's
   border/padding/shadow render exactly as before, and .dest-detail /
   .mood-detail keep their original box), forced open via JS
   (mobile-refine.js) and made non-collapsible (clicks on <summary> are
   intercepted). Only the interactive affordance (cursor, marker) differs
   between mobile and desktop; the box, layout and spacing are identical
   to the pre-refinement desktop. */
@media (min-width: 761px) {
  .valutare-grid details.info-card summary,
  .guide-body details.dest-detail summary,
  .mood-detail summary{display:block;cursor:default}

  /* Reproduce the exact original heading spacing explicitly, instead of
     relying on margin-collapse through the new <summary> wrapper. */
  .guide-body details.dest-detail{margin-top:36px}
  .guide-body details.dest-detail summary h2{margin:0}
}