/* Drink With Us — guides as a full-width scrolling row

   Layered over the existing module rather than replacing it: the grid
   becomes a flex track, and the arrows are injected by the script. */

/* --- Full bleed ------------------------------------------------
   The section breaks out of the row's max-width so the track can run
   to the edge of the screen. Cards bleed off the right, which is the
   cue that the row continues.

   100vw includes the scrollbar on desktop Windows, so the width is
   taken from the document element instead — otherwise the page gains
   a horizontal scrollbar of its own. */

.dwu-guides--row {
	width: 100vw;
	width: calc(100vw - (100vw - 100%));
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
}

/* The head sits on the same gutter as the first card, so the heading
   and the card edge line up. Not centred on a content width — the
   track is full width now, and a centred head would float away from
   the row it belongs to. */

.dwu-guides--row .dwu-guides__head,
.dwu-guides--row .dwu-guides__header {
	display: flex !important;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	max-width: none;
	margin: 0 0 var(--space-6, 1.5rem);
	padding: 0 clamp(16px, 4vw, 40px);
	box-sizing: border-box;
	text-align: left;
}

/* Eyebrow above the heading rather than beside it — space-between
   was throwing them to opposite edges of a very wide row. */
.dwu-guides--row .dwu-guides__eyebrow {
	flex: 1 0 100%;
	margin: 0 0 4px !important;
	text-align: left !important;
}

.dwu-guides--row .dwu-guides__heading,
.dwu-guides--row .dwu-guides__head h2,
.dwu-guides--row .dwu-guides__header h2 {
	margin: 0 !important;
	text-align: left !important;
}

/* Anything else in the section — a "see all" button, an intro —
   keeps the gutter too. */
.dwu-guides--row > *:not(.dwu-guides__grid):not(.dwu-guides__list):not(.dwu-guides__cards):not(.dwu-guides__head):not(.dwu-guides__header) {
	padding-left: clamp(16px, 4vw, 40px);
	padding-right: clamp(16px, 4vw, 40px);
	box-sizing: border-box;
}

/* --- The track -------------------------------------------------- */

.dwu-guides--row .dwu-guides__grid,
.dwu-guides--row .dwu-guides__list,
.dwu-guides--row .dwu-guides__cards {
	display: flex !important;
	grid-template-columns: none !important;
	gap: var(--space-6, 1.5rem);
	margin: 0 !important;
	padding: 4px clamp(16px, 4vw, 40px) 8px !important;
	list-style: none !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-left: clamp(16px, 4vw, 40px);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;

	/* The track runs the full width of the section. Only a gutter
	   holds the first card off the screen edge; the last one carries
	   on past the right, which is the cue that the row continues. */
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

.dwu-guides--row .dwu-guides__grid::-webkit-scrollbar,
.dwu-guides--row .dwu-guides__list::-webkit-scrollbar,
.dwu-guides--row .dwu-guides__cards::-webkit-scrollbar {
	display: none;
}

.dwu-guides--row .dwu-guides__grid:focus-visible,
.dwu-guides--row .dwu-guides__list:focus-visible {
	outline: 2px solid var(--color-forest-green, #0f5a38);
	outline-offset: 4px;
	border-radius: 4px;
}

/* --- Cards ------------------------------------------------------
   A fixed range rather than a percentage: across a full-width track
   a percentage gives enormous cards on a wide monitor. This holds
   them at a readable size and simply shows more of them. */

.dwu-guides--row .dwu-guides__grid > *,
.dwu-guides--row .dwu-guides__list > *,
.dwu-guides--row .dwu-guides__cards > * {
	flex: 0 0 clamp(260px, 22vw, 340px);
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

/* --- Arrows ----------------------------------------------------- */

.dwu-guides__head--has-nav,
.dwu-guides__header.dwu-guides__head--has-nav {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.dwu-guides__nav {
	display: flex;
	gap: 8px;
	flex: none;
}

.dwu-guides__nav[hidden] { display: none; }

.dwu-guides__nav--loose {
	max-width: none;
	margin: 0 0 var(--space-4, 1rem);
	padding-left: clamp(16px, 4vw, 40px);
	padding-right: clamp(16px, 4vw, 40px);
	justify-content: flex-end;
}

.fl-page .dwu-guides .dwu-guides__arrow {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1px solid rgba(15, 46, 38, 0.25) !important;
	border-radius: 50% !important;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

/* SVG chevrons rather than rotated borders — a rotation needs a
   transform override per direction, and the next arrow inherits the
   previous one's if anything else touches transform. */

.fl-page .dwu-guides .dwu-guides__arrow::before {
	content: "";
	width: 9px;
	height: 15px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none' stroke='%230f2e26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 1L1.5 7.5L7.5 14'/%3E%3C/svg%3E");
}

.fl-page .dwu-guides .dwu-guides__arrow--next::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none' stroke='%230f2e26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1L7.5 7.5L1.5 14'/%3E%3C/svg%3E");
}

.fl-page .dwu-guides .dwu-guides__arrow:hover:not(:disabled) {
	background: var(--color-inky-green, #0f2e26) !important;
	border-color: var(--color-inky-green, #0f2e26) !important;
}

.fl-page .dwu-guides .dwu-guides__arrow:hover:not(:disabled)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none' stroke='%23f2ebe0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 1L1.5 7.5L7.5 14'/%3E%3C/svg%3E");
}

.fl-page .dwu-guides .dwu-guides__arrow--next:hover:not(:disabled)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none' stroke='%23f2ebe0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1L7.5 7.5L1.5 14'/%3E%3C/svg%3E");
}

.fl-page .dwu-guides .dwu-guides__arrow:disabled {
	opacity: 0.28;
	cursor: default;
}

@media (max-width: 700px) {
	.dwu-guides--row .dwu-guides__grid > *,
	.dwu-guides--row .dwu-guides__list > *,
	.dwu-guides--row .dwu-guides__cards > * {
		flex: 0 0 78%;
	}

	.dwu-guides__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fl-page .dwu-guides .dwu-guides__arrow {
		transition: none;
	}

	.dwu-guides--row .dwu-guides__grid,
	.dwu-guides--row .dwu-guides__list {
		scroll-behavior: auto;
	}
}

@media print {
	.dwu-guides--row .dwu-guides__grid,
	.dwu-guides--row .dwu-guides__list {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		overflow: visible;
	}

	.dwu-guides__nav { display: none; }
}