/* WOW theme: homepage only. */

/* --------------------------------------------------------------- homepage */

/* Story circles: wrap into rows, never scroll sideways. */
.wow-circles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 640px) { .wow-circles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 16px; } }

@media (min-width: 1000px) { .wow-circles { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 26px 18px; } }

.wow-circle { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--wow-black); text-align: center; text-decoration: none; }
.wow-circle:hover { color: var(--wow-black); }

.wow-circle__ring {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 124px;
	aspect-ratio: 1;
	margin-bottom: 6px;
	padding: 3px;
	border-radius: 50%;
	background: conic-gradient(from 200deg, var(--wow-red), var(--wow-black) 45%, var(--wow-red) 75%, #ffb199, var(--wow-red));
	transition: transform var(--wow-fast) var(--wow-ease);
}
.wow-circle:hover .wow-circle__ring { transform: scale(1.04); }
.wow-circle.is-seen .wow-circle__ring { background: #d4d4d4; }
.wow-circle__img { width: 100%; height: 100%; border: 3px solid var(--wow-bg); border-radius: 50%; object-fit: cover; }

@media (min-width: 1000px) { .wow-circle__img { border-width: 4px; } }

.wow-circle__new {
	position: absolute;
	bottom: -6px;
	left: 50%;
	padding: 2px 7px;
	border: 2px solid var(--wow-bg);
	border-radius: var(--wow-radius-pill);
	background: var(--wow-red-ink);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transform: translateX(-50%);
}
.wow-circle__new[hidden] { display: none; }
.wow-circle__name { max-width: 100%; font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }

@media (min-width: 640px) { .wow-circle__name { font-size: 13px; } }
.wow-circle__count { font-size: 11.5px; color: var(--wow-muted); }

@media (min-width: 1000px) { .wow-circle__name { font-size: 14px; } .wow-circle__count { font-size: 12.5px; } }
.wow-circle--map .wow-circle__ring { background: var(--wow-black); color: #fff; }
.wow-circle:focus-visible { outline: none; }
.wow-circle:focus-visible .wow-circle__ring { outline: 3px solid var(--wow-red-ink); outline-offset: 3px; }

/* Running something here */
.wow-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px; border-radius: 18px; background: var(--wow-black); color: #ddd; }
.wow-promo__title { margin: 0 0 6px; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.wow-promo p { margin: 0; }

/* Numbered list */
.wow-numbered { display: grid; gap: 0 32px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 768px) { .wow-numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wow-numbered li { display: flex; align-items: baseline; gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--wow-line); }
.wow-numbered .wow-num { flex: none; font-size: 26px; }
.wow-numbered a { color: var(--wow-black); font-weight: 700; line-height: 1.35; text-decoration: none; }
.wow-numbered a:hover { color: var(--wow-red-ink); }

/* Latest and signup */
.wow-latest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }

/* The list in two columns on wide screens, so nothing sits empty beside it. */
@media (min-width: 900px) { .wow-latest .wow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }


/* Partners */
.wow-partners__title { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wow-muted); text-align: center; }
.wow-partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }

.wow-partners a,
.wow-partners span { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 8px; border: 1px solid var(--wow-line); border-radius: 12px; background: #fff; color: #333; font-weight: 700; text-align: center; text-decoration: none; }

/* Join the crowd */


/* Season band */
.wow-season { background: #160c02; color: #fff; }
.wow-season__inner { display: grid; gap: 20px; padding-block: 28px 32px; }

@media (min-width: 900px) { .wow-season__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; gap: 40px; padding-block: 40px; } }
.wow-season__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.wow-season__kicker { color: var(--wow-accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wow-season__title { margin: 0; color: #fff; font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); line-height: 1.02; }
.wow-season__text { margin: 12px 0 0; max-width: 56ch; color: #e8e2da; }
.wow-season__side { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wow-season__count { display: inline-flex; flex-direction: column; align-items: center; margin: 0; padding: 8px 14px; border-radius: 12px; background: var(--wow-accent); color: #160c02; line-height: 1; }
.wow-season__num { font-size: 28px; font-weight: 800; }
.wow-season__unit { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.wow-label--light { color: #cfc6bb; }

/* About text from the front page */
.wow-about { border-top: 1px solid var(--wow-line); }

/* Guide section: the Home page's own text as topic cards. */
.wow-topics__head { max-width: 760px; margin-bottom: 28px; }
.wow-topics__head h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.wow-topics__intro p { margin: 0; color: #333; font-size: 1.05rem; }
.wow-topics__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 24px; }
.wow-topic { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wow-topic__img { display: block; overflow: hidden; border-radius: var(--wow-radius-photo); aspect-ratio: 16 / 10; background: var(--wow-grey); }
.wow-topic__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wow-topic__title { margin: 4px 0 0; font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.wow-topic__title a { color: var(--wow-black); text-decoration: none; }

.wow-topic__title a:hover,
.wow-topic__title a:focus-visible { color: var(--wow-red-ink); }
.wow-topic__text p { margin: 0; color: #444; font-size: 15px; line-height: 1.55; }
.wow-topic__text a { color: var(--wow-black); text-decoration: underline; text-decoration-color: var(--wow-red); text-underline-offset: 3px; }
.wow-topic__links { display: grid; gap: 0; margin: 2px 0 0; padding: 0; border-top: 1px solid var(--wow-line); list-style: none; }
.wow-topic__links li { border-bottom: 1px solid var(--wow-line); }
.wow-topic__links a { display: block; padding: 10px 0; color: var(--wow-black); font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; }

.wow-topic__links a:hover,
.wow-topic__links a:focus-visible { color: var(--wow-red-ink); }
.wow-topic__more { place-self: flex-start start; margin-top: 2px; font-weight: 600; }
.wow-topics__strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 32px; padding: 24px; border-radius: var(--wow-radius-box); background: var(--wow-black); color: #fff; }
.wow-topics__strip .wow-topic__title { margin: 0 0 6px; color: #fff; }
.wow-topics__strip .wow-topic__text p { color: #ddd; }
.wow-topics__strip .wow-topic__text a { color: #fff; }

/* Phones: a small picture beside each topic heading keeps the section short. */
@media (max-width: 639px) {
	.wow-topic { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
	.wow-topic__img { grid-row: 1; grid-column: 1; aspect-ratio: 1; }
	.wow-topic__title { grid-row: 1; grid-column: 2; margin: 0; }

	.wow-topic__text,
	.wow-topic__links,
	.wow-topic__more { grid-column: 1 / -1; }
	.wow-topic__title:first-child { grid-column: 1 / -1; }
}

/* Side column: side stories, then the newsletter signup level with the bottom of the lead photo. */
.wow-lead-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.wow-lead-signup { margin-top: auto; }

/* Medium screens: the side stories wrap to more lines and leave no room; the homepage has another
   signup further down. */
@media (min-width: 900px) and (max-width: 1199px) {
	.wow-lead-grid--home .wow-lead-signup { display: none; }
}
.wow-lead-signup--link { padding: 20px; border: 1px solid var(--wow-line); border-top: 4px solid var(--wow-red); border-radius: 14px; background: #fff; }
.wow-lead-signup__title { margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 1.3; }

/* Homepage on wide screens: a taller lead photo leaves room for the signup under the side stories. */
@media (min-width: 900px) {
	.wow-lead-grid--home .wow-card--lead .wow-card__img { aspect-ratio: 4 / 3; }
}

/* The site's signup ([wow_newsletter]) in compact form here: title and email row only.
   Its own styles use !important, so these must too. */
.wow-lead-signup .wnl-card { padding: 18px 18px 16px !important; }

.wow-lead-signup .wnl-kicker,
.wow-lead-signup .wnl-text,
.wow-lead-signup .wnl-note { display: none !important; }
.wow-lead-signup .wnl-title { margin-bottom: 12px !important; font-size: 18px !important; }

/* The signup's inline variant stacks the field and button and prints its styles later; one more
   class wins regardless of order. */
.wow-lead-signup .wnl-inline .wnl-row { flex-flow: row nowrap !important; }
.wow-lead-signup .wnl-inline .wnl-email { flex: 1 1 0 !important; width: auto !important; }
.wow-lead-signup .wnl-inline .wnl-btn { flex: 0 0 auto !important; width: auto !important; padding: 0 16px !important; }

@media (max-width: 599px) {
	/* Phones: 4 stories in Latest, so the sections below it stay close. */
	.wow-latest .wow-list > .wow-card:nth-child(n+5) { display: none; }

	/* Phones: Plan your weekend and Offers as two by two grids, so four cards take two rows, not four. */
	.wow-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
	.wow-grid--pairs .wow-card__title { font-size: 15px; }
}