/**
 * DSC Events - front-end sponsor tiles.
 *
 * One wrapping, centre-justified flex row per tier with fixed-width tiles. A
 * short final row centres itself (no spacer tiles) and it reflows on mobile for
 * free. The white "stage" gives every logo the same footprint regardless of its
 * own dimensions (object-fit: contain), non-destructively.
 *
 * @package DSC_Events
 */

/* Editor-only placeholder for an empty DSC widget (never shown on the front end). */
.dsc-widget-placeholder {
	padding: 20px;
	border: 1px dashed #b68c72;
	color: #b68c72;
	text-align: center;
	font-style: italic;
}

/* The event single renders through the plugin's own template, so TheGem's
   page-background options (global and per-post) never apply and body stays
   #ffffff. Paint it ourselves, dark to match the live site. Overridable via
   --dsc-page-bg from the child theme. */
body.single-dsc_event {
	background-color: var( --dsc-page-bg, #262626 );
}

/* Content container. Sized so the sponsor grid hits 6 tiles per row like the live
   site: 6 tiles x 192px + 5 gaps x 10px = 1202px of usable width. The container's
   own 32px horizontal padding (16px each side) sits on top of that, so the default
   max-width is 1240px (1240 - 32 = 1208px usable, a few px clear of 1202). Tunable
   via --dsc-content-width. (The old 1200px left only 1168px usable = 5 per row.) */
.dsc-event {
	max-width: var( --dsc-content-width, 1240px );
	margin: 0 auto;
	padding: 24px 16px 48px;
}

/* Page title: "2025 EVENT" centred, uppercase, with a thin rule flanking the
   text (drawn as pseudo-elements - the live site uses separate divider widgets).
   Measured: Roboto Condensed 60px 700 #fff, 3px tracking. */
.dsc-event__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin: 0 0 36px;
	font-family: var( --dsc-heading-font, "Roboto Condensed", sans-serif );
	font-size: var( --dsc-title-size, 60px );
	font-weight: 700;
	color: var( --dsc-title-color, #fff );
	text-transform: uppercase;
	letter-spacing: var( --dsc-title-tracking, 3px );
	line-height: 1.1;
}

.dsc-event__title::before,
.dsc-event__title::after {
	content: "";
	height: 2px;
	width: var( --dsc-title-rule-width, 120px );
	background: var( --dsc-title-rule-color, #8a7a3d );
}

.dsc-event__title-text {
	flex: 0 1 auto;
}

/* Hero: featured image left, post content right, on the dark page. */
.dsc-hero {
	display: flex;
	gap: var( --dsc-hero-gap, 40px );
	align-items: stretch;
	margin: 0 0 48px;
}

.dsc-hero__media {
	position: relative;
	flex: 1 1 50%;
}

.dsc-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dsc-hero__body {
	flex: 1 1 50%;
	color: var( --dsc-page-text, #f2f2f2 );
}

/* No featured image: text runs full width instead of leaving a gap. */
.dsc-hero--no-image .dsc-hero__body {
	flex-basis: 100%;
}

/* First heading in the hero copy = large, light, letter-spaced display heading. */
.dsc-hero__body h1:first-of-type,
.dsc-hero__body h2:first-of-type {
	margin: 0 0 20px;
	font-family: var( --dsc-heading-font, "Roboto Condensed", sans-serif );
	font-size: var( --dsc-hero-heading-size, 44px );
	font-weight: 300;
	letter-spacing: var( --dsc-hero-heading-tracking, 4px );
	line-height: 1.1;
	text-transform: uppercase;
	color: var( --dsc-title-color, #fff );
}

/* Site-wide header buttons beneath the hero text (labels/URLs from settings). */
.dsc-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.dsc-hero__btn {
	display: inline-block;
	padding: 12px 26px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Gallery button overlaid on the hero image, upper portion, centred. */
.dsc-hero__gallery-btn {
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translateX( -50% );
	padding: 10px 22px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
}

/* Shared button house style (Kyle, 27/07). Every DSC button - the gallery
   overlay, the hero header buttons and the event buttons - carries .dsc-btn plus
   exactly ONE variant modifier below. .dsc-btn owns the shared text + border; each
   modifier paints its OWN background-color. This is deliberate: painting the
   background on .dsc-btn via var( --dsc-btn-bg ) collapsed all three variants to
   one fill, because that base declaration always resolved to its own fallback no
   matter what the modifier set the variable to (the modifier set the variable,
   but nothing re-read it where it was painted). Each variant now declares its own
   background-color longhand (not the background shorthand, so it can't reset other
   background properties) with !important - which also beats TheGem's own
   outline-button background on .dsc-event-button. */
.dsc-btn {
	color: #fff !important;
	border: 2px solid #fff !important;
}

/* Outline: transparent fill + border. For use off a photo, on a dark section. */
.dsc-btn--outline {
	background-color: transparent !important;
}

.dsc-btn--outline:hover {
	background-color: rgba( 255, 255, 255, 0.14 ) !important;
}

/* Outline on image (default): the outline plus a translucent dark backdrop so
   white text stays legible over a busy photo. --dsc-btn-bg is the SINGLE place the
   backdrop strength is set - tune it here (a design call for Rae) and every
   on-image button, hero and gallery overlay included, follows in one edit. The
   longhand reads it directly; the fallback equals the value, so the on-image fill
   is correct even if the variable is ever dropped. */
.dsc-btn--on-image {
	--dsc-btn-bg: rgba( 0, 0, 0, 0.55 );
	background-color: var( --dsc-btn-bg, rgba( 0, 0, 0, 0.55 ) ) !important;
}

.dsc-btn--on-image:hover {
	background-color: rgba( 0, 0, 0, 0.72 ) !important;
}

/* Solid: the same dark house colour, fully opaque - for use on a light
   background where a translucent fill would wash out. Border matches the fill. */
.dsc-btn--solid {
	background-color: #1a1a1a !important;
	border: 2px solid #1a1a1a !important;
}

.dsc-btn--solid:hover {
	background-color: #000 !important;
	border-color: #000 !important;
}

/* Event gallery grid (anchor target for the hero button). */
.dsc-event-gallery {
	margin: 48px 0 0;
}

.dsc-gallery__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* Square stage (live 2025 measured 281x281). The aspect-ratio lives on the STAGE,
   not the image: WordPress emits explicit width/height attributes on the <img>,
   which beat aspect-ratio set on the image itself (a portrait 683x1024 would keep
   its ratio and render 280x1024). The image fills the stage instead. */
.dsc-gallery__item {
	flex: 0 0 var( --dsc-gallery-thumb-size, 280px );
	width: var( --dsc-gallery-thumb-size, 280px );
	max-width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
}

/* object-fit: cover so landscape and portrait sources both fill the square -
   deliberately UNLIKE the sponsor tiles, which use contain because cropping a
   logo is unacceptable; cropping a photo to a uniform grid is the intent here. */
.dsc-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 782px) {
	.dsc-hero {
		flex-direction: column;
	}
	.dsc-hero__media,
	.dsc-hero__body {
		flex-basis: auto;
		width: 100%;
	}
}

/* Tier section. */
.dsc-tier {
	margin: 0 0 40px;
}

.dsc-tier__title {
	text-align: center;
	margin: 0 0 20px;
	/* Measured off the live 2025 page: Roboto Condensed 36px 700, bronze,
	   uppercase, 1.8px tracking. Headings are Roboto Condensed, NOT Montserrat
	   (which is only for sponsor names). Display casing is a CSS concern. */
	font-family: var( --dsc-heading-font, "Roboto Condensed", sans-serif );
	font-size: var( --dsc-heading-size, 36px );
	font-weight: 700;
	letter-spacing: var( --dsc-heading-tracking, 1.8px );
	text-transform: uppercase;
	/* Bronze on a transparent background for every section heading. Overridable:
	   set --dsc-heading-color in the child theme. The theme's dark body text
	   would otherwise be invisible on the dark page. */
	color: var( --dsc-heading-color, #b68c72 );
	background: transparent;
}

/* Optional per-section banner, sitting between the heading and the sponsors on
   any tier (Platinum included). Full content width, natural height. The 20px
   bottom margin matches the heading-to-grid rhythm (the heading already carries
   20px below it, so heading -> banner -> grid stays evenly spaced). */
.dsc-section__banner {
	margin: 0 0 20px;
}

/* max-width:100% / height:auto: the banner renders at its natural size, capped at
   the container width so it never upscales past its own resolution (Kyle's
   natural-size amendment). WP emits explicit width/height attributes on the <img>;
   height:auto lets them set the ratio without us fighting them with aspect-ratio
   (27/07 lesson). display:block drops the inline-image descender gap; margin auto
   centres a banner narrower than the container. */
.dsc-section__banner-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* The wrapping, centre-justified row. NOT a fixed N-per-row grid. Top-aligned so
   the square logo cards line up even when captions beneath run to different
   line counts. Column and row gaps are INDEPENDENT on purpose: --dsc-tile-gap
   (10px, measured off the live 2025 page) is the horizontal spacing that gives
   6 per row and must not change, so vertical rhythm is a separate knob,
   --dsc-tile-row-gap (28px), that can be tuned without ever affecting the fit.
   The bigger row gap keeps captions - including two-liners like "Strawberry
   Sound Vision Control" - clear of the next row. */
.dsc-tier__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	column-gap: var( --dsc-tile-gap, 10px );
	row-gap: var( --dsc-tile-row-gap, 28px );
}

/* Fixed-width tile. */
.dsc-tile {
	display: flex;
	flex-direction: column;
	width: var( --dsc-tile-size, 192px );
	text-decoration: none;
	color: inherit;
}

/* The white stage: a square logo card (live renders each at 192x192).
   object-fit: contain letterboxes the logo inside the square rather than
   cropping. Radius is squared off by default to match the live site. */
.dsc-tile__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	padding: 12px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: var( --dsc-tile-radius, 0 );
	/* Keep a very long on-card name from bursting the square and skewing the row. */
	overflow: hidden;
}

.dsc-tile__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var( --dsc-tile-radius, 0 );
}

/* No-logo mode: the name takes the logo's place, centred on the white card.
   #232323 because it sits on WHITE - it must not inherit the dark-page colour.
   Size and colour are overridable in the established custom-property pattern. */
.dsc-tile__name {
	font-family: var( --dsc-name-font, Montserrat, sans-serif );
	text-align: center;
	font-size: var( --dsc-tile-name-size, 16px );
	font-weight: 600;
	color: var( --dsc-tile-name-color, #232323 );
	line-height: 1.3;
	word-break: break-word;
}

/* Caption beneath EVERY tile (Kyle+Rae, 27/07): the sponsor name, small and
   uppercase. On the dark event page it takes a light colour; the standalone
   sponsor-grid widget overrides --dsc-page-text for light pages. Letter-spacing
   keeps 9px caps from looking cramped - flag to Rae, easy to drop. */
.dsc-tile__caption {
	font-family: var( --dsc-name-font, Montserrat, sans-serif );
	text-align: center;
	margin-top: 10px;
	/* Constrain the caption so it wraps inward rather than touching the tile
	   edges (Kyle, 27/07). Centred within the tile. */
	align-self: center;
	max-width: var( --dsc-tile-caption-width, 82% );
	font-size: var( --dsc-tile-caption-size, 9px );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.3;
	word-break: break-word;
	color: var( --dsc-page-text, #f2f2f2 );
}

/* The standalone sponsor-grid caption defaults to the SAME light colour as the
   event page - every page on this site uses the dark #262626 background, so a
   dark default was invisible. The widget's caption-colour control sets
   --dsc-grid-caption-color to override it on the rare light-background page. */
.dsc-sponsor-grid .dsc-tile__caption {
	color: var( --dsc-grid-caption-color, var( --dsc-page-text, #f2f2f2 ) );
}

/* Linked tiles get a subtle affordance. */
a.dsc-tile:hover .dsc-tile__stage {
	border-color: #bdbdbd;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 480px) {
	/* Stage is width:100% + aspect-ratio:1, so it stays square at the new size. */
	.dsc-tile {
		width: 140px;
	}
}

/* Platinum: stacked two-column feature blocks on a dark background. */
.dsc-tier--platinum {
	/* Do NOT paint a band - the whole page is dark (#262626); let it show
	   through so there is no seam. Overridable via --dsc-platinum-bg. */
	background: var( --dsc-platinum-bg, transparent );
	color: #fff;
	padding: 48px 20px;
	margin: 0 0 40px;
}

.dsc-plat {
	display: flex;
	gap: 32px;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto 40px;
}

.dsc-plat:last-child {
	margin-bottom: 0;
}

.dsc-plat__text {
	flex: 1 1 50%;
}

.dsc-plat__media {
	flex: 1 1 50%;
	/* Fixed landscape frame. Any source (including a portrait like Lion's
	   683x1024) is cropped to fill it, so every Platinum block is the same
	   height instead of the tallest photo dictating it. Matches the live site's
	   fixed frame + cover. Retune the whole section by changing this one ratio. */
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var( --dsc-photo-radius, 0 );
}

.dsc-plat__name {
	margin: 0 0 16px;
	/* Measured off the live page: Montserrat 19px 700, white, uppercase, 0.95px.
	   Sponsor NAMES stay Montserrat (headings are Roboto Condensed). */
	font-family: var( --dsc-name-font, Montserrat, sans-serif );
	font-size: var( --dsc-plat-name-size, 19px );
	font-weight: 700;
	color: var( --dsc-plat-name-color, #fff );
	text-transform: uppercase;
	letter-spacing: 0.95px;
}

.dsc-plat__logo-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;
	margin: 0 0 16px;
	background: #fff;
	border-radius: var( --dsc-tile-radius, 0 );
}

.dsc-plat__logo {
	display: block;
	max-width: 220px;
	max-height: 90px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var( --dsc-tile-radius, 0 );
}

.dsc-plat__desc {
	line-height: 1.6;
}

.dsc-plat__photo {
	/* Fill the fixed frame above and crop to cover, centred - never stretch. */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media screen and (max-width: 782px) {
	.dsc-plat {
		flex-direction: column;
		align-items: stretch;
	}
	.dsc-plat__text,
	.dsc-plat__media {
		flex: 0 0 auto;
		width: 100%;
	}
}