/* ==========================================================================
   Doina Vin House · assets/woo/experience.css (woo-experience)
   The visit page = house-mockups/pages/experience.html, on visit product pages only
   (inc/woo-experience.php, handle dvh-woo-experience after dvh-woo).
   1. The mockup's own <style>, verbatim: layout only, kit tokens only.
   2. What the WordPress page adds: the hero crop per visit, WooCommerce notices above both columns.
   ========================================================================== */

/* ---- 1. pages/experience.html ------------------------------------------------------------- */
.pg-experience-layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-7); padding-block: var(--sp-3) var(--section); }
.pg-experience-intro { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "hero" "head" "facts"; row-gap: var(--sp-4); min-width: 0; }
.pg-experience-crumbs { grid-area: crumbs; }
.pg-experience-head { grid-area: head; }
.pg-experience-head .dvh-h1-wine { margin-top: var(--sp-1); }
.pg-experience-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-3); }
.pg-experience-pitch { margin-top: var(--sp-3); }
/* what the package includes (owner 2026-10-18), under the lead */
.pg-experience-incl { margin-top: var(--sp-3); padding-top: 0; border-top: 0; }
.pg-experience-incl li { font-size: var(--fs-ui); line-height: 22px; }
/* hero: full bleed on the phone (3:2), a 21:9 strip on desktop; both crops keep the cable tray out */
.pg-experience-hero { grid-area: hero; margin: 0 calc(-1 * var(--page-gutter)); --zoom: 1.45; --focus: 100% 100%; }
.pg-experience-hero .dvh-hero__media { aspect-ratio: 3 / 2; }
.pg-experience-facts { grid-area: facts; margin-top: var(--sp-1); }
.pg-experience-facts__more { grid-column: 1 / -1; }
.pg-experience-book { min-width: 0; }
.pg-experience-book__title { margin-bottom: var(--sp-4); }
.pg-experience-more { min-width: 0; }
.pg-experience-more > * + * { margin-top: var(--sp-8); }
.pg-experience-sec .dvh-sechead { margin-bottom: var(--sp-5); }
.pg-experience-sec .dvh-spectable { border-top: 1px solid var(--line); }
.pg-experience-others__all { margin-top: var(--sp-5); }
@media (min-width: 900px) {
  .pg-experience-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "intro book" "more book";
    column-gap: var(--sp-7); row-gap: var(--sp-8); padding-top: var(--sp-5);
  }
  .pg-experience-intro { grid-area: intro; grid-template-areas: "crumbs" "head" "hero" "facts"; row-gap: var(--sp-5); }
  .pg-experience-book { grid-area: book; }
  .pg-experience-more { grid-area: more; }
  .pg-experience-head { margin-top: calc(-1 * var(--sp-2)); }
  .pg-experience-price { display: none; }   /* the desktop price lives in the booking card */
  .pg-experience-hero { margin: 0; --zoom: 1; --focus: 50% 100%; }
  .pg-experience-hero .dvh-hero__media { aspect-ratio: 21 / 9; border-radius: var(--radius-media); }
  .pg-experience-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .pg-experience-book__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }   /* "Alege data" glides to the dates */

/* ---- 2. WordPress additions ----------------------------------------------------------------- */
/* hero crop: the phone crop is the visit's own (story crop, printed as --hero-zoom / --hero-focus);
   the desktop strip keeps the mockup's crop. A visit without a crop shows its picture centred. */
@media (max-width: 899.98px) {
  .pg-experience-hero[style] { --zoom: var(--hero-zoom, 1.45); --focus: var(--hero-focus, 100% 100%); }
}
.pg-experience-hero.pg-experience-hero--plain { --zoom: 1; --focus: 50% 50%; }

/* Booking card (2026-10-17): the time note when no start times are offered, the "pick a day" error,
   and dv-checkout-flow's group-size note printed after the button */
.pg-experience-book .dvh-cal .dvh-error { margin-top: var(--sp-2); }
.dvh-booking:not(.dvh-booking--enhanced) .pg-experience-timenote { display: none; }   /* no JS: dv-tour-booking's own note shows */
.pg-experience-book .dv-flow-group { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); text-wrap: pretty; }

/* WooCommerce notices (a booking that failed a rule comes back here): above both columns */
@media (min-width: 900px) {
  .pg-experience-layout:has(> .pg-experience-notices) { grid-template-areas: "notices notices" "intro book" "more book"; }
  .pg-experience-notices { grid-area: notices; }
}