/* Essence Site Skeleton — layout fixes 1.0.x (generic patterns found by the visual QA of 9–10 Oct 2026).
   Loaded last by inc/essence-skeleton.php (section 9). Content areas only: never header, footer, mobile bar, hero, Essenze.
   Each block names the QA pattern it fixes; log in work/skeleton-rollout/fixes-global.md. */

/* F1 · Intro copy: long paragraphs (JS tag .rx-long) were forced left under a centred heading while their short
   siblings stayed centred (mixed left/centre inside one intro). Keep the 68ch measure, follow the intro's centring. */
html.rx-on body main .essence-reference-intro .essence-reference-intro__copy p.rx-long,
html body main .essence-reference-intro .essence-reference-intro__copy p.rx-long{text-align:center!important}
@media (max-width:1024px){
  /* same mix in centred travel sections (≤1024 the theme centres their paragraphs, .rx-long pulled one back left) */
  html.rx-on body main .essence-travel-section > p.rx-long{text-align:center!important}
}

/* F2 · Eyebrows / contact block on tablet: the theme's "≤1024 all paragraphs left" rule left the small labels
   (GENERAL ENQUIRIES, FAQ) and the contact lines hard left under centred headings between 601 and 1024px. */
@media (min-width:601px) and (max-width:1024px){
  html body main .essence-contact-info :is(p,h2,h3),
  html body main .essence-contact-info__details,
  html body main .essence-reference-faq__heading :is(p,h2){text-align:center!important}
  html body main .essence-contact-info__details{margin-inline:auto}
}
@media (max-width:1024px){
  /* same label/heading split on the Google-reviews intro and the rooms intro (phone + tablet) */
  html body main :is(.essence-google-reviews__intro,.native-room-intro-copy) > p.essence-eyebrow,
  html body main .essence-google-reviews__intro > p{text-align:center!important}
}

/* F3 · Events panel ("Parliamone insieme"): no side padding from 768px (text on the screen edges) and the
   outline button glued to the paragraph above. */
@media (min-width:768px) and (max-width:1260px){
  html body .essence-events-panel{padding-inline:clamp(20px,3.2vw,40px);box-sizing:border-box}
}
html body .essence-events-panel .wp-block-column > :is(p,ul,ol) + .wp-block-buttons{margin-top:28px}

/* F4 · "Perché Essence Hotels" values: 40px titles in three ~180px columns broke words at tablet width
   (Authenticit/é, Experienc/es). */
@media (min-width:768px) and (max-width:1024px){
  html body main .essence-values .wp-block-columns{gap:24px}
  html body main .essence-values .essence-value-card{padding-inline:10px}
  html body main .essence-values h3{font-size:clamp(26px,3.4vw,36px);line-height:1.1;overflow-wrap:normal;word-break:normal;hyphens:manual}
}

/* F5 · Buttons in left-aligned travel bands: the 960px button row sat on the band padding (x=174) instead of the
   960px text column (x=240), so it floated 66px left of centre. Align the box with the text column. */
@media (min-width:1025px){
  html body main .essence-travel-band > :is(.wp-block-buttons,figure.wp-block-image,p.essence-travel-note){max-width:960px;margin-left:auto;margin-right:auto}
}
/* logos (Egadi Kayak…) sat directly on the heading below them (0px). */
html body main .essence-travel-band > figure.wp-block-image:has(+ .essence-travel-heading){margin-bottom:18px}
/* ≤1024 the theme centred every button row, overriding an explicit left/right justification of the block. */
@media (max-width:1024px){
  html body main .wp-block-buttons.is-content-justification-left{justify-content:flex-start!important}
  html body main .wp-block-buttons.is-content-justification-right{justify-content:flex-end!important}
}

/* F6 · Service / offer cards: button glued to the text (0px), left-aligned in a centred card, staggered heights.
   Cards become equal-height columns with the button row centred and pinned to the bottom. */
html body main .essence-service-card{display:flex;flex-direction:column}
html body main .essence-service-card > .essence-service-card__copy{flex:1 1 auto;display:flex;flex-direction:column}
html body main .essence-service-card__copy > .wp-block-buttons{margin-top:auto;padding-top:24px;justify-content:center}

/* F7 · Travel tables: the table's 40px bottom margin stayed inside the white card (extra blank row). */
html body main .essence-travel-table > table{margin-bottom:0}

/* F8 · Restaurant menu viewer (Google Slides embed). The "open in full screen" link is centred everywhere; on
   phones the embed shows Google's "slide could not be loaded" black box, so the link becomes the primary action
   and the embed is hidden on phones only (still in the page for tablets/desktop). */
html body main .essence-menu-viewer__fallback,
html body main .essence-menu-viewer + p,
html.rx-on body main p.essence-menu-viewer__fallback{text-align:center!important}
/* Marina's embed: portrait slide in a landscape box = tiny slide with black bars (inline style, hence !important) */
html body main iframe.marina-menu-embed{display:block;width:min(100%,600px)!important;height:auto!important;min-height:0!important;aspect-ratio:600/863;margin-inline:auto}
html body main .essence-marina-menu > .wp-block-buttons{justify-content:center!important}
@media (max-width:600px){
  html body main .essence-menu-viewer:has(+ .essence-menu-viewer__fallback),
  html body main iframe.marina-menu-embed:has(~ .wp-block-buttons){display:none!important}
  html body main .essence-menu-viewer__fallback{margin-top:8px!important}
  html body main .essence-menu-viewer__fallback a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;background:var(--wp--preset--color--essence-teal,#1c7783);color:#fff!important;text-decoration:none!important;letter-spacing:.12em;text-transform:uppercase;font-size:14px;line-height:1.3}
}

/* F9 · Editorial additions (e.g. directions block on Contatti): button row wedged between paragraphs with 0px gap. */
html body main .essence-editorial-addition > :is(p,ul,ol) + .wp-block-buttons{margin-top:24px;margin-bottom:24px}

/* F10 · Three-column travel cards (Di cosa hai bisogno? / Info Point – Grimaldi – Brezza Marina): buttons followed
   their own text length, so they sat at staggered heights. Equal-height cards, button row pinned to the bottom. */
html body main .essence-travel-columns > .essence-travel-card{display:flex;flex-direction:column}
html body main .essence-travel-columns > .essence-travel-card > .wp-block-buttons{margin-top:auto;padding-top:5px}

/* F11 · Photo slider directly followed by the marquee band: thumbnails glued to the band (≈5–12px). */
html body main .essence-room-gallery.essence-service-gallery:has(+ .rx-marquee){margin-bottom:clamp(40px,5vw,64px)}

/* F12 · Short lists marked .essence-list-columns (artists of the summer programme: 13 names in one thin column). */
html body main .essence-travel-section > .wp-block-list.essence-list-columns{columns:3;column-gap:48px;max-width:800px}
html body main .essence-travel-section > .wp-block-list.essence-list-columns li{break-inside:avoid}
@media (max-width:600px){
  html body main .essence-travel-section > .wp-block-list.essence-list-columns{columns:2;column-gap:24px}
}

/* F13 · Navy "Sapori autentici" media-text on tablet: two columns kept at 601–1024, photo small in a corner of a tall
   navy block. Stack it like on phones (photo on top, full width), text below. */
@media (min-width:601px) and (max-width:1024px){
  html body main .wp-block-media-text.essence-restaurant.is-stacked-on-mobile{grid-template-columns:100%!important}
  html body main .wp-block-media-text.essence-restaurant.is-stacked-on-mobile > .wp-block-media-text__media{grid-column:1;grid-row:1;padding:0}
  html body main .wp-block-media-text.essence-restaurant.is-stacked-on-mobile > .wp-block-media-text__content{grid-column:1;grid-row:2;padding:44px clamp(24px,6vw,64px) 52px}
  html body main .wp-block-media-text.essence-restaurant .wp-block-media-text__media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
}

/* F14 · Restaurant story, two text columns: the first paragraph started 10px lower than the second. */
@media (min-width:768px){
  html body main .essence-restaurant-story.essence-editorial-addition > p{padding-top:0}
}

/* F15 · Sea Club night gallery on phones: three stacked photos touching each other (row-gap 0). */
@media (max-width:767px){
  html body main .essence-sea-night-section .essence-sea-night-gallery{gap:16px!important}
}