/* SMM Films ----------------------------------------------------------------
   Deliberately scoped to .smm-films / .smm-film-* so nothing here can reach
   into The7's own styles. Colours follow the site's red (#da4444).
--------------------------------------------------------------------------- */

.smm-films [hidden],
.smm-film-submit [hidden] {
	display: none !important;
}

.smm-films {
	max-width: 1000px;
	margin: 0 auto;
	line-height: 1.6;
}

.smm-films__heading {
	text-align: center;
	color: #da4444;
	margin-bottom: 6px;
}

.smm-films__intro {
	text-align: center;
	color: #666;
	margin-bottom: 35px;
}

.smm-films__grid {
	display: grid;
	gap: 30px;
	margin-bottom: 30px;
}

.smm-films__frame {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	background: #000;
	border-radius: 8px;
}

.smm-films__frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.smm-films__title {
	margin: 14px 0 4px;
	font-size: 1.1em;
}

.smm-films__title a {
	color: #333;
	text-decoration: none;
}

.smm-films__title a:hover,
.smm-films__title a:focus {
	color: #da4444;
	text-decoration: underline;
}

.smm-films__credit {
	margin: 0 0 2px;
	color: #666;
	font-size: 0.88em;
}

.smm-films__when {
	margin: 0;
	color: #da4444;
	font-size: 0.82em;
	font-weight: 700;
}

.smm-films__actions,
.smm-films__count,
.smm-films__link {
	text-align: center;
	margin: 0 0 10px;
}

.smm-films__count {
	font-size: 0.85em;
	color: #999;
}

.smm-films__more,
.smm-film-button {
	cursor: pointer;
	background: #da4444;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 14px 34px;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.smm-films__more:hover,
.smm-films__more:focus,
.smm-film-button:hover,
.smm-film-button:focus {
	background: #c13a3a;
}

.smm-films__link a {
	color: #da4444;
	font-size: 0.95em;
}

/* Submission form ---------------------------------------------------------- */

.smm-film-submit {
	max-width: 620px;
	margin: 0 auto;
}

.smm-film-field {
	margin: 0 0 18px;
}

.smm-film-field label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}

.smm-film-field input,
.smm-film-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font: inherit;
}

.smm-film-field input:focus,
.smm-film-field textarea:focus {
	outline: 2px solid #da4444;
	outline-offset: 1px;
	border-color: #da4444;
}

.smm-film-field--error input,
.smm-film-field--error textarea {
	border-color: #c00;
}

.smm-film-hint {
	display: block;
	font-size: 0.85em;
	color: #777;
	margin-top: 3px;
}

.smm-film-error {
	display: block;
	font-size: 0.85em;
	color: #c00;
	margin-top: 3px;
	font-weight: 700;
}

.smm-film-notice {
	padding: 12px 16px;
	border-radius: 4px;
	border-left: 4px solid #999;
	background: #f5f5f5;
}

.smm-film-notice--success {
	border-left-color: #2e7d32;
	background: #edf7ed;
}

.smm-film-notice--error {
	border-left-color: #c00;
	background: #fdecec;
}

.smm-film-actions {
	text-align: center;
	margin-top: 24px;
}

/* The honeypot. Kept out of sight and out of the accessibility tree without
   display:none, which some bots check for. */
.smm-film-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A film's own page: the player sits above whatever synopsis was written. */
.smm-films--single {
	max-width: 900px;
	margin: 0 auto 28px;
}

.smm-films--single .smm-films__credit {
	margin-top: 14px;
	font-size: 1em;
}

.smm-films--single .smm-films__when {
	margin-bottom: 20px;
}

/* Floating submit prompt ----------------------------------------------------
   Rendered visible, so it still works with JavaScript off. The close button is
   hidden until the script marks the box, because a dead control is worse than
   no control.
--------------------------------------------------------------------------- */

.smm-film-float {
	position: fixed;
	bottom: 20px;
	z-index: 900;
	width: 215px;
	box-sizing: border-box;
	padding: 16px 18px 18px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
	text-align: center;
	line-height: 1.45;
}

.smm-film-float--right {
	right: 20px;
}

.smm-film-float--left {
	left: 20px;
}

.smm-film-float[hidden] {
	display: none !important;
}

.smm-film-float__intro {
	margin: 0 0 12px;
	color: #444;
	font-size: 0.88em;
	font-weight: 700;
}

.smm-film-float__button {
	display: block;
	padding: 11px 14px;
	border-radius: 6px;
	background: #da4444;
	color: #fff !important;
	font-size: 0.92em;
	font-weight: 700;
	text-decoration: none !important;
	transition: background 0.2s ease;
}

.smm-film-float__button:hover,
.smm-film-float__button:focus {
	background: #b93636;
	color: #fff !important;
}

/* Shown only once the script has taken charge of dismissal. */
.smm-film-float__close {
	display: none;
	position: absolute;
	top: 2px;
	right: 5px;
	padding: 2px 6px;
	border: 0;
	background: none;
	color: #999;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}

.smm-film-float__close:hover,
.smm-film-float__close:focus {
	color: #da4444;
}

.smm-film-float[data-js] .smm-film-float__close {
	display: block;
}

/* On a phone the full card covers too much of the page, so it shrinks to the
   button alone, sitting clear of the bottom edge. */
@media (max-width: 600px) {
	.smm-film-float {
		width: auto;
		max-width: 60vw;
		padding: 7px 10px 8px;
		bottom: 14px;
	}

	.smm-film-float--right {
		right: 14px;
	}

	.smm-film-float--left {
		left: 14px;
	}

	.smm-film-float__intro {
		display: none;
	}

	.smm-film-float__button {
		padding: 9px 14px;
		font-size: 0.85em;
	}

	.smm-film-float__close {
		top: -9px;
		right: -7px;
		width: 24px;
		height: 24px;
		padding: 0;
		border-radius: 50%;
		background: #fff;
		border: 1px solid rgba(0, 0, 0, 0.12);
		font-size: 15px;
	}
}

/* Front page bands ----------------------------------------------------------
   Colours live on the rows themselves (WPBakery's own "Row background"
   setting) so they can be changed in the page builder without touching this
   file. Only the breathing room is set here, keyed to a class on the row.
--------------------------------------------------------------------------- */

.smm-band {
	padding-top: 45px;
	padding-bottom: 20px;
}

@media (max-width: 600px) {
	.smm-band {
		padding-top: 30px;
		padding-bottom: 10px;
	}
}

/* Front page video hero -----------------------------------------------------
   The poster frame carries the band on its own. The player, the cross-fade and
   the cycling are all layered on top by the script, so nothing here depends on
   a video ever loading.
--------------------------------------------------------------------------- */

.smm-hero {
	position: relative;
	min-height: var(--smm-hero-height, 78vh);
	max-height: 820px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #16181c;
	text-align: center;
}

.smm-hero--bare {
	min-height: 0;
	padding: 70px 20px;
	background: #1a1c20;
}

.smm-hero__stage {
	position: absolute;
	inset: 0;
}

.smm-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.smm-hero__slide.is-active {
	opacity: 1;
}

.smm-hero__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The player is sized by the script to cover the band, because a 16:9 film in
   a wider band would otherwise letterbox. */
/* The player is invisible until it is actually running. YouTube paints its own
   poster frame and a large play button in the middle before autoplay takes
   over, and that flashed up on every slide. Holding the player back lets the
   still underneath carry those couple of seconds instead, and the fade means
   the changeover is not noticeable either. */
.smm-hero__player {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.7s ease;
}

.smm-hero__player.is-playing {
	opacity: 1;
}

.smm-hero__player iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

/* There is no longer anything laid over the film: it plays at its own
   brightness. The words carry their own legibility instead, through the
   shadows below, so nothing dims the picture to make room for them. */

.smm-hero__content {
	position: relative;
	z-index: 2;
	max-width: 760px;
	padding: 60px 24px 72px;
	color: #fff;
}

.smm-hero__heading {
	margin: 0 0 18px;
	color: #fff !important;
	font-size: clamp(1.9rem, 4.4vw, 3.2rem);
	line-height: 1.15;
	font-weight: 700;
	/* Three shadows, not one. The tight first one draws an edge against
	   whatever is behind it, which is what keeps the words readable over
	   snow or water glare; the wider two sit the text on the picture. A
	   single soft shadow disappears against a bright frame. */
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.9),
		0 2px 10px rgba(0, 0, 0, 0.75),
		0 4px 34px rgba(0, 0, 0, 0.55);
}

.smm-hero__intro {
	margin: 0 auto 28px;
	max-width: 620px;
	color: rgba(255, 255, 255, 0.93);
	font-size: clamp(1rem, 1.5vw, 1.18rem);
	line-height: 1.6;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.9),
		0 1px 12px rgba(0, 0, 0, 0.7),
		0 3px 26px rgba(0, 0, 0, 0.5);
}

.smm-hero__actions {
	margin: 0;
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.smm-hero__button {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 6px;
	background: #da4444;
	color: #fff !important;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none !important;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.smm-hero__button:hover,
.smm-hero__button:focus {
	background: #b93636;
	color: #fff !important;
}

/* The second button is solid white with dark text. With nothing dimming the
   film behind it, an outlined button sat too lightly on a bright frame; a
   filled one reads as a button at any brightness. The shadow lifts it off the
   picture, which a white shape on pale footage otherwise needs. */
.smm-hero__button--light {
	background: #fff;
	border: 2px solid #fff;
	color: #16181c !important;
	padding: 11px 24px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.smm-hero__button--light:hover,
.smm-hero__button--light:focus {
	background: #ececec;
	border-color: #ececec;
	color: #16181c !important;
}

.smm-hero__dots {
	position: absolute;
	z-index: 3;
	bottom: 20px;
	left: 0;
	right: 0;
	display: flex;
	gap: 9px;
	justify-content: center;
}

.smm-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	/* With nothing dimming the film, a plain white dot can land on a white
	   part of it and vanish. The shadow keeps the row countable. */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.smm-hero__dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

.smm-hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Which film is playing, so the hero is a signpost to it and not just
   decoration. */
.smm-hero__caption {
	position: absolute;
	z-index: 3;
	bottom: 16px;
	right: 20px;
	left: auto;
	margin: 0;
	max-width: 46%;
	text-align: right;
	font-size: 0.78rem;
	line-height: 1.4;
}

.smm-hero__caption-link {
	color: rgba(255, 255, 255, 0.95) !important;
	text-decoration: none !important;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.95),
		0 1px 10px rgba(0, 0, 0, 0.8);
}

.smm-hero__caption-link:hover,
.smm-hero__caption-link:focus {
	color: #fff !important;
	text-decoration: underline !important;
}

@media (max-width: 782px) {
	.smm-hero {
		min-height: 62vh;
	}

	.smm-hero__content {
		padding: 48px 20px 64px;
	}

	/* Stays pinned rather than going static: .smm-hero is a flex row, so a
	   static caption would line up beside the welcome text instead of
	   underneath it. */
	.smm-hero__caption {
		bottom: 42px;
		left: 0;
		right: 0;
		max-width: none;
		padding: 0 20px;
		text-align: center;
	}

	.smm-hero__dots {
		bottom: 18px;
	}

	.smm-hero__content {
		padding-bottom: 86px;
	}
}

/* Someone who has asked for less movement gets a still frame and no cycling.
   The script checks the same thing before it starts a player. */
@media (prefers-reduced-motion: reduce) {
	.smm-hero__slide {
		transition: none;
	}
}

/* The hero's own row: edge to edge, with nothing inset around the band
   itself. The inner elements carry no padding at all, or the hero would stop
   short of the sides. */
.smm-hero-row > .vc_column_container > .vc_column-inner,
.smm-hero-row .wpb_text_column,
.smm-hero-row .wpb_content_element {
	padding: 0 !important;
	margin-bottom: 0 !important;
}

/* Below it, though, the row does need room: without this the welcome text
   starts hard against the bottom edge of the film. */
.smm-hero-row {
	padding: 0 0 50px !important;
	margin-bottom: 0 !important;
}

@media (max-width: 600px) {
	.smm-hero-row {
		padding-bottom: 32px !important;
	}
}

/* A still slide, for a film whose player cannot be stripped back to moving
   pictures. Rather than sit dead in a band where everything else moves, the
   photograph drifts slowly across. Switched off for anyone who has asked for
   less movement. */
.smm-hero__slide--still .smm-hero__poster {
	animation: smm-hero-drift 24s ease-in-out infinite alternate;
	transform-origin: center center;
}

@keyframes smm-hero-drift {
	from { transform: scale(1.02) translate3d(-1.2%, 0, 0); }
	to   { transform: scale(1.12) translate3d(1.2%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.smm-hero__slide--still .smm-hero__poster {
		animation: none;
	}
}

/* Front page introduction ---------------------------------------------------
   The club's own words, under the hero. The styling lives here rather than in
   inline styles on the page so the page itself is plain prose: someone can
   rewrite the words in the editor without stepping on the design, which is
   what happens when every line carries its own font-size and font-weight.

   It was set in bold throughout. Bold everywhere emphasises nothing, and six
   centred bold lines read as a notice rather than a welcome.
--------------------------------------------------------------------------- */

.smm-intro {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.smm-intro p {
	margin: 0 0 20px;
	font-size: 1.04em;
	line-height: 1.75;
	color: #5c6066;
}

/* One line carries the weight, so it is the one people read first. */
.smm-intro__lead {
	font-size: 1.2em !important;
	line-height: 1.6 !important;
	color: #3b3f45 !important;
	margin-bottom: 22px !important;
}

.smm-intro__more {
	margin-bottom: 0 !important;
	font-size: 0.96em !important;
}

.smm-intro a {
	color: #da4444;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.smm-intro a:hover,
.smm-intro a:focus {
	color: #b93636;
}

@media (max-width: 600px) {
	.smm-intro p {
		font-size: 1em;
		line-height: 1.7;
	}

	.smm-intro__lead {
		font-size: 1.1em !important;
	}
}