/*
 * Xionodromika theme: layout pieces theme.json can't express.
 * Tokens come from theme.json (--wp--preset--*, --wp--custom--*).
 */

:root {
	--xiono-header-h: 83px; /* 71px logo + 2 × 6px padding (Figma). */
	--xiono-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 100;
	background: var(--wp--preset--color--white);
	padding: 0.75rem 1rem;
}

/* ---------------------------------------------------------------- Header */

.site-header {
	position: sticky;
	top: var(--xiono-admin-bar);
	z-index: 50;
	padding-inline: clamp(0px, 2vw, 2.25rem);
	pointer-events: none; /* Only the bar takes clicks; content under the transparent sides stays usable. */
}

.site-header__bar {
	pointer-events: auto;
	position: relative;
	max-width: 1848px;
	margin-inline: auto;
	min-height: var(--xiono-header-h);
	padding: 0.375rem clamp(1rem, 2vw, 2.25rem);
	background: var(--wp--preset--color--white);
	border-radius: 0 0 var(--wp--custom--radius--xlarge) var(--wp--custom--radius--xlarge);
	box-shadow: var(--wp--preset--shadow--header);
	gap: 1rem;
}

.site-header__logo img {
	display: block;
	width: clamp(110px, 10vw, 148px);
	height: auto;
}

.site-header__tools {
	gap: clamp(1rem, 2vw, 2.5rem);
}

.site-header__icon {
	display: inline-flex;
}

.site-header__search.wp-block-search {
	flex: 0 0 auto; /* Otherwise the flex row squeezes the icon-only search to ~14px. */
}

.site-header__search.wp-block-search .wp-block-search__inside-wrapper {
	width: auto !important;
	min-width: 20px; /* Beats core's "searchfield-hidden" rule, which sets 0. */
	border: 0;
	padding: 0;
	align-items: center;
}

.site-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	width: min(14rem, 40vw);
	border: 1px solid var(--wp--preset--color--grey-light);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.4rem 0.9rem;
	margin-right: 0.5rem;
}

.site-header__search .wp-block-search__button {
	background: none;
	padding: 0;
	margin: 0;
	width: 20px;
	height: 20px;
	min-width: 20px;
}

/* Figma search icon (assets/icons/search.svg) instead of core's generic magnifier. */
.site-header__search .wp-block-search__button svg {
	display: none;
}

.site-header__search .wp-block-search__button::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url("../icons/search.svg") no-repeat center / contain;
}

.site-header__lang,
.site-header__lang a {
	color: var(--wp--preset--color--fuchsia-dark);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
	text-decoration: underline;
	text-transform: lowercase;
}

.site-header__lang ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The main menu sits between logo and tools on desktop; on mobile it collapses to its toggle. */
.site-header__bar .xiono-menu--header {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

@media (max-width: 1199px) {
	.site-header__bar .xiono-menu--header {
		order: 3;
		flex: 0 0 auto;
	}

	.site-header__icon {
		display: none; /* Small screens: keep the bar to logo, search, language and menu; Shop is in the menu. */
	}
}

/* Sections that start behind the header (map, ski center hero). */
.is-under-header {
	margin-top: calc(-1 * var(--xiono-header-h)) !important;
}

/* No block gap between the header and the page: each template sets its own top spacing. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Pages without a hero: keep content clear of the header. */
.site-main {
	padding-top: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------- Section heads: "Title | link →" */

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.875rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.section-head > h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-1);
}

.section-head > p {
	margin: 0;
	padding-left: 1.875rem;
	border-left: 1px solid var(--wp--preset--color--fuchsia-dark);
	line-height: 1.5rem;
}

/* ---------------------------------------------------------------- Arrow links (Figma "linkBtn") */

.link-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
	color: var(--wp--preset--color--fuchsia-dark);
	text-decoration: none;
}

.link-arrow a::after {
	content: "";
	width: 32px;
	height: 10px;
	background: currentColor;
	-webkit-mask: url("../icons/arrow-right-fuchsia.svg") no-repeat center / contain;
	mask: url("../icons/arrow-right-fuchsia.svg") no-repeat center / contain;
	transition: transform var(--wp--custom--transition);
}

.link-arrow a:hover::after,
.link-arrow a:focus-visible::after {
	transform: translateX(4px);
}

.link-arrow--red a {
	color: var(--wp--preset--color--red);
}

.link-arrow--white a {
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------- Cards */

.news-card {
	gap: clamp(1rem, 2vw, 2.3125rem);
}

.news-card .wp-block-post-featured-image {
	flex: 0 0 auto;
	width: min(420px, 45%);
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
}

.news-card .wp-block-post-featured-image img {
	aspect-ratio: 420 / 245;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.news-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--h-3);
	margin-block: 0.9375rem;
}

.news-feature {
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--grey-lighter);
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
}

.news-feature .wp-block-post-featured-image {
	margin: 0;
	border-radius: 0;
}

.news-feature .wp-block-post-featured-image img {
	aspect-ratio: 916 / 510;
	object-fit: cover;
	border-radius: 0;
}

.news-feature__text {
	padding: 0.875rem 1.25rem 1.25rem;
}

.news-feature .wp-block-post-title {
	font-size: var(--wp--preset--font-size--h-1);
}

.news-feature .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.78;
}

@media (max-width: 781px) {
	.news-card {
		flex-direction: column;
		align-items: stretch !important;
	}

	.news-card .wp-block-post-featured-image {
		width: 100%;
	}
}

/* ---------------------------------------------------------------- Footer */

.site-footer {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 4.5vw, 5.3rem) 2.5rem;
	margin-top: var(--wp--preset--spacing--80);
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: min(692px, 60vw);
	aspect-ratio: 692 / 683;
	background: url("../images/footer-bg.png") no-repeat center / cover;
	opacity: 0.3;
	mix-blend-mode: luminosity;
	transform: scaleX(-1) rotate(180deg) scaleY(-1);
	pointer-events: none;
}

.site-footer > * {
	position: relative;
}

.site-footer a {
	color: inherit;
}

.site-footer .link-arrow--red a {
	color: var(--wp--preset--color--red);
}

.site-footer .xiono-menu--footer a {
	white-space: nowrap;
}

.site-footer__grid {
	display: grid;
	/* Figma: newsletter 607 · gap 170 · categories 312 · press 310 · blog 414 (of 1844). */
	grid-template-columns: minmax(0, 607fr) minmax(0, 170fr) minmax(max-content, 312fr) minmax(max-content, 310fr) minmax(0, 414fr);
	grid-template-areas:
		"news . cats press blog"
		"social . cats press blog";
	column-gap: 1.5rem;
	row-gap: 2rem;
}

.site-footer__newsletter { grid-area: news; }
.site-footer__grid > .site-footer__col:nth-of-type(2) { grid-area: cats; }
.site-footer__grid > .site-footer__col:nth-of-type(3) { grid-area: press; }
.site-footer__blog { grid-area: blog; }
.site-footer__social { grid-area: social; align-self: end; gap: 1.875rem !important; }

.site-footer__title {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--h-3);
	margin: 0 0 1.875rem;
}

.site-footer__newsletter .site-footer__title {
	margin-bottom: 0.9rem;
}

.site-footer__title--rss {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.site-footer__title--rss::before {
	content: "";
	width: 24px;
	height: 24px;
	background: url("../icons/rss.svg") no-repeat center / contain;
}

.site-footer__date {
	font-size: var(--wp--preset--font-size--minus) !important;
	color: var(--wp--preset--color--white) !important;
	font-weight: 600;
	margin-top: 1.25rem;
}

.site-footer__excerpt p {
	margin: 0.5rem 0 0;
}

.site-footer__copyright {
	opacity: 0.4;
	margin-top: var(--wp--preset--spacing--60);
}

@media (max-width: 1023px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"news news"
			"cats press"
			"blog blog"
			"social social";
	}
}

@media (max-width: 600px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		grid-template-areas: "news" "cats" "press" "blog" "social";
	}
}

/* ---------------------------------------------------------------- Content */

.wp-block-post-content > * + * {
	margin-block-start: 1.25rem;
}

.wp-block-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--medium);
}

.wp-block-post-content iframe {
	max-width: 100%;
}

.post-subtitle {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.78;
	color: var(--wp--preset--color--grey-dark);
}

/* Placeholder slot for blocks that come in Phase 6 (visible to editors only). */
.xiono-slot {
	display: none;
}

/* ---------------------------------------------------------------- Section head variants */

.section-head--stacked {
	display: block;
}

.section-head--stacked > p {
	border: 0;
	padding: 0;
	margin-top: 0.5rem;
}

.section-head--small > h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4);
}

.section-head--small > p {
	padding-left: 1rem;
}

.section-head--center {
	justify-content: center;
}

/* ---------------------------------------------------------------- Ski center (Figma resort) */

.center-hero {
	align-items: flex-start;
	padding-top: calc(var(--xiono-header-h) + clamp(1.5rem, 3vw, 2.6rem));
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.center-hero__title {
	gap: 1.5625rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.9rem);
}

.center-hero__title .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-1);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* The hero photo shows through a soft top shade (for the white title) without darkening the boxes. */
.center-hero .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(40, 40, 40, 0.45) 0%, rgba(40, 40, 40, 0.1) 40%, rgba(40, 40, 40, 0) 100%) !important;
	opacity: 1 !important;
}

/* The menu row sits right under the hero (Figma). */
.center-hero + .xiono-center-nav {
	margin-top: 0 !important;
}

.center-news {
	margin-top: 0 !important;
}

/* Ski center sub-pages: photo stripe with the title, full-width menu row, content. */
.center-subhero {
	align-items: flex-end;
	padding-top: calc(var(--xiono-header-h) + 2rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.center-subhero .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-1);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.center-subpage > .xiono-center-nav {
	margin-top: 0 !important;
}

.center-subpage__content {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
}

/* No trail map (e.g. Zireia, Vitsi, Olympos): the text takes the full width. */
.center-map__cols:not(:has(.xiono-trail-map)) > .wp-block-column:not(.center-map__about) {
	display: none;
}

.center-map__cols:not(:has(.xiono-trail-map)) > .center-map__about {
	flex-basis: 100% !important;
}

/* Until the news/gallery blocks have something to show, the band would be an empty grey block. */
.center-news:not(:has(.wp-block-xiono-related)) {
	display: none;
}

.center-news__list {
	padding: clamp(2rem, 6.5vw, 8.125rem) clamp(1rem, 2vw, 2.25rem);
}

/* Figma: the hero photo fills the right side of the news band, edge to edge. */
.center-news__cols {
	align-items: stretch !important;
	margin-block: 0;
}

.center-news__photo {
	display: flex;
	align-self: stretch !important;
	padding-block: clamp(1.5rem, 3vw, 3rem); /* Bill: a grey strip under (and above) the photo. */
}

.center-news__photo .wp-block-post-featured-image {
	flex: 1;
	min-height: 420px;
	margin: 0;
}

.center-news__photo .wp-block-post-featured-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

@media (max-width: 781px) {

	.center-news__photo .wp-block-post-featured-image {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
}

.center-media {
	padding-block: var(--wp--preset--spacing--80);
}

.center-map {
	padding-block: var(--wp--preset--spacing--60);
}

.center-map__cols {
	gap: clamp(2rem, 5vw, 6.25rem) !important;
	align-items: center;
}

.center-map__about {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.875;
	text-align: justify;
}

.center-map__about .wp-block-post-content > p:first-child::first-letter {
	float: left;
	font-size: 3.25rem;
	font-weight: 700;
	line-height: 1;
	margin: 0.2rem 0.75rem 0 0;
}

.center-map a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

/* ---------------------------------------------------------------- Home (Figma index) */

.home > .is-under-header:first-child {
	margin-block-start: calc(-1 * var(--xiono-header-h)) !important;
}

.home-news {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
}

.home-news__cols {
	gap: clamp(1rem, 1.8vw, 2.125rem) !important;
}

.home-news .wp-block-post-template > li + li {
	margin-top: 1.25rem;
}

.home-events {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--white);
}

/* Figma: the snowy video washed out, fading to white at the top and bottom of the section. */
.home-events__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.home-events__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-events__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0.55) 248px, rgba(255, 255, 255, 0.55) calc(100% - 248px), #fff 100%);
}

/* TV panel: lavender gradient, rounded on the left, running to the screen edge over the events panel. */
.home-events__tv {
	position: relative;
	z-index: 2;
	padding: 53px 46px;
	border-radius: 50px;
	background: linear-gradient(180deg, #f8f7f8 0%, #e1dbfc 100%);
}

.home-events__tv > .section-head {
	margin-bottom: 8px;
}

.home-events__tv-lead {
	margin: 0 0 52px;
}

@media (min-width: 1400px) {

	.home-events__cols {
		align-items: center !important;
	}

	/* Under the TV panel's 144px overlap the events panel keeps its content clear. */
	.home-events__calendar .xiono-events__panel {
		padding-right: calc(144px + 40px) !important;
	}

	.home-events__tv {
		flex-grow: 1 !important; /* Grow into the negative margins, up to the screen edge. */
		margin-left: -144px !important;
		margin-right: calc(-1 * max(var(--wp--style--root--padding-right, 0px), (100vw - 1920px) / 2)) !important;
		border-radius: 50px 0 0 50px;
	}
}

@media (max-width: 1399px) {

	.home-events__cols {
		flex-wrap: wrap !important;
	}

	.home-events__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

	.home-events__tv {
		margin-top: var(--wp--preset--spacing--60);
		padding: 40px 24px;
	}
}

/* Ads (xiono/ads). Over the map on wide screens (Figma): a banner under the header, centred, and a box bottom
   left above "Explore the map"; elsewhere (and below 1400px) they sit in the flow under the map. */
.home {
	position: relative;
}

.home-map-ads {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 0 !important;
	padding: var(--wp--preset--spacing--40) 16px 0;
}

.home-map-ads:not(:has(.xiono-ads)) {
	display: none;
}

@media (min-width: 1400px) {

	.home-map-ads {
		position: absolute;
		top: 0; /* The map starts at the top of the page content (it slides under the header itself). */
		left: 0;
		right: 0;
		margin: 0 !important; /* No full-width negative margins: they would shift the overlay. */
		z-index: 2;
		height: clamp(740px, 49.8vw, 956px); /* The map's height (xiono/ski-map). */
		padding: 0;
		pointer-events: none;
	}

	.home-map-ads .xiono-ads {
		position: absolute;
		pointer-events: auto;
	}

	.home-map-ads .xiono-ads--home-map {
		top: calc(var(--xiono-header-h) + 24px);
		left: 50%;
		transform: translateX(-50%);
	}

	.home-map-ads .xiono-ads--home-map-box {
		bottom: 96px; /* Above "Explore the map". */
		left: 38px;
	}

	.home-map-ads .xiono-ads__image {
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
	}
}

.home-ads-wide,
.home-ads-boxes {
	margin-block: var(--wp--preset--spacing--60) !important;
}

.center-ads-top {
	margin-block: var(--wp--preset--spacing--40) !important;
}

.center-ads-news {
	margin-top: var(--wp--preset--spacing--60) !important;
}

/* Offer carousels (xiono/carousel): Figma backgrounds; the band disappears while its carousel is empty. */
.home-stay {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	overflow: hidden;
	background: linear-gradient(180deg, var(--wp--preset--color--grey-lighter) 0%, #ece8fb 100%);
}

.home-products {
	padding-block: var(--wp--preset--spacing--80);
	background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, #ece8fb 100%);
}

/* Figma: the skier photo behind the cards (the pattern adds .has-photo once the file exists). */
.home-products.has-photo {
	padding-top: calc(var(--wp--preset--spacing--80) * 2.5); /* Room for the skier above the cards (Figma). */
	background:
		linear-gradient(180deg, var(--wp--preset--color--grey-lighter) 0%, rgba(248, 247, 248, 0.85) 18%, rgba(248, 247, 248, 0.35) 45%, rgba(248, 247, 248, 0) 70%),
		#f0e4f6 url("../images/products-bg.webp") center 30% / cover no-repeat;
}

/* Front end only: in the editor the carousel is `.xiono-carousel-edit` and must stay visible to be filled. */
.home-stay:not(:has(.xiono-carousel, .xiono-carousel-edit)),
.home-products:not(:has(.xiono-carousel, .xiono-carousel-edit)) {
	display: none;
}

/* Figma: Live cams sits on the same lavender as Διαμονή, edge to edge. */
.home-cams {
	margin-block-start: 0 !important; /* No gap between the Διαμονή and Live cams bands. */
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
	background: #ece8fb;
}

/* ---------------------------------------------------------------- Cards (archives) */

.card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--grey-lighter);
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
	padding-bottom: 1rem;
}

.card > :not(.wp-block-post-featured-image) {
	margin-inline: 1rem;
}

.card .wp-block-post-featured-image {
	margin: 0;
	border-radius: 0;
}

.card .wp-block-post-featured-image img {
	border-radius: 0;
}

.card .wp-block-post-title {
	margin-block: 0;
}

/* ---------------------------------------------------------------- Tables (core/table in content) */

.wp-block-table {
	margin-block: var(--wp--preset--spacing--40);
	overflow-x: auto;
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 18px rgba(82, 65, 109, 0.12);
}

.wp-block-table table {
	width: 100%;
	min-width: 560px; /* Narrow screens scroll the table instead of squashing it. */
	border-collapse: collapse;
	border: 0;
}

.wp-block-table thead {
	border: 0;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.875rem 1.125rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--grey-light);
	text-align: left;
	vertical-align: middle;
}

.wp-block-table thead th {
	background: #f1eefa;
	color: var(--wp--preset--color--purple);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table tbody tr {
	transition: background-color 0.15s ease;
}

.wp-block-table tbody tr:hover {
	background: var(--wp--preset--color--grey-lighter);
}

.wp-block-table td:first-child {
	font-weight: 600;
}

.wp-block-table td a {
	color: var(--wp--preset--color--fuchsia-dark);
	text-decoration: none;
}

.wp-block-table td a:hover,
.wp-block-table td a:focus-visible {
	text-decoration: underline;
}

.wp-block-table figcaption {
	padding: 0.75rem 1.125rem;
	color: var(--wp--preset--color--grey-dark);
	font-size: 0.8125rem;
}

@media (max-width: 781px) {

	.wp-block-table th,
	.wp-block-table td {
		padding: 0.75rem 0.875rem;
	}
}

/* ---------------------------------------------------------------- Content with a side column (news, posts) */

/* The side column holds the "news-side" ad, which stays in view while scrolling (xiono/ads). With no active
   ad it is empty and the content takes the full width. Phones and tablets: the ad follows the content. */
.has-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40, 2.5rem);
}

.has-side > * {
	min-width: 0;
	margin-block: 0;
}

@media (min-width: 1100px) {

	.has-side:has(.has-side__side .xiono-ads) {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

.has-side__side:not(:has(.xiono-ads)) {
	display: none;
}

/* ---------------------------------------------------------------- Home: Instagram banner */

.home-instagram {
	margin-block: var(--wp--preset--spacing--60) !important;
}

.home-instagram__link {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.5rem 2rem;
	border-radius: var(--wp--custom--radius--large);
	background: linear-gradient(100deg, #6a2c9c 0%, var(--wp--preset--color--fuchsia) 55%, #c0283f 100%);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.home-instagram__link:hover .home-instagram__button,
.home-instagram__link:focus-visible .home-instagram__button {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--fuchsia-dark);
}

.home-instagram__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--purple);
	outline-offset: 3px;
}

.home-instagram__icon {
	flex: none;
	width: 48px;
	height: 48px;
}

.home-instagram__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

.home-instagram__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.home-instagram__button {
	flex: none;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 999px;
	font-weight: 600;
	transition: background 0.15s, color 0.15s;
}

@media (max-width: 600px) {
	.home-instagram__link {
		flex-wrap: wrap;
		padding: 1.25rem;
	}

	.home-instagram__text {
		flex-basis: calc(100% - 48px - 1.25rem);
	}

	.home-instagram__button {
		box-sizing: border-box;
		width: 100%;
		text-align: center;
	}
}