/*
Theme Name: Lucille Child
Theme URI: https://mishumusic.com/
Description: Child theme of Lucille for Mishu Music. Holds all custom work for the event system rebuild so the parent theme stays updatable.
Author: Angel Centeno, Nanichi Inc.
Author URI: https://nanichi.co/
Template: lucille
Version: 1.0.0
Text Domain: lucille-child
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/* Custom styles go below. The parent stylesheet is loaded from functions.php. */

/* ==========================================================================
   Events — chronological thumbnail grid, location filter, single event

   Lucille runs the content area as .white_on_black (white text on black), so
   these components are built dark-first against the theme's own palette:
   accent #a0a0a0 (the theme's "vibrant" colour), panels #232323, borders #333.
   Tokens are flipped under .black_on_white for the light scheme.

   No opacity dimming is used on text — that was what made labels unreadable
   against black. Muted tones are explicit colours with checked contrast.
   ========================================================================== */

.mishu-events,
.mishu-event {
	--mishu-text:     #ffffff;  /* 21:1 on black          */
	--mishu-muted:    #d2d2d2;  /* 14:1 on black          */
	--mishu-label:    #a0a0a0;  /* 8.6:1 on black — brand accent */
	--mishu-panel:    #232323;
	--mishu-border:   #3a3a3a;
	--mishu-accent:   #a0a0a0;
	--mishu-cta-bg:   #ffffff;
	--mishu-cta-text: #000000;  /* 21:1 on white          */
	--mishu-spacing: 	30px;
}

.black_on_white .mishu-events,
.black_on_white .mishu-event {
	--mishu-text:     #111111;
	--mishu-muted:    #444444;
	--mishu-label:    #5a5a5a;
	--mishu-panel:    #f1f1f1;
	--mishu-border:   #d5d5d5;
	--mishu-accent:   #4e4e4e;
	--mishu-cta-bg:   #111111;
	--mishu-cta-text: #ffffff;
}

.mishu-events {
	margin-bottom: var(--mishu-spacing);
	padding-top: 100px;
}

.mishu-events,
.mishu-event { color: var(--mishu-text); }

.mishu-events__header { margin-bottom: 24px; }
.mishu-events__title { margin: 0; color: var(--mishu-text); }

/* --- Location filter --- */
.mishu-event-filter { margin: 0 0 32px; }

.mishu-event-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Metrics follow the theme's .lc_button: 11px, uppercase, 1px tracking. */
.mishu-event-filter__link {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid var(--mishu-border);
	border-radius: 2px;
	background: transparent;
	color: var(--mishu-text);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: all .3s ease-out 0s;
}

.mishu-event-filter__link:hover,
.mishu-event-filter__link:focus {
	border-color: var(--mishu-accent);
	color: var(--mishu-text);
}

.mishu-event-filter__link.is-active {
	background: var(--mishu-cta-bg);
	border-color: var(--mishu-cta-bg);
	color: var(--mishu-cta-text);
}

/* --- Grid --- */
.mishu-events__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mishu-spacing);
}

.mishu-event-card { margin: 0; }

.mishu-event-card__link {
	display: block;
	text-decoration: none;
	color: var(--mishu-text);
}

/* Event artwork is poster-format — uploads are 1080x1350 (4:5), so the frame
   matches the source and nothing is cropped. object-fit stays as a guard for
   any future upload that does not follow the format. */
.mishu-event-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--mishu-panel);
}

.mishu-event-card__image,
.mishu-event-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.mishu-event-card__link:hover .mishu-event-card__image { transform: scale(1.04); }

/* Sits over artwork of unknown brightness, so it carries its own solid
   background rather than relying on the image behind it. */
.mishu-event-card__status {
	position: absolute;
	top: 10px;
	left: 10px;
	max-width: calc(100% - 20px);
	padding: 4px 10px;
	border-radius: 2px;
	background: #000000;
	color: #ffffff;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	/* Type names vary in length ("Concert" vs "Live Performance"), so the
	   badge is capped to the frame and truncated rather than wrapping into a
	   two-line block over the artwork. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mishu-event-card.is-past .mishu-event-card__media { opacity: .65; }

/* --- Sold out ---------------------------------------------------------
   A diagonal band stamped across the poster, the way a sold-out show gets
   overprinted on a physical flyer. Monochrome to match the brand: white band,
   black type, uppercase with wide tracking like the rest of the UI.

   The card stays fully clickable — the artwork is only knocked back, not
   hidden, and it lifts on hover so people can still see what they missed. */

.mishu-event-card.is-sold-out .mishu-event-card__image {
	filter: grayscale(1) contrast(.92) brightness(.62);
	transition: filter .35s ease, transform .35s ease;
}

.mishu-event-card.is-sold-out .mishu-event-card__link:hover .mishu-event-card__image {
	filter: grayscale(.35) contrast(1) brightness(.82);
}

.mishu-event-card__soldout {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
}

.mishu-event-card__soldout-band {
	display: block;
	width: 140%;
	padding: 9px 0;
	background: #ffffff;
	color: #000000;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 6px;
	text-align: center;
	text-transform: uppercase;
	text-indent: 6px;              /* offsets the trailing letter-space */
	transform: rotate(-7deg);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

/* The single event page carries the same language, without the rotation —
   it sits in the sidebar rather than over artwork. */
.mishu-event__soldout {
	display: block;
	margin: 0 0 24px;
	padding: 0 22px;
	background: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 2px;
	color: #000000;
	font-size: 11px;
	font-weight: 700;
	line-height: 38px;
	letter-spacing: 3px;
	text-align: center;
	text-transform: uppercase;
}

/* Honour a reduced-motion preference: keep the treatment, drop the animation. */
@media (prefers-reduced-motion: reduce) {
	.mishu-event-card.is-sold-out .mishu-event-card__image,
	.mishu-event-card__image {
		transition: none;
	}
}

.mishu-event-card__body { padding-top: 12px; }

.mishu-event-card__date {
	margin: 0 0 4px;
	color: var(--mishu-label);
	font-size: 12px;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.mishu-event-card__title {
	margin: 0 0 6px;
	color: var(--mishu-text);
	font-size: 16px;
	line-height: 1.35;
}

.mishu-event-card__link:hover .mishu-event-card__title { color: var(--mishu-accent); }

.mishu-event-card__location {
	margin: 0;
	color: var(--mishu-muted);
	font-size: 13px;
}

.mishu-events__empty { padding: 40px 0; color: var(--mishu-muted); }

/* --- Single event --- */
.single-mishu_event .heading_titles_container h1 {
	line-height: 1.2;
	font-size: 1.5rem;
}
.single-mishu_event .heading_titles_container h2 {
	line-height: 1.2;
	font-size: 1.25rem;
}
.mishu-event__media { margin-bottom: var(--mishu-spacing); }
.mishu-event__image { width: 100%; height: auto; }

.mishu-event__layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	align-items: start;
}

.mishu-event__gray-box {
	padding: 24px;
	background: var(--mishu-panel);
	border: 1px solid var(--mishu-border);
	border-radius: 2px;
	color: var(--mishu-text);
}

.mishu-event__details-title {
	margin: 0 0 16px;
	color: var(--mishu-text);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mishu-event__details-content { margin-bottom: var(--mishu-spacing); }

.mishu-event__meta { margin: 0; }

.mishu-event__meta dt {
	margin-top: 14px;
	color: var(--mishu-label);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mishu-event__meta dt:first-child { margin-top: 0; }

.mishu-event__meta dd {
	margin: 3px 0 0;
	color: var(--mishu-text);
	font-size: 14px;
}

.mishu-event__meta dd a { color: var(--mishu-text); text-decoration: underline; }
.mishu-event__meta dd a:hover { color: var(--mishu-accent); }

/* --- Ticket CTA --- */
.mishu-event__cta { margin: 0; }
.mishu-event__ticket-cta { margin: 0 0 var(--mishu-spacing); }

.mishu-event__tickets {
	display: block;
	padding: 0 22px;
	background: var(--mishu-cta-bg);
	border: 1px solid var(--mishu-cta-bg);
	border-radius: 2px;
	color: var(--mishu-cta-text);
	font-size: 11px;
	line-height: 38px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: all .3s ease-out 0s;
}

.mishu-event__tickets:hover,
.mishu-event__tickets:focus {
	background: var(--mishu-accent);
	border-color: var(--mishu-accent);
	color: var(--mishu-cta-text);
}

/* Button under the page title: inline, not full width. */
.mishu-event__cta--title { margin: 0 0 var(--mishu-spacing); }

.mishu-event__tickets--title {
	display: inline-block;
	width: auto;
	padding: 0 34px;
}

/* A past event keeps the link reachable but reads as inactive — outlined
   rather than filled, still well above the contrast floor. */
.mishu-event__tickets--title.is-past {
	background: transparent;
	border-color: var(--mishu-accent);
	color: var(--mishu-muted);
}

.mishu-event__tickets--title.is-past:hover {
	background: transparent;
	border-color: var(--mishu-text);
	color: var(--mishu-text);
}

/* --- Add to calendar --- */
.mishu-event__calendar,
.mishu-event__share {
	/* margin-top: 26px; */
	padding-top: 22px;
	border-top: 1px solid var(--mishu-border);
	margin-bottom: var(--mishu-spacing);
}

.mishu-event__iconlink-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Icon-only targets: 40px square keeps them above the 24px minimum touch
   size while staying compact in the sidebar. */
.mishu-event__iconlink {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mishu-border);
	border-radius: 2px;
	color: var(--mishu-text);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: all .3s ease-out 0s;
}

.mishu-event__iconlink:hover,
.mishu-event__iconlink:focus {
	border-color: var(--mishu-accent);
	color: var(--mishu-accent);
}

.mishu-event__iconlink .fa { display: block; }

/* The label is kept in the DOM for screen readers and as a tooltip, since an
   icon alone gives assistive tech nothing to announce. Matches core's helper
   so it behaves like the rest of WordPress. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Gallery --- */
.mishu-event__gallery { margin-top: 44px; }

.mishu-event__gallery-title {
	color: var(--mishu-text);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Carousel — driven by unslider, the same library the parent theme uses for
   its review sliders, so arrows and dots read as part of the site. Before the
   script runs (or if it never does) this degrades to a stacked list of photos
   rather than a broken widget. */
.mishu-event__carousel { position: relative; }

.mishu-event__carousel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mishu-event__carousel li { position: relative; }

.mishu-event__carousel img {
	display: block;
	width: 100%;
	height: auto;
}

/* Once initialised, unslider handles the horizontal layout; the frame keeps a
   consistent height so mixed portrait/landscape photos do not make the page
   jump between slides. */
.mishu-event__carousel.is-ready li {
	height: 520px;
	background: var(--mishu-panel);
}

.mishu-event__carousel.is-ready img {
	height: 100%;
	object-fit: contain;
}

/* Arrows: match the theme's own unslider controls, restyled to the brand. */
.mishu-event__carousel .unslider-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	background: rgba(0, 0, 0, .55);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 2px;
	color: #ffffff;
	font-size: 20px;
	cursor: pointer;
	transition: all .3s ease-out 0s;
}

.mishu-event__carousel .unslider-arrow:hover {
	background: #000000;
	border-color: var(--mishu-accent);
}

.mishu-event__carousel .unslider-arrow.prev { left: 14px; }
.mishu-event__carousel .unslider-arrow.next { right: 14px; }

/* Dots */
.mishu-event__carousel .unslider-nav ol {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.mishu-event__carousel .unslider-nav li {
	width: 8px;
	height: 8px;
	border: 1px solid var(--mishu-accent);
	border-radius: 50%;
	background: transparent;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	transition: background-color .3s ease-out 0s;
}

.mishu-event__carousel .unslider-nav li.unslider-active { background: var(--mishu-text); }

@media (max-width: 782px) {
	.mishu-event__carousel.is-ready li { height: 320px; }
	.mishu-event__carousel .unslider-arrow { width: 36px; height: 36px; margin-top: -18px; font-size: 16px; }
}

.mishu-event__back { margin-top: 40px; }
.mishu-event__back a { color: var(--mishu-muted); text-decoration: none; }
.mishu-event__back a:hover { color: var(--mishu-text); }

/* Visible keyboard focus, since several of these sit on dark panels. */
.mishu-event-filter__link:focus-visible,
.mishu-event__tickets:focus-visible,
.mishu-event__iconlink:focus-visible,
.mishu-event-card__link:focus-visible {
	outline: 2px solid var(--mishu-accent);
	outline-offset: 2px;
}

@media (max-width: 960px) {
	.mishu-events__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.mishu-event__layout { grid-template-columns: 1fr; gap: var(--mishu-spacing); }
	.mishu-events__grid { gap: 20px; }
}

@media (max-width: 480px) {
	.mishu-events__grid { grid-template-columns: 1fr; }
}