/* =============================================================================
 * culture.css — the Culture page, "On The Move"  (templates/culture.php)
 *
 * <body class="focus_page culture-page winemaker-page winemaker-focus-page">
 *
 * The page borrows the two winemaker focus classes on purpose, as the wine
 * focus page does: its hero bar is the markup of the winemaker focus page, and
 * assets/css/winemaker.css already styles it under those classes. This file
 * holds only what the Culture page adds or changes, scoped to .culture-page:
 *
 *   1. the hero skin   — .focus-hero--culture: the blue collage and its ratio
 *   2. the hero cards  — values on one line ("WINE TASTING", "CORK OPENER")
 *   3. the bar         — the canton flag, the date line, Suggested by
 *   4. the steps       — the three-segment rule under the bar
 *   5. Next events     — the jump links and the row of event cards
 *   6. Focus           — the tasting place block (#culture-tasting)
 *   7. Products        — Products Of The Week + the brand focus (#culture-product)
 *   8. Top place       — the full-width "Focus on" band (#culture-top-place)
 *   9. Restaurant      — the restaurant focus + the Top Place row (#culture-restaurant)
 *
 * Enqueued from templates/culture.php after winemaker.css, so equal selectors
 * here win.
 * ========================================================================== */

.culture-page {
	--culture-accent:   #8C0335;   /* EXPLORE, meta line */
	--culture-accent-2: #6E0A30;   /* hover */
	--culture-blue:     #007BA5;   /* the collage blue — active step */
	--culture-text:     #6B5539;   /* event title, date line */
	--culture-muted:    #6B625B;   /* small captions */
}


/* --- 1. Hero skin ---------------------------------------------------------- */

/* assets/img/culture_background.png, 1440 × 1562. The collage is a cut-out on a
   TRANSPARENT ground, so the blue of the design is --focus-hero-bg, painted
   under it (#007BA5, taken from the mockup). Path relative to this file. */
.focus-hero--culture {
	--focus-hero-ratio: 1440 / 1562;
	--focus-hero-bg:    #007BA5;
	background-image: url('../img/culture_background.png');
}

/* The gap between the hero and the quiz pair under it — this page only.
   Set on the quiz section, not as a margin on the hero: winemaker.css zeroes
   its padding-top under .winemaker-page (a class this page borrows), so the
   section is given its space back here. */
.culture-page .np-g3-actions {
	padding-top: 60px;
}


/* --- 2. Hero cards ----------------------------------------------------------
 *
 * winemaker.css puts one word per line (width: min-content); the design keeps
 * "WINE TASTING" and "CORK OPENER" on one line.
 * -------------------------------------------------------------------------- */

.culture-page .focus-hero--culture .focus-hero__card-value {
	width: auto;
	font-size: 24px;
}

.culture-page .focus-hero--culture .focus-hero__card-label {
	font-size: 24px;
}

.culture-page .focus-hero--culture .focus-hero__card-icon {
	width: 24px;
	height: 24px;
}

/* The striped tile of this collage is the burgundy of the planes. */
.culture-page .focus-hero--culture .focus-hero__card--placeholder {
	--focus-hero-stripe: rgba(166, 3, 47, .85);
	background-color: rgba(166, 3, 47, .35);
}


/* --- 3. The bar ------------------------------------------------------------ */

.culture-page .focus-hero__bar .event-hero__main {
	position: relative;
}

/* The canton flag straddles the top edge of the bar, half over the collage —
   the same -26px / translateY(-50%) trick as .event-hero__flag in
   winemaker.css (26px = .event-hero__bar padding-top in event.css). */
.culture-page .culture-hero__flag {
	position: absolute;
	left: 0;
	top: -26px;
	z-index: 2;
	display: block;
	width: 54px;
	height: auto;
	transform: translateY(-50%) rotate(-7deg);
	transform-origin: center center;
}

/* "VAUD – AOC LAVAUX" */
.culture-page .winemaker-focus__meta {
	color: var(--culture-accent);
	font-size: 13px;
}

/* "La Fete Du Vin" */
.culture-page .winemaker-focus__name {
	color: var(--culture-text);
	font-size: 56px;
	line-height: 1.05;
}

/* "Vevey, 26.12.2025 - 18:00" */
.culture-page .culture-hero__when {
	margin-top: 2px;
	font-size: 28px;
	color: var(--culture-text);
	font-weight: 600;
}

.culture-page .winemaker-focus__actions {
	margin-top: 18px;
}

.culture-page .winemaker-focus__btn--primary {
	border-color: var(--culture-accent);
	background: var(--culture-accent);
}

.culture-page .winemaker-focus__btn--primary:hover,
.culture-page .winemaker-focus__btn--primary:focus-visible {
	border-color: var(--culture-accent-2);
	background: var(--culture-accent-2);
}

/* "SUGGESTED BY  FIRST NAME LAST NAME" — the small caption above Taste & Trust. */
.culture-page .culture-hero__suggested {
	margin: 0 0 10px;
	font-family: 'Work Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--culture-muted);
}

.culture-page .culture-hero__suggested-name {
	margin-left: 4px;
	color: var(--culture-blue);
}

.culture-page .winemaker-focus__trust-title {
	font-size: 30px;
}


/* --- 4. The steps ---------------------------------------------------------- */

.culture-page .culture-hero__steps {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding-top: 22px;
}

.culture-page .culture-hero__step {
	display: block;
	width: 92px;
	height: 4px;
	background: rgba(107, 85, 57, .25);
}

.culture-page .culture-hero__step.is-active {
	background: var(--culture-blue);
}


/* --- 5. Next events ------------------------------------------------------- *
 *
 * The jump links are the winemaker focus page's (.winemaker-focus__jump in
 * winemaker.css, which this page borrows); here they are the blue of the
 * design. The events row is np-other-events of event.css — the block under a
 * single event — on the warm off-white band of the mockup.
 * -------------------------------------------------------------------------- */

.culture-page .culture-sections {
	background: #FAF7F4;
}

.culture-page .culture-jump {
	padding-top: 36px;
}

.culture-page .culture-jump .winemaker-focus__jump-link,
.culture-page .culture-jump .winemaker-focus__jump-link:hover,
.culture-page .culture-jump .winemaker-focus__jump-link:focus-visible {
	font-size: 14px;
	color: var(--culture-blue);
}

/* A jump lands with the heading clear of the fixed header — the same 110px
   the winemaker and place anchors use. Every target id of the jump links is
   listed, so the blocks still to come are already right. */
.culture-page #culture-events,
.culture-page #culture-product,
.culture-page #culture-partner,
.culture-page #culture-tasting,
.culture-page #culture-restaurant,
.culture-page #culture-classifieds {
	scroll-margin-top: 110px;
}

/* A smooth scroll for those links — this page only. */
html:has(body.culture-page) {
	scroll-behavior: smooth;
}

.culture-page .culture-events {
	padding: 24px 0 72px;
	background: transparent;
}

.culture-page .culture-events .np-other-events__head {
	align-items: flex-end;
}

/* "Next events" */
.culture-page .culture-events .np-other-events__heading {
	font-size: 50px;
    line-height: 1;
    color: #000;
}

/* "Near you" — the letterspaced italic line under it */
.culture-page .culture-events__subtitle {
	margin: 4px 0 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 30px;
	letter-spacing: .08em;
	color: #8A765C;
	margin-top:-10px;
}

.culture-page .culture-events .np-other-events__showall {
	color: var(--culture-blue);
}

/* The vignette fills its cell, as the cards do. */
.culture-page .culture-events .np-focus-vignette {
	height: 100%;
}

.culture-page .culture-events .np-focus-vignette > a {
	display: block;
	height: 100%;
}

.culture-page .culture-events .np-focus-vignette-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}


/* --- 6. Focus — the tasting place ----------------------------------------- *
 *
 * templates/culture.php, section #culture-tasting. Left: FOCUS, name, pills,
 * description, DETAILS, the owner's taste circle. Right: the map pin, the
 * photo (no frame), SHOW ALL.
 * -------------------------------------------------------------------------- */

.culture-page .culture-focus {
	padding: 70px 0 60px;
	background: #FFFFFF;
}

.culture-page .culture-focus__wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 60px;
	align-items: start;
	overflow: visible;
}

.culture-page .culture-focus__label {
	margin: 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #211A15;
}

.culture-page .culture-focus__title {
	margin: 2px 0 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 50px;
	line-height: 1.1;
	color: #000;
}

.culture-page .culture-focus__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.culture-page .culture-focus__pills li {
	padding: 4px 10px;
	border-radius: 2px;
	background: #E4DED6;
	font-family: 'Work Sans', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #3A322C;
}

.culture-page .culture-focus__desc {
	max-width: 440px;
	margin: 70px 0 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #5F574E;
}

.culture-page .culture-focus__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 110px;
	margin-top: 22px;
	padding: 13px 20px;
	border-radius: 2px;
	background: var(--culture-blue);
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	transition: background-color .18s ease;
}

.culture-page .culture-focus__btn:hover,
.culture-page .culture-focus__btn:focus-visible {
	background: #00607F;
	color: #FFFFFF;
}

/* The rule above "Followers in my taste circle", then the faces. */
.culture-page .culture-focus__followers {
	max-width: 440px;
	margin-top: 12px;
	padding-top: 6px;
	border-top: 1px solid #D9D2C8;
}

.culture-page .culture-focus__followers .event-followers__label {
	margin: 0 0 6px;
	font-family: 'Work Sans', sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #211A15;
}

.culture-page .culture-focus__followers .event-followers__faces {
	display: flex;
}

.culture-page .culture-focus__followers .event-followers__face {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	object-fit: cover;
}

.culture-page .culture-focus__followers .event-followers__face + .event-followers__face {
	margin-left: -10px;
}

/* Right column: the pin sits over the top-right corner, above the photo. */
.culture-page .culture-focus__media {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.culture-page .culture-focus__pin {
	display: block;
	width: 44px;
	height: auto;
	margin-bottom: 26px;
}

.culture-page .culture-focus__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	overflow: hidden;
}

.culture-page .culture-focus__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.culture-page a.culture-focus__image:hover img {
	transform: scale(1.03);
}

.culture-page .culture-focus__showall {
	margin-top: 22px;
	font-family: 'Work Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--culture-blue);
	text-decoration: none;
}

.culture-page .culture-focus__showall:hover {
	text-decoration: underline;
}


/* --- 7. Products Of The Week + Focus — the brand -------------------------- *
 *
 * templates/culture.php, section #culture-product. The three cards are
 * wiize_render_product_card() (render-cards.php, styled by focus_month.css);
 * here they only get their grid. Under them the brand block: FOCUS, name,
 * description and the two outline buttons on the left, the logo on the right.
 * -------------------------------------------------------------------------- */

.culture-page .culture-products {
	padding: 60px 0 80px;
	background: #F3F1ED;
}

.culture-page .culture-products__title {
	margin: 0 0 36px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 50px;
	line-height: 1.1;
	color: #000;
}

.culture-page .culture-products__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	align-items: stretch;
}

.culture-page .culture-products__grid > .np-focus-grape-card {
	width: auto;
	max-width: none;
	margin: 0;
}

/* focus_month.css gives the card image a fixed 240px height and an aspect-ratio,
   which makes the image — and the body under it — narrower than the column,
   centred with empty space on both sides. Here both fill the column, so the
   three cards sit edge to edge with only the thin 6px gap between them. */
.culture-page .culture-products__grid > .np-focus-grape-card > .np-focus-grape-card-image,
.culture-page .culture-products__grid > .np-focus-grape-card > .np-focus-grape-card-body {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	align-self: stretch;
}

.culture-page .culture-products__grid > .np-focus-grape-card > .np-focus-grape-card-image {
	height: auto;
	aspect-ratio: 4 / 5;   /* taller than the square of focus_month.css */
	border-radius: 0;      /* square corners on this page (focus_month.css rounds the top ones) */
}

.culture-page .culture-products__grid > .np-focus-grape-card > .np-focus-grape-card-image img {
	border-radius: 0;
}

.culture-page .culture-products__more {
	display: flex;
	justify-content: flex-end;
}

/* The brand block */
.culture-page .culture-brand {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
	margin-top: 70px;
}

.culture-page .culture-brand .culture-focus__title a {
	color: inherit;
	text-decoration: none;
}

.culture-page .culture-brand__desc {
	max-width: 420px;
	margin: 8px 0 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	line-height: 1.45;
	color: #5F574E;
}

.culture-page .culture-brand__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 44px;
}

.culture-page .culture-brand__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 7px 16px;
	border: 1px solid #CFC7BC;
	border-radius: 2px;
	font-family: 'Work Sans', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #B8AEA2 !important;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease;
}

.culture-page .culture-brand__btn:hover,
.culture-page .culture-brand__btn:focus-visible {
	border-color: #8F7350;
	color: #8F7350 !important;
}

.culture-page .culture-brand__logo img {
	display: block;
	max-width: 180px;
	max-height: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
}


/* --- 8. Focus on — the top tasting place ---------------------------------- *
 *
 * templates/culture.php, section #culture-top-place. A full-width band with
 * the photo of assets/img/default_testing_place.png (1440 × 720 — the band
 * keeps that 2:1 ratio from the tablet width up), a soft shade in the top-left
 * corner so the white text stays legible, the pin in the top-right corner.
 * -------------------------------------------------------------------------- */

.culture-page .culture-top-place {
	position: relative;
	display: flex;
	min-height: 420px;
	background-color: #3A322C;
	background-image:
		linear-gradient(115deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 40%, rgba(0, 0, 0, 0) 65%),
		url('../img/default_testing_place.png');
	background-size: cover;
	background-position: center;
	color: #FFFFFF;
}

@media only screen and (min-width: 861px) {
	.culture-page .culture-top-place {
		aspect-ratio: 1440 / 720;
	}
}

.culture-page .culture-top-place__wrap {
	width: 100%;
	padding-top: 56px;
	padding-bottom: 40px;
}

.culture-page .culture-top-place__pin {
	position: absolute;
	top: 36px;
	right: 5%;
	z-index: 1;
	width: 44px;
	height: auto;
}

.culture-page .culture-top-place__label {
	margin: 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #FFFFFF;
}

.culture-page .culture-top-place__title {
	margin: 2px 0 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 50px;
	line-height: 1.05;
	color: #FFFFFF;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}

.culture-page .culture-top-place__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.culture-page .culture-top-place__pills li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 2px;
	background: rgba(228, 222, 214, .92);
	font-family: 'Work Sans', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #3A322C;
}

.culture-page .culture-top-place__rating {
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px !important;
	font-weight: 400 !important;
}

.culture-page .culture-top-place__star {
	font-size: 14px;
	color: #3A322C;
}

.culture-page .culture-top-place__rating strong {
	font-weight: 700;
}

.culture-page .culture-top-place__count {
	color: #6B625B;
}

.culture-page .culture-top-place__btn {
	margin-top: 36px;
}


/* --- 9. Focus on — the restaurant + Top Place ----------------------------- *
 *
 * templates/culture.php, section #culture-restaurant. The focus block reuses
 * the tasting-place focus layout (.culture-focus__*, section 6) on the warm
 * grey of the design, plus the canton flag, the rating pill and the owner's
 * byline (wiize_render_byline(), styled by the gazette CSS). Under it the
 * "Top Place" row: the 5-column grid of np-other-events (event.css).
 * -------------------------------------------------------------------------- */

.culture-page .culture-restaurant {
	padding: 70px 0 80px;
	background: #F3F1ED;
}

.culture-page .culture-restaurant__title-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.culture-page .culture-restaurant__flag {
	display: block;
	width: 44px;
	height: auto;
	transform: rotate(-7deg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.culture-page .culture-restaurant__rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

.culture-page .culture-restaurant__star {
	color: #A6032F;
	font-size: 13px;
}

.culture-page .culture-restaurant__rating strong {
	font-weight: 700;
}

.culture-page .culture-restaurant__count {
	color: #6B625B;
}

.culture-page .culture-restaurant__byline {
	margin-top: 22px;
}

.culture-page .culture-restaurant__desc {
	margin-top: 12px;
}

/* "Top Place" */
.culture-page .culture-top {
	margin-top: 70px;
}

.culture-page .culture-top__head {
	align-items: flex-end;
}

.culture-page .culture-top__title {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 32px;
	letter-spacing: .08em;
	color: #8A765C;
}

.culture-page .culture-top__head .culture-focus__showall {
	margin-top: 0;
}

.culture-page .culture-top__grid .np-focus-vignette {
	height: 100%;
}

.culture-page .culture-top__grid .np-focus-vignette > a {
	display: block;
	height: 100%;
}

.culture-page .culture-top__grid .np-focus-vignette-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}


/* --- Responsive ------------------------------------------------------------ */

@media only screen and (max-width: 860px) {

	.culture-page .culture-top-place__title {
		font-size: 38px;
	}

	.culture-page .culture-top-place__pin {
		top: 20px;
		width: 34px;
	}

	.culture-page .culture-products__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.culture-page .culture-products__title {
		font-size: 34px;
	}

	.culture-page .culture-brand {
		grid-template-columns: 1fr;
	}

	.culture-page .culture-brand__logo {
		order: -1;
	}

	.culture-page .culture-focus__wrap {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.culture-page .culture-focus__media {
		order: -1;
	}

	.culture-page .culture-focus__desc {
		margin-top: 24px;
	}

	.culture-page .culture-focus__title {
		font-size: 34px;
	}

	.culture-page .culture-events .np-other-events__heading {
		font-size: 34px;
	}

	.culture-page .culture-jump .winemaker-focus__jump-wrap {
		align-items: flex-start;
	}

	.culture-page .np-g3-actions {
		padding-top: 40px;
	}

	.culture-page .winemaker-focus__name {
		font-size: 40px;
	}

	.culture-page .culture-hero__when {
		font-size: 20px;
	}

	.culture-page .focus-hero__bar .event-hero__wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.culture-page .winemaker-focus__trust {
		align-items: flex-start;
		text-align: left;
	}

	.culture-page .winemaker-focus__trust .event-followers {
		align-items: flex-start;
	}

	.culture-page .culture-hero__step {
		width: 60px;
	}
}