/*
 * Kauppakeskus Plaza — child theme styles, loaded after the Louhosteema bundle.
 *
 * Figma is drawn at 2560px (content 2160px, 200px gutters). Sizes here are
 * fluid between a 390px phone and ~1920px; the Figma pixel values are reached
 * at the widest screens. See docs/toteutussuunnitelma.md, section 4.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* Brand. #5B9570 (Figma green) fails AA as text and as a button fill with
	   light text (3.2:1), so interactive green is the darker #467A59 (4.6:1). */
	--louhos-primary: #467a59;
	--louhos-primary-rgb: 70, 122, 89;
	--louhos-primary-dark: #293f42;
	--louhos-accent: #bf5836;
	--louhos-link-color: #467a59;

	--plaza-green: #5b9570;          /* decorative only (illustrations, dots) */
	--plaza-petrol: #293f42;
	--plaza-petrol-rgb: 41, 63, 66;
	--plaza-orange: #e07a19;
	--plaza-salmon: #f18865;
	--plaza-brick: #bf5836;
	--plaza-bg: #fcf3f1;
	--plaza-bg-rgb: 252, 243, 241;
	--plaza-card: #fff;
	--plaza-placeholder: #d9d9d9;

	/* Neutrals */
	--louhos-headings: #000;
	--louhos-body-color: #333;
	--louhos-grey: #fcf3f1;
	--louhos-border: #d9d9d9;
	--louhos-border-rgb: 217, 217, 217;

	/* Dark surfaces (footer) */
	--louhos-dark-1: #293f42;
	--louhos-dark-1-rgb: 41, 63, 66;
	--louhos-dark-2: #1f3033;
	--louhos-dark-2-rgb: 31, 48, 51;

	/* Shape */
	--louhos-radius: 5px;
	--louhos-radius-lg: 10px;

	/* Type */
	--louhos-font-family: "Aventa", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--plaza-fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);        /* 16 → 20 */
	--plaza-fs-small: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);      /* 14 → 16 */
	--plaza-fs-h1: clamp(2rem, 1.55rem + 1.5vw, 3.125rem);          /* 32 → 50 */
	--plaza-fs-h2: clamp(1.625rem, 1.3rem + 1.1vw, 2.5rem);         /* 26 → 40 */
	--plaza-fs-h3: clamp(1.375rem, 1.18rem + 0.65vw, 1.875rem);     /* 22 → 30 */
	--plaza-fs-h4: clamp(1.125rem, 1.08rem + 0.15vw, 1.25rem);      /* 18 → 20 */

	/* Layout */
	--plaza-gutter: clamp(1rem, 7.8vw, 12.5rem);                   /* 200px @2560 */
	--plaza-section: clamp(3rem, 5vw, 7.5rem);
	--louhos-header-height: 131px;

	/* Bootstrap runtime bridges */
	--bs-body-bg: var(--plaza-bg);
	--bs-body-font-size: var(--plaza-fs-body);
	--bs-body-line-height: 1.5;
	--bs-link-hover-color: var(--plaza-petrol);
}

@media (min-width: 1200px) {
	:root {
		--louhos-header-height: clamp(5.5rem, 4.9vw, 7.8125rem); /* 125px @2560 */
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background-color: var(--plaza-bg);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	font-weight: 900;
	line-height: 1.15;
	color: var(--louhos-headings);
}

h1, .h1 { font-size: var(--plaza-fs-h1); }
h2, .h2 { font-size: var(--plaza-fs-h2); }
h3, .h3 { font-size: var(--plaza-fs-h3); }
h4, .h4 { font-size: var(--plaza-fs-h4); }

/* Links inside running text: bold green (Figma) + underline, so the link is
   not identified by colour alone (WCAG 1.4.1). */
:where(.entry-content, .plaza-prose) a:not(.btn) {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

:focus-visible {
	outline-color: var(--plaza-petrol);
}

.section--dark :focus-visible {
	outline-color: var(--plaza-bg);
}

.skip-link {
	background: var(--plaza-petrol);
	color: var(--plaza-bg);
}

/* 2160px content column with the Figma side gutters. */
.container-plaza {
	width: 100%;
	max-width: calc(2160px + 2 * var(--plaza-gutter));
	margin-inline: auto;
	padding-inline: var(--plaza-gutter);
}

.plaza-section {
	padding-block: var(--plaza-section);
}

.plaza-icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
}

/* ==========================================================================
   Buttons — 5px radius, bold label, green → petrol on hover (Figma)
   ========================================================================== */

.btn {
	--bs-btn-font-weight: 700;
	--bs-btn-font-size: var(--plaza-fs-body);
	--bs-btn-padding-x: clamp(1.75rem, 2.4vw, 3.8rem);
	--bs-btn-padding-y: clamp(0.75rem, 0.75vw, 1.2rem);
	--bs-btn-border-radius: var(--louhos-radius);
	--bs-btn-border-width: 0;
}

.btn-primary {
	--bs-btn-color: var(--plaza-bg);
	--bs-btn-bg: var(--louhos-primary);
	--bs-btn-hover-color: var(--plaza-bg);
	--bs-btn-hover-bg: var(--plaza-petrol);
	--bs-btn-active-color: var(--plaza-bg);
	--bs-btn-active-bg: var(--plaza-petrol);
	--bs-btn-focus-shadow-rgb: var(--louhos-primary-rgb);
	--bs-btn-disabled-color: var(--plaza-bg);
	--bs-btn-disabled-bg: var(--louhos-primary);
}

.btn-secondary {
	--bs-btn-color: var(--plaza-bg);
	--bs-btn-bg: var(--plaza-petrol);
	--bs-btn-hover-color: var(--plaza-bg);
	--bs-btn-hover-bg: var(--louhos-primary);
	--bs-btn-active-color: var(--plaza-bg);
	--bs-btn-active-bg: var(--louhos-primary);
}

.louhos-btn {
	min-height: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.plaza-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	color: var(--louhos-body-color);
}

/* Translucent blurred bar on a pseudo-element: backdrop-filter on the header
   itself would become the containing block of the fixed offcanvas menu. */
.plaza-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(var(--plaza-bg-rgb), 0.75);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.admin-bar .plaza-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.plaza-header__inner {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"brand toggle"
		"today today";
	align-items: center;
	justify-content: space-between;
	row-gap: 0.75rem;
	min-height: var(--louhos-header-height);
	padding-block: 1.25rem 0.75rem;
}

.plaza-header__brand {
	grid-area: brand;
	display: inline-block;
	line-height: 0;
}

.plaza-header__brand img {
	width: clamp(7.5rem, 6.7vw, 10.75rem);   /* 121px mobile → 172px @2560 */
	height: auto;
}

.plaza-header__toggle {
	grid-area: toggle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--louhos-body-color);
}

/* Burger: three 38×2px bars (Figma), turns into an X in the open menu. */
.plaza-burger,
.plaza-burger::before,
.plaza-burger::after,
.plaza-burger > span {
	display: block;
	width: 2.4rem;
	height: 2px;
	border-radius: 50px;
	background: currentColor;
}

.plaza-burger {
	position: relative;
	background: none;
}

.plaza-burger::before,
.plaza-burger::after {
	content: "";
	position: absolute;
	left: 0;
}

.plaza-burger::before { top: -0.85rem; }
.plaza-burger::after { top: 0.85rem; }

.plaza-burger.is-open > span { display: none; }
.plaza-burger.is-open::before { top: 0; transform: rotate(45deg); }
.plaza-burger.is-open::after { top: 0; transform: rotate(-45deg); }

/* "Tänään avoinna" */
.plaza-today {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-size: var(--plaza-fs-small);
	line-height: 1.2;
}

.plaza-today--header {
	grid-area: today;
	justify-content: center;
}

.plaza-today__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
}

.plaza-today__icon {
	width: 2.2rem;
	height: 2.2rem;
}

.plaza-today__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-today__list a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.plaza-today__list a:hover {
	color: var(--louhos-primary);
}

/* Navigation */
.plaza-nav__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--louhos-body-color);
	text-decoration: none;
}

.plaza-nav__link:hover,
.plaza-nav__link:focus-visible {
	color: var(--louhos-primary);
}

.plaza-nav__item.is-active .plaza-nav__link {
	font-weight: 700;
}

.plaza-nav__icon {
	width: 2.25rem;
	height: 2.25rem;
}

/* Mobile / tablet menu: full-screen overlay (Bootstrap offcanvas). */
@media (max-width: 1199.98px) {
	.plaza-menu.offcanvas-top {
		height: 100vh;
		height: 100dvh;
		border: 0;
		background: rgba(var(--plaza-bg-rgb), 0.92);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	.plaza-menu__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.25rem var(--plaza-gutter) 0;
	}

	.plaza-menu__body {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		padding: 1rem var(--plaza-gutter) 2rem;
		overflow-y: auto;
	}

	.plaza-nav__list {
		flex-direction: column;
		gap: 0.6rem;
	}

	.plaza-nav__list--social {
		padding-top: 1.5rem;
		border-top: 1px solid var(--louhos-body-color);
	}

	.plaza-nav__link {
		gap: 0.75rem;
		font-size: 1.125rem;
		min-height: 3rem;
	}

	.plaza-nav__icon {
		width: 2.5rem;
		height: 2.5rem;
	}
}

@media (min-width: 1200px) {
	.plaza-header__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "brand nav today";
		column-gap: 2rem;
		padding-block: 0.75rem;
	}

	.plaza-menu {
		grid-area: nav;
		justify-self: center;
	}

	.plaza-menu__body {
		display: block;
	}

	.plaza-nav__list {
		gap: clamp(1.5rem, 2vw, 3.125rem);
	}

	.plaza-nav__link {
		font-size: clamp(0.9375rem, 0.5rem + 0.45vw, 1.25rem);
		white-space: nowrap;
	}

	.plaza-nav__icon {
		width: clamp(2rem, 1.95vw, 3.125rem);
		height: clamp(2rem, 1.95vw, 3.125rem);
	}

	.plaza-today--header {
		justify-content: flex-end;
	}

	.plaza-today--header .plaza-today__label {
		flex-direction: row-reverse;
		font-size: 0.75rem;
		max-width: 9.5rem;
		text-align: right;
	}

	.plaza-today--header .plaza-today__label span {
		max-width: 3.5rem;
	}

	.plaza-today__icon {
		width: clamp(1.75rem, 1.6vw, 2.1rem);
		height: clamp(1.75rem, 1.6vw, 2.1rem);
	}

	.plaza-today--header .plaza-today__list {
		font-size: clamp(0.875rem, 0.5rem + 0.4vw, 1.25rem);
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.plaza-footer {
	padding-block: clamp(3rem, 3.9vw, 6.25rem) 2rem;
	background: var(--plaza-petrol);
	color: var(--plaza-bg);
}

.plaza-footer a:not(.btn) {
	color: var(--plaza-bg);
}

.plaza-footer a:not(.btn):hover,
.plaza-footer a:not(.btn):focus-visible {
	color: var(--plaza-bg);
	text-decoration: underline;
}

.plaza-footer__grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 768px) {
	.plaza-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.plaza-footer__intro {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1200px) {
	.plaza-footer__grid {
		grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 3vw, 5rem);
	}

	.plaza-footer__intro {
		grid-column: auto;
		padding-right: clamp(0rem, 4vw, 12rem);
	}
}

.plaza-footer__title {
	margin-bottom: 1.5rem;
	font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2.5rem);                /* 24 → 40 */
	font-weight: 900;
	line-height: 1.2;
}

.plaza-footer__lead {
	font-size: clamp(1.125rem, 0.85rem + 0.6vw, 1.875rem);           /* 18 → 30 */
	font-weight: 900;
	line-height: 1.3;
}

.plaza-footer__heading {
	margin-bottom: 1.25rem;
	font-size: var(--plaza-fs-h3);
	color: var(--plaza-bg);
}

.plaza-footer__menu {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
}

.plaza-footer__menu a {
	text-decoration: none;
}

.plaza-icon-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.plaza-icon-link .plaza-icon {
	width: 1.6em;
	height: 1.6em;
}

.plaza-social {
	display: flex;
	gap: clamp(1.5rem, 2vw, 3.125rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-social a {
	display: inline-flex;
	line-height: 0;
}

.plaza-social .plaza-icon {
	width: clamp(2rem, 1.95vw, 3.125rem);
	height: clamp(2rem, 1.95vw, 3.125rem);
}

.plaza-footer__legal {
	margin-top: clamp(3rem, 5vw, 8rem);
}

.plaza-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-footer__legal li + li::before {
	content: "|";
	margin-inline: 0.75rem;
}

.plaza-footer__legal a {
	text-decoration: none;
}

/* Opening hours list (footer + block) */
.plaza-hours {
	display: grid;
	gap: 1.5rem;
}

.plaza-hours__title {
	margin: 0;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.plaza-hours p,
.plaza-hours__rows {
	margin: 0;
}

.plaza-hours__rows div {
	display: flex;
	gap: 0.35em;
}

.plaza-hours__rows dt {
	font-weight: 400;
}

.plaza-hours__rows dd {
	margin: 0;
}

/* ==========================================================================
   Store listing (block plaza/liikelistaus)
   ========================================================================== */

.plaza-listing__title {
	margin-bottom: clamp(1.25rem, 2vw, 2.5rem);
}

.plaza-listing__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp(1.5rem, 2vw, 2.5rem);
}

.plaza-filters {
	flex: 1 1 0;
	min-width: min(100%, 20rem);
}

.plaza-filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem clamp(1.25rem, 2vw, 3.125rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--plaza-fs-small);
}

.plaza-filters a {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--louhos-primary);
	font-weight: 700;
	text-decoration: none;
}

.plaza-filters a:hover,
.plaza-filters a:focus-visible {
	text-decoration: underline;
}

.plaza-filters a[aria-current="page"] {
	color: var(--louhos-body-color);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.plaza-sort__toggle {
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--louhos-primary);
	font-size: var(--plaza-fs-small);
	font-weight: 700;
}

.plaza-sort .dropdown-item.active {
	background: var(--louhos-primary);
}

.plaza-store-grid,
.plaza-offer-grid {
	display: grid;
	gap: clamp(0.75rem, 1vw, 1.5625rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-store-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}

@media (min-width: 1400px) {
	.plaza-store-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.plaza-store-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: clamp(1rem, 1.25vw, 2rem) 1rem 1.5rem;
	border-radius: var(--louhos-radius);
	background: var(--plaza-card);
	text-align: center;
	transition: box-shadow 0.2s ease;
}

.plaza-store-card:hover,
.plaza-store-card:focus-within {
	box-shadow: 0 0.5rem 1.5rem rgba(var(--plaza-petrol-rgb), 0.12);
}

.plaza-store-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 9.375rem);
	aspect-ratio: 1;
	margin-bottom: 1rem;
}

.plaza-store-card__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.plaza-store-card__placeholder {
	width: 100%;
	height: 100%;
	border-radius: var(--louhos-radius);
	background: var(--plaza-placeholder);
}

.plaza-store-card__title {
	margin-bottom: 0.5rem;
	font-size: var(--plaza-fs-h4);
}

@media (min-width: 1400px) {
	.plaza-store-card__title {
		font-size: clamp(1.25rem, 0.6rem + 0.6vw, 1.875rem);
	}
}

.plaza-store-card__title a {
	color: inherit;
	text-decoration: none;
}

.plaza-store-card__title a:hover {
	text-decoration: underline;
}

.plaza-store-card__hours,
.plaza-hours-table {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.15rem 1.5rem;
	margin: 0;
	text-align: left;
}

.plaza-store-card__hours {
	font-size: var(--plaza-fs-small);
}

.plaza-store-card__hours div,
.plaza-hours-table div {
	display: contents;
}

.plaza-store-card__hours dt,
.plaza-hours-table dt {
	font-weight: 400;
}

.plaza-store-card__hours dd,
.plaza-hours-table dd {
	margin: 0;
}

.plaza-hours-table__reason {
	color: #5c5c5c;
}

/* ==========================================================================
   Store page
   ========================================================================== */

.plaza-store__top {
	display: grid;
	gap: 2rem;
	align-items: start;
	margin-bottom: clamp(2rem, 3vw, 4rem);
}

@media (min-width: 992px) {
	.plaza-store__top {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.1fr);
		column-gap: clamp(2rem, 4vw, 6rem);
	}
}

.plaza-store__subtitle {
	font-size: var(--plaza-fs-h2);
}

.plaza-store__logo {
	display: flex;
	justify-content: center;
}

.plaza-store__logo img {
	max-width: min(100%, 17rem);
	height: auto;
}

.plaza-store__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

.plaza-store__gallery img {
	width: 100%;
	height: auto;
	border-radius: var(--louhos-radius);
}

.plaza-store__gallery img:first-child {
	grid-column: 1 / -1;
}

.plaza-store__info {
	display: grid;
	gap: 2rem;
	margin-bottom: clamp(2.5rem, 4vw, 5rem);
}

@media (min-width: 768px) {
	.plaza-store__info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.plaza-store__info {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.plaza-store__info .h3,
.plaza-store__subheading {
	margin-bottom: 1rem;
}

.plaza-store__subheading {
	margin-top: 2rem;
}

.plaza-contact-list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-contact-list a {
	color: var(--louhos-body-color);
	overflow-wrap: anywhere;
}

.plaza-contact-list .plaza-icon {
	width: 1.6em;
	height: 1.6em;
}

.plaza-social--dark a {
	color: var(--louhos-body-color);
}

.plaza-social--dark a:hover {
	color: var(--louhos-primary);
}

/* ==========================================================================
   Offer card
   ========================================================================== */

.plaza-offer-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
	gap: clamp(1.5rem, 2vw, 3rem) clamp(0.75rem, 2vw, 3rem);
}

@media (min-width: 1200px) {
	.plaza-offer-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.plaza-offer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	text-align: center;
	font-size: var(--plaza-fs-small);
}

.plaza-offer__image {
	width: min(100%, 21.375rem);    /* 342px @2560 */
	aspect-ratio: 1;
	margin-bottom: 1rem;
	overflow: hidden;
	background: var(--plaza-card);
}

.plaza-offer__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.plaza-offer__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--plaza-placeholder);
}

/* Campaign frame: drawn around the image, never on top of it (Figma note). */
.plaza-offer--framed .plaza-offer__image {
	position: relative;
	overflow: visible;
	outline: 0.5rem solid var(--plaza-campaign-frame, var(--plaza-brick));
}

.plaza-offer__badge {
	position: absolute;
	top: -0.5rem;
	left: 50%;
	z-index: 1;
	padding: 0.2rem 0.9rem 0.35rem;
	transform: translate(-50%, -25%);
	border-radius: var(--louhos-radius);
	background: var(--plaza-campaign-frame, var(--plaza-brick));
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}


.plaza-offer__store {
	margin-bottom: 0.75rem;
}

.plaza-offer__title {
	margin-bottom: 1rem;
	font-size: var(--plaza-fs-h4);
	line-height: 1.3;
}

.plaza-offer__title a {
	color: inherit;
	text-decoration: none;
}

.plaza-offer__title a:hover {
	text-decoration: underline;
}

.plaza-offer p {
	margin-bottom: 0.75rem;
}

.plaza-offer__lowest {
	color: #5c5c5c;
}

/* ==========================================================================
   Media helper: image / video / placeholder filling its box
   ========================================================================== */

.plaza-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--plaza-placeholder);
}

.plaza-media__el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plaza-media__placeholder {
	display: block;
	background: var(--plaza-placeholder);
}

/* ==========================================================================
   Front page: kollaasi (carousel + 4 image links)
   ========================================================================== */

.plaza-kollaasi {
	padding-block: clamp(0.5rem, 1vw, 1.25rem) var(--plaza-section);
}

.plaza-kollaasi__grid {
	display: grid;
	overflow: hidden;
	border-radius: var(--louhos-radius-lg);
}

@media (min-width: 992px) {
	.plaza-kollaasi__grid {
		grid-template-columns: 982fr 1178fr;
		aspect-ratio: 2160 / 1122;
	}
}

.plaza-carousel,
.plaza-carousel .carousel-inner,
.plaza-carousel .carousel-item {
	height: 100%;
}

.plaza-carousel {
	position: relative;
	color: #fff;
}

@media (max-width: 991.98px) {
	.plaza-carousel {
		aspect-ratio: 390 / 412;
	}
}

@media (min-width: 992px) {
	.plaza-carousel {
		min-height: 26rem;
	}
}

.plaza-carousel .plaza-media {
	position: absolute;
	inset: 0;
}

/* Dark fade under the text (Figma "Shadow+Blur"). */
.plaza-carousel .carousel-item::after,
.plaza-tile .plaza-media::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.plaza-carousel__caption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	padding: 0 clamp(1.25rem, 4vw, 5rem) clamp(4rem, 5.5vw, 8rem);
	text-align: center;
}

.plaza-carousel__title {
	margin-bottom: 0.5rem;
	color: #fff;
	font-size: var(--plaza-fs-h2);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.plaza-carousel__title a {
	color: inherit;
	text-decoration: none;
}

.plaza-carousel__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.plaza-carousel__title a:hover,
.plaza-carousel__title a:focus-visible {
	text-decoration: underline;
}

.plaza-carousel__caption p {
	max-width: 36rem;
	margin: 0 auto;
	font-size: var(--plaza-fs-small);
}

.plaza-carousel__controls {
	position: absolute;
	inset: auto 0 clamp(1rem, 2vw, 2.5rem);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.plaza-carousel__dots {
	display: flex;
	gap: 0.5rem;
}

.plaza-carousel__dots button {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 2px solid var(--plaza-green);
	border-radius: 50%;
	background: #fff;
}

.plaza-carousel__dots button.active {
	background: var(--plaza-green);
	box-shadow: inset 0 0 0 3px #fff;
}

.plaza-carousel__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(var(--plaza-petrol-rgb), 0.85);
	color: #fff;
}

/* Pause (two bars) ↔ play (triangle) drawn with CSS. */
.plaza-carousel__pause-icon {
	width: 0.7rem;
	height: 0.8rem;
	border-inline: 0.22rem solid currentColor;
}

.plaza-carousel__pause.is-paused .plaza-carousel__pause-icon {
	width: 0;
	height: 0;
	margin-left: 0.2rem;
	border-block: 0.45rem solid transparent;
	border-inline: 0.7rem solid currentColor;
	border-right-width: 0;
}

.plaza-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-tile {
	position: relative;
	display: block;
	height: 100%;
	min-height: 11rem;
	color: #fff;
	text-decoration: none;
}

.plaza-tile .plaza-media {
	position: absolute;
	inset: 0;
}

.plaza-tile .plaza-media__el {
	transition: transform 0.4s ease;
}

.plaza-tile:hover .plaza-media__el,
.plaza-tile:focus-visible .plaza-media__el {
	transform: scale(1.04);
}

.plaza-tile:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

.plaza-tile__caption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: grid;
	gap: 0.35rem;
	padding: 1rem clamp(1rem, 2vw, 3rem) clamp(1rem, 2.5vw, 4rem);
}

.plaza-tile__title {
	font-size: clamp(1.125rem, 0.6rem + 1.3vw, 2.5rem);
	font-weight: 900;
	line-height: 1.15;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.plaza-tile__text {
	display: none;
	font-size: var(--plaza-fs-small);
}

@media (min-width: 768px) {
	.plaza-tile {
		min-height: 15rem;
	}

	.plaza-tile__text {
		display: block;
	}
}

/* ==========================================================================
   Front page: tarjousnosto, logokaruselli
   ========================================================================== */

.plaza-nosto__grid,
.plaza-logos__grid {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

/* Grid items default to min-width: auto; the max-content marquee would
   otherwise widen the column and the whole page on small screens. */
.plaza-kollaasi__grid > *,
.plaza-nosto__grid > *,
.plaza-logos__grid > * {
	min-width: 0;
}

@media (min-width: 1200px) {
	.plaza-nosto__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		column-gap: clamp(2rem, 4vw, 6rem);
	}

	.plaza-nosto__offers {
		grid-template-columns: repeat(3, 1fr);
	}

	.plaza-logos__grid {
		grid-template-columns: minmax(0, 1280fr) minmax(0, 880fr);
		column-gap: clamp(2rem, 5vw, 8rem);
	}
}

.plaza-nosto__intro .btn,
.plaza-logos__intro .btn {
	margin-top: 1rem;
}

.plaza-logos__marquee {
	position: relative;
	display: grid;
	gap: clamp(0.75rem, 1vw, 1.5rem);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.plaza-logos__row {
	display: flex;
	width: max-content;
}

.plaza-logos__track {
	display: flex;
	flex-shrink: 0;
	gap: clamp(0.75rem, 1vw, 1.5rem);
	margin: 0;
	padding: 0 clamp(0.75rem, 1vw, 1.5rem) 0 0;
	list-style: none;
	animation: plaza-marquee 90s linear infinite;
}

.plaza-logos__row--reverse .plaza-logos__track {
	animation-direction: reverse;
}

.plaza-logos__marquee:hover .plaza-logos__track,
.plaza-logos__marquee:focus-within .plaza-logos__track,
.plaza-logos__marquee.is-paused .plaza-logos__track {
	animation-play-state: paused;
}

@keyframes plaza-marquee {
	to {
		transform: translateX(-100%);
	}
}

.plaza-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(6.5rem, 7.6vw, 12.2rem);
	aspect-ratio: 1;
	padding: 0.75rem;
	border-radius: var(--louhos-radius);
	background: #fff;
}

.plaza-logos__item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.plaza-logos__pause {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.plaza-logos__marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.plaza-logos__track {
		animation: none;
	}

	.plaza-logos__track[aria-hidden="true"],
	.plaza-logos__pause {
		display: none;
	}
}

/* ==========================================================================
   Kuvapaneeli: full-width image with an optional light text panel
   ========================================================================== */

.plaza-kuvapaneeli {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(22rem, 32.8vw, 52.5rem);
	padding-block: clamp(2rem, 4vw, 6rem);
}

.plaza-kuvapaneeli--image-only {
	min-height: 0;
	aspect-ratio: 2560 / 840;
	padding: 0;
}

.plaza-kuvapaneeli__bg {
	position: absolute;
	inset: 0;
}

.plaza-kuvapaneeli .container-plaza {
	position: relative;
}

.plaza-kuvapaneeli__panel {
	max-width: 60.75rem;
	padding: clamp(1.5rem, 2.5vw, 4rem);
	border-radius: var(--louhos-radius);
	background: rgba(var(--plaza-bg-rgb), 0.95);
}