/* Adapts the WordPress block output to the design: loaded after the other sheets. */

/* Groups wrap their children in an inner container: let the children belong to the group, so the design's grids apply. */
.wp-block-group__inner-container { display: contents; }

/* No default space between blocks: spacing comes from the design classes. */
:root { --wp--style--block-gap: 0; }
.wp-block-group.is-layout-flow > * + *,
.wp-block-group.is-layout-constrained > * + * { margin-block-start: 0; }
.wp-block-group { box-sizing: border-box; }

/* Figures are plain images; the caption, when present, sits under the photo. */
figure.wp-block-image { margin: 0; }
figure.wp-block-image img { display: block; max-width: 100%; height: auto; }

/* Image blocks that carry a design class take the image dimensions of the class. */
figure.band__img, figure.bgsection__img, figure.contact__img { margin: 0; }
figure.band__img img, figure.bgsection__img img, figure.contact__img img,
figure.testimonial__media img { width: 100%; height: 100%; object-fit: cover; }
figure.band__img, figure.bgsection__img, figure.contact__img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The design sets the photo's position on the class (the figure), so the image inside takes it. */
figure.band__img img, figure.bgsection__img img, figure.contact__img img { object-position: inherit; }
figure.occasion-card__media img, figure.duo__media img, figure.territory-mosaic img { width: 100%; }

/* Buttons: the design class is on the link (see villa_button_classes in functions.php). */
.wp-block-buttons { gap: 0; margin: 0; }
.wp-block-button { margin: 0; }
.wp-block-button__link { box-shadow: none; text-decoration: none; height: auto; }
/* The core button sets a dark background; the design's buttons are transparent (their hover rules still apply, they are more specific).
   A colour chosen for a button in the editor adds a has-background class and keeps its colour. */
.wp-block-button__link:where(:not(.has-background)) { background-color: transparent; }

/* Hero: the cover block holds the video and the copy; the copy sits where the design put it. */
.hero.wp-block-cover { min-height: 100svh; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; overflow: hidden; }
.hero .wp-block-cover__video-background { object-fit: cover; }
.hero .wp-block-cover__inner-container { width: 100%; display: grid; align-items: end; }

/* Photo grid (.gal): flatten the gallery list so each photo is a grid cell, as in the design. */
.gal ul.blocks-gallery-grid, .gal li.blocks-gallery-item { display: contents; margin: 0; padding: 0; list-style: none; }
.wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image) { margin: 0; padding: 0; overflow: hidden; background: var(--cream-2); width: auto; }
.wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image) img { width: 100%; object-fit: cover; transition: transform 2s var(--ease), opacity .6s var(--ease); }
.wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image):hover img { transform: scale(1.06); opacity: .9; }

/* Claim strip (.claim-gallery__track): a moving row of photos, as in the design. */
.wp-block-gallery.claim-gallery__track { display: flex; flex-wrap: nowrap; width: max-content; gap: 0; margin: 0; }
.wp-block-gallery.claim-gallery__track.has-nested-images > figure.wp-block-image:not(#individual-image) { flex: 0 0 auto; width: clamp(240px, 24vw, 360px) !important; margin: 0 clamp(8px, 1vw, 14px); }
.wp-block-gallery.claim-gallery__track.has-nested-images > figure.wp-block-image:not(#individual-image) img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Carousels: slides are figures stacked in the stage; the script shows one at a time. */
.carousel__stage figure.carousel__slide { margin: 0; }
.carousel__stage figure.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Venue facts: the definition list became groups of two paragraphs; the design's dt/dd rules also match their classes (see the css files). */
.venue-facts .venue-facts__item { display: block; }

/* FAQ: native details blocks keep the accordion look. */
details.wp-block-details.faq__item > summary { cursor: pointer; }
details.wp-block-details { margin: 0; }

/* Text links (.link-rule): a rule under the text, no button background. The design's icon images are drawn after the label. */
.wp-block-button__link.link-rule { background-color: transparent; border-radius: 0; padding: 5px 0; box-shadow: none; }
.wp-block-button__link.link-rule::after { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: url("../img/icons/arrow-up-right.svg") center / contain no-repeat; }
.wp-block-button__link.link-rule.link-rule--light::after { filter: invert(1); }
.wp-block-button__link.link-rule.link-rule--plain::after { content: none; }
/* On phones the occasion cards are dark photos: their links take a white arrow (the design's rule is in the phone breakpoint only). */
@media (max-width: 720px) {
  .occasion-card .wp-block-button__link.link-rule::after { filter: brightness(0) invert(1); }
}

/* Buttons (.btn): arrow after the label. */
.wp-block-button__link.btn::after { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: url("../img/icons/arrow-right.svg") center / contain no-repeat; filter: invert(1); }
.wp-block-button__link.btn:hover::after, .hero__actions .wp-block-button__link.hero__cta--primary::after { filter: none; }

/* Gallery section ("Immagina il tuo giorno qui"): masonry columns with the design's spacing and crop rhythm (figma-refinement.css).
   The selectors carry :not(#individual-image) to outrank the core gallery rules, as above. */
.gallery-section .wp-block-gallery.gal.has-nested-images { display: block; columns: 4 220px; column-gap: 24px; padding-inline: 0; }
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image) { display: block; width: 100%; margin: 0 0 24px; break-inside: avoid; }
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image) img { height: auto; aspect-ratio: auto; }
@media (max-width: 980px) {
  .gallery-section .wp-block-gallery.gal.has-nested-images { columns: 2 200px; column-gap: 16px; }
  .gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image) { margin-bottom: 16px; }
}
@media (max-width: 720px) {
  .gallery-section .wp-block-gallery.gal.has-nested-images { column-gap: 12px; }
  .gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image) { margin-bottom: 12px; }
}
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image):nth-child(8n+1) img { aspect-ratio: 4 / 5; }
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image):nth-child(8n+2) img { aspect-ratio: 1 / 1; }
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image):nth-child(8n+3) img { aspect-ratio: 3 / 4; }
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image):nth-child(8n+4) img { aspect-ratio: 5 / 4; }
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image):nth-child(8n+5) img { aspect-ratio: 9 / 10; }
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image):nth-child(8n+6) img { aspect-ratio: 7 / 5; }
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image):nth-child(8n+7) img { aspect-ratio: 4 / 5; }
.gallery-section .wp-block-gallery.gal.has-nested-images > figure.wp-block-image:not(#individual-image):nth-child(8n+8) img { aspect-ratio: 6 / 5; }

/* Headings: the design's accent word (a span in the original) is an <em> here: upright, and gold on phones as in the design. */
.occasion__head em { font-style: normal; }
@media (max-width: 720px) { .occasion__head em { color: var(--gold); } }

/* The spaces list uses 16 px arrows. */
.spaces-side .wp-block-button__link.link-rule::after { width: 16px; height: 16px; }
.spaces-side .wp-block-button__link.link-rule { padding: 14px 0 0; }

/* Timeline numbers: the design's <span> is a paragraph here, so the paragraph spacing of the step text does not apply. */
.timeline__step p.timeline__num { margin-top: 0; }
/* Hero copy: the design's .hero__inner rules (style.css, figma-refinement.css), for the cover's inner container. */
.hero .wp-block-cover__inner-container { max-width: none; margin-inline: 0; width: 100%; text-align: center; padding: 0 var(--pad) clamp(4rem, 10vh, 8rem); }
@media (min-width: 981px) {
  .hero .wp-block-cover__inner-container { padding-top: 120px; padding-bottom: clamp(3.5rem, 6vh, 4.75rem); text-align: left; }
}
@media (max-width: 720px) {
  .hero .wp-block-cover__inner-container { padding-bottom: calc(194px + env(safe-area-inset-bottom)); }
}

/* Hero shade: the design's gradient over the film, in place of the block's dim layer. */
.hero .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(180deg, rgba(12, 11, 9, .42) 0%, rgba(12, 11, 9, .12) 42%, rgba(12, 11, 9, .66) 100%) !important; }

/* Hero quick links: the icons are masks in the text colour, the labels are kept in the editor and hidden on the page. */
.hero__quicklinks .wp-block-button__link { font-size: 0; padding: 0; line-height: 1; }
.hero__quicklinks .wp-block-button__link.hero__scroll { font-size: 10px; }
.hero__quicklinks .hero__scroll::after { content: ""; flex: 0 0 auto; width: 20px; height: 30px; background: currentColor; -webkit-mask: url("../img/icons/hero-mouse.svg") center / contain no-repeat; mask: url("../img/icons/hero-mouse.svg") center / contain no-repeat; }
.hero__quicklinks .hero__quick::before { content: ""; flex: 0 0 auto; width: 25px; height: 25px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.hero__quicklinks .hero__quick--map::before { -webkit-mask-image: url("../img/icons/hero-map.svg"); mask-image: url("../img/icons/hero-map.svg"); }
.hero__quicklinks .hero__quick--mail::before { -webkit-mask-image: url("../img/icons/hero-mail.svg"); mask-image: url("../img/icons/hero-mail.svg"); }
.hero__quicklinks .hero__quick--phone::before { -webkit-mask-image: url("../img/icons/hero-phone.svg"); mask-image: url("../img/icons/hero-phone.svg"); }
hr.hero__quicklinks-divider { border: 0; margin: 0 4px; width: 1px; height: 25px; background: currentColor; opacity: .65; }

/* Contact list: the design's label is a block in front of the value. */
.contact__list li > strong { display: block; font-weight: inherit; font-size: 10px; line-height: 18.5px; letter-spacing: 0; color: #e2cab0; text-transform: uppercase; margin-bottom: 2.4px; }

/* Carousel captions (spaces): the design's title and text over the photo; the bold part of the caption is the title. */
.carousel--spaces figure.carousel__slide > figcaption { position: absolute; left: 0; right: 0; bottom: clamp(34px, 6vh, 62px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-inline: 24px; margin: 0; text-align: center; color: rgba(253, 251, 246, .95); pointer-events: none; font-family: var(--sans); font-size: clamp(13px, 1.1vw, 16px); font-weight: 300; line-height: 1.4; }
.carousel--spaces figure.carousel__slide > figcaption strong { display: block; color: #fdfbf6; font-family: var(--display); font-size: clamp(26px, 3.2vw, 46px); font-weight: 400; line-height: 1.1; letter-spacing: .03em; text-shadow: 0 2px 24px rgba(12, 11, 9, .4); }
@media (max-width: 720px) {
  .carousel--spaces figure.carousel__slide > figcaption { font-size: 13px; }
  .carousel--spaces figure.carousel__slide > figcaption strong { font-size: 26px; }
}