/**
 * Aesthetic branch — minimal additions (enqueued after site.css).
 *
 * 1. `.hg-variant` wraps each merged variant's sections on a group page. It must be layout-transparent
 *    so the sections lay out as direct children of `.sections` (identical to a standalone page).
 * 2. The promo-packages grid is `repeat(3, 1fr)` in its base (no-device) state. On the aesthetic hub the
 *    long package titles give the cards a ~197px min-content, so the 3-column grid briefly overflows a
 *    phone viewport during the first layout — before responsive.js (which runs at DOMContentLoaded, after
 *    that first layout) can add the `#root.mobile` class. On a mobile emulation that transient overflow
 *    locks the layout viewport wide, so responsive.js then reads a desktop width and the whole hub renders
 *    at desktop sizes. Clipping the section's horizontal overflow contains the transient (once `.mobile`
 *    applies, the grid is a single column and nothing is clipped), keeping the viewport at device width.
 */
.hg-variant { display: contents; }

.aesthetic-hub #packages,
.aesthetic #packages { overflow-x: clip; }

/*
 * Hospitals device switch. Like the medical Hospitals wrapper, section-hospitals.php renders both a
 * desktop carousel (.hospitals, data-v-1df86896) and a stacked mobile variant (.hospitals-mobile,
 * data-v-544eb162); hide the one the current #root device class must not show. Before responsive.js
 * classifies the viewport, neither class exists and the desktop variant shows (matching the original).
 */
#root.mobile .hospitals[data-v-1df86896],
#root:not(.mobile) .hospitals-mobile[data-v-544eb162] {
	display: none;
}

/*
 * Prices rows: the numbered "01/02…" count is rendered only on desktop in the original (v-if pc; the
 * mobile DOM has an empty comment there). This theme server-renders one markup for both devices, so
 * hide the count on mobile — otherwise it keeps its min-content width and shifts the title/price ~37px.
 */
#root.mobile .prices[data-v-45348e99] .row-wrapper .count[data-v-db4e3a4d] {
	display: none;
}

