/*
 * Kuib Art Studio — the CSS that theme.json cannot express.
 *
 * Everything expressible as a design token lives in theme.json instead, so the
 * Site Editor's colour, type and spacing controls keep working. What is left
 * here is behaviour (hover, transitions), overlap (the date badge) and a few
 * responsive corrections.
 */

/* --------------------------------------------------------------------------
 * Block styles registered in functions.php
 * ----------------------------------------------------------------------- */

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	line-height: 1.4;
}

/* Applies to groups and columns alike — the contact form and the event
   sidebar are columns, and a group-only selector silently skipped them. */
.wp-block-group.is-style-card,
.wp-block-column.is-style-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid rgba(28, 25, 23, 0.14);
}

.wp-block-group.is-style-hairline-top {
	border-top: 1px solid rgba(28, 25, 23, 0.14);
}

.wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
	border-left: 1px solid rgba(28, 25, 23, 0.14);
	padding-left: var(--wp--preset--spacing--60);
}

.wp-block-image.is-style-full-bleed img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-post-title.is-style-underlined::after {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	margin-top: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent-deep);
}

/* --------------------------------------------------------------------------
 * Section headers — heading on the left, "see all" link on the right
 * ----------------------------------------------------------------------- */

.ds-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid rgba(28, 25, 23, 0.14);
}

/* --------------------------------------------------------------------------
 * A photograph that fills its half of a two-column band, however tall the
 * copy beside it runs. An aspect-ratio cannot do this: the height is not known
 * until the other column has laid out.
 * ----------------------------------------------------------------------- */

/* Do NOT put a height on the column: an explicit height cancels align-self:
   stretch, and the column collapses back to the image's own aspect ratio.
   Leave the height auto, let the flex row stretch it, and grow the figure. */
.ds-fill-media {
	display: flex;
	flex-direction: column;
}

.ds-fill-media > figure {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
}

.ds-fill-media figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.ds-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color 220ms ease, transform 220ms ease;
}

.ds-card:hover {
	border-color: rgba(180, 85, 47, 0.45);
}

.ds-card figure,
.ds-card .wp-block-post-featured-image {
	overflow: hidden;
	margin: 0;
}

.ds-card img {
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ds-card:hover img {
	transform: scale(1.035);
}

/* The date badge sits over the top-left corner of the card image. */
.ds-card-media {
	position: relative;
}

.ds-date-badge {
	font-family: var(--wp--preset--font-family--display);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: var(--wp--preset--color--base);
	border-right: 1px solid rgba(28, 25, 23, 0.14);
	border-bottom: 1px solid rgba(28, 25, 23, 0.14);
	padding: 14px 18px;
	text-align: center;
	pointer-events: none;
}

.ds-date-badge .ds-date-day {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.875rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-deep);
	margin: 0;
}

.ds-date-badge .ds-date-month {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 4px 0 0;
}

/* Push the card's footer line to the bottom however long the excerpt runs. */
.ds-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--wp--preset--spacing--30);
}

.ds-card-body .ds-card-excerpt {
	flex: 1 1 auto;
}

.ds-card-foot {
	/* Schedule, price and the "see the course" link: data and chrome, not
	   prose, so it stays on the geometric face with the date badge. */
	font-family: var(--wp--preset--font-family--display);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(28, 25, 23, 0.14);
	margin-top: auto;
}

/* --------------------------------------------------------------------------
 * Portraits. The blueprint desaturated these so mixed stock read as one shoot.
 * Here the photographs are the studio's own and the subject is a room full of
 * colour, so they stay exactly as shot.
 * ----------------------------------------------------------------------- */

.ds-portrait img {
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ds-portrait:hover img {
	transform: scale(1.03);
}

/* --------------------------------------------------------------------------
 * Style filter chips on the events page
 * ----------------------------------------------------------------------- */

.ds-filters {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ds-filters li { margin: 0; }

.ds-filters a,
.ds-filters .ds-filter-current {
	font-family: var(--wp--preset--font-family--display);
	display: inline-block;
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 9px 17px;
	border: 1px solid rgba(28, 25, 23, 0.20);
	color: var(--wp--preset--color--contrast);
	transition: border-color 200ms ease, color 200ms ease;
}

.ds-filters a:hover {
	border-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--accent-deep);
}

.ds-filters .ds-filter-current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
 * Header and footer
 * ----------------------------------------------------------------------- */

.ds-header {
	border-bottom: 1px solid rgba(28, 25, 23, 0.14);
}

.ds-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-deep);
}

.ds-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-deep);
	border-bottom: 1px solid var(--wp--preset--color--accent-deep);
	padding-bottom: 3px;
}

.ds-footer .is-style-eyebrow { color: var(--wp--preset--color--accent-soft); }
.ds-footer a { color: var(--wp--preset--color--surface); }
.ds-footer a:hover { color: var(--wp--preset--color--accent-soft); }
.ds-footer .ds-footer-legal a,
.ds-footer .has-muted-color { color: #A69687; }

/* --------------------------------------------------------------------------
 * Fluent Forms, dragged into the theme's vocabulary
 * ----------------------------------------------------------------------- */

.fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted) !important;
	font-weight: 400 !important;
}

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform select,
.fluentform textarea {
	background: var(--wp--preset--color--base) !important;
	border: 1px solid rgba(28, 25, 23, 0.20) !important;
	border-radius: 0 !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: 0.9375rem !important;
	padding: 13px 16px !important;
	box-shadow: none !important;
}

.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
	border-color: var(--wp--preset--color--accent-deep) !important;
	outline: none !important;
}

.fluentform .ff-btn-submit {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 17px 32px !important;
	transition: background 200ms ease;
}

.fluentform .ff-btn-submit:hover {
	background: var(--wp--preset--color--accent-soft) !important;
}

/* --------------------------------------------------------------------------
 * Responsive corrections
 * ----------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Two nav labels are two words long. Stacking them onto a second line keeps
 * all seven items on one row down to 1280px; left on one line the header
 * doubles in height there. Desktop only — below 782px the navigation is a
 * vertical overlay, where a centred, width-capped label would look wrong.
 * ----------------------------------------------------------------------- */

@media (min-width: 782px) {
	.ds-header .wp-block-navigation__container {
		align-items: center;
	}

	.ds-header .ds-nav-stack .wp-block-navigation-item__content {
		display: inline-block;
		max-width: 8.5em;
		white-space: normal;
		text-align: center;
		line-height: 1.35;
	}
}

@media (max-width: 781px) {
	.ds-section-head {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
	}

	.wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid rgba(28, 25, 23, 0.14);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--50);
	}


	/* Stacked, the quote column keeps its 64px + 96px side padding and the
	   quote wraps to four words a line. The padding is inline on the block so
	   the Site Editor can reach it, which means only !important overrides it. */
	.ds-quote-copy {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) !important;
	}

	.ds-date-badge { padding: 10px 14px; }
	.ds-date-badge .ds-date-day { font-size: 1.5rem; }
}

@media (max-width: 640px) {
	/* The header is brand · hamburger · phone. At 390px those three plus the
	   page padding come to about 440px, so the phone chip was being clipped.
	   Drop the descriptor and tighten the chip rather than hide the number —
	   on a phone, tapping it is the single most useful thing on the page. */
	.ds-brand-descriptor { display: none; }

	.ds-header .wp-block-button__link {
		font-size: 0.625rem;
		padding-left: 16px;
		padding-right: 16px;
	}

	.ds-header > .wp-block-group:last-child {
		gap: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------------------------
   Album galleries
   ---------------------------------------------------------------------------
   Core lays a nested-images gallery out with flexbox and puts `flex-grow: 1`
   on every figure, so whatever is left over in the last row stretches to fill
   the row. An album of 10 photographs is three rows of three and then a single
   orphan rendered at the full width of the page, several times the size of
   anything above it.

   A grid has no such behaviour: the odd one out occupies one cell and the rest
   of the row stays empty. Square cells also make every row the same height
   whatever mix of portrait and landscape phone photographs the album holds —
   core only equalises within a row, so rows otherwise jump about.

   Core pins the figure width and the cropped-image sizing behind a
   `:not(#individual-image)` specificity hack, so these overrides carry the
   same weight or they silently lose. Same trick, not a random one. */

.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 782px) {
	.wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(3, 1fr);
	}
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
	width: auto;
	max-width: none;
	margin: 0;
	flex-grow: 0;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
	display: block;
	width: 100%;
	height: auto;
	flex: none;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	flex: none;
	transition: transform 0.5s ease;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.03);
}