/**
 * Front-end styles for candela-v3.
 *
 * This file used to hold the hiding guards and the hover states for the
 * entrance animations. Those were removed on purpose: the only effect left is
 * the accordion, which is driven by assets/animations.js and needs nothing
 * here. Nothing in this file hides content, so the page is fully readable
 * without JavaScript.
 *
 * Selectors here MUST match the ones in assets/animations.js.
 */

/* --- Card layout --------------------------------------------------------
   One line per card: the rule, then the title on the left and the artist on
   the right, then the photo underneath.

   The order lives in templates/home.html, not here. The title group is
   declared before the featured image block, and its layout uses
   justifyContent: space-between, so the DOM itself already is title, artist,
   photo. No display: contents and no order properties: those fight the layout
   CSS that WordPress prints for every group, and the winner depends on
   specificity rather than on intent.
   ---------------------------------------------------------------------- */

.wp-block-post-template > li {
	position: relative;
	width: 76%;
	margin-inline: auto;
	padding-block: 0.8rem 0;
	border-top: 1px solid currentColor;
}

/* The card is deliberately narrower than the column: at 76% it reads as a card
   inside the page rather than as a full-bleed row, and its edges stay visible
   when it grows. */

/* The card grows by taking more room in the flow, not by being scaled. A
   transform would paint it on top of its neighbours; padding pushes them
   instead, so nothing overlaps. Exactly one card carries the class at a time,
   which keeps the document height almost constant: when the class moves from
   one card to the next, one shrinks while the other grows. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-post-template > li {
		transition: padding-block 800ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* The photo widens from 70% to the full card width as the card takes the
	   class. Its height follows from that width, so there is nothing else to
	   animate: no fixed height means no crop and no second transition. */
	figure.alignwide.wp-block-post-featured-image {
		transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1);
	}
}

.wp-block-post-template > li.is-centered {
	padding-block: 2.5rem;
}

/* The card scale does not change the document height, so no extra scroll
   travel is needed anywhere in the list. */

/* The header row: title left, artist right. Baseline keeps them sitting on the
   same line even though they use different font sizes.
   The italic and the tight line-height on the cards come from theme.json, under
   styles.blocks."core/group": they used to live in a user global styles post in
   the database, which is exactly the state a theme must not depend on.

   Wrapping is what makes this work on a phone, and it is content-driven rather
   than tied to a breakpoint: while the two fit side by side nothing changes, and
   when they do not, the artist drops to a line of its own instead of both being
   squeezed. A fixed breakpoint would guess wrong the moment a title is longer
   than the one it was tuned on. */
.wp-block-post-template > li > .wp-block-group {
	align-items: baseline;
	flex-wrap: wrap;
}

/* A title long enough to wrap must break between words. Squeezed into the space
   left by the artist, the browser otherwise splits "TWOJEYS" into "TWOJEY"
   over "S". */
.wp-block-post-template > li > .wp-block-group > .wp-block-post-title {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* theme.json gives every group a line-height of 0.6. That is deliberate for one
   line of type, and the lines overlap the moment a line wraps. On the title it
   never shows, because post-title carries its own 1.4; on the artist it does,
   and a long name on a phone stacks two lines on top of each other. 1.15 keeps
   the box shorter than the title's, so baseline alignment leaves the row height
   exactly where it was on a wide screen. */
.wp-block-post-template > li > .wp-block-group > .wp-block-group {
	margin-inline-start: auto;
	line-height: 1.15;
}

/* --- Background title ----------------------------------------------------
   A single fixed box behind the page, vertically centred, whose text is the
   title of the card that is centred at that moment. animations.js writes both
   the text and its size.
   ---------------------------------------------------------------------- */

.card-focus-title {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
	white-space: nowrap;
	line-height: 1;
	text-align: center;
	color: var(--wp--preset--color--contrast);
	opacity: 1;
}

/* Brief fade when the text changes. Driven by a class and a keyframe, not by
   a script, so it works even if nothing else loads. */
.card-focus-title.is-flashing {
	color: gray;
	animation: candela-title-in 450ms ease;
}

@keyframes candela-title-in {
	from {
		opacity: 0.15;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card-focus-title.is-flashing {
		animation: none;
	}
}

/* The page content paints above that box. */
.wp-site-blocks {
	position: relative;
	z-index: 2;
}

/* A card scaled up is wider than the column, and without this the overflow
   becomes a horizontal scrollbar. clip instead of hidden: it does not create a
   scroll container, so nothing else changes behaviour. */
html {
	overflow-x: clip;
}

/* --- Title --------------------------------------------------------------
   The title on the rule. The big one lives in a single fixed box behind the
   page (see .card-focus-title above).
   ---------------------------------------------------------------------- */

.wp-block-post-template > li > .wp-block-group > .wp-block-post-title {
	margin-block: 0;
	font-size: 85%;
	text-align: left;
}

/* The photo paints above the background title. */
.wp-block-post-template > li > .wp-block-post-featured-image {
	margin-block: 0.8rem 0;
}

/* --- Artist ------------------------------------------------------------
   The wrapper around the [shortcode_loop] output. Identified by its DOM
   position, not by its generated layout classes: `is-layout-flex` and the
   `wp-container-*` hash are WordPress artefacts and change without notice.
   ---------------------------------------------------------------------- */

.wp-block-post-template > li > .wp-block-group > .wp-block-group {
	/* `left` only moves a positioned box. Positioning is what makes the nudge
	   real; `inset-inline-start` keeps it on the reading side. */
	position: relative;
	inset-inline-start: 4px;

	margin-block: 0;
	font-size: 80%;
	text-align: right;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

/* text-decoration on the wrapper is inert: it is the links inside that draw
   text. Empty for posts without an artist, which leaves the title alone on
   the left. */
.wp-block-post-template > li > .wp-block-group > .wp-block-group a {
	color: inherit;
	text-decoration: none;
}

/* The photo has no fixed height: it takes the width it is given and its height
   follows the image's own proportions, so nothing is ever cropped. Centred
   cards get 70% of the card width; the centred one gets all of it. */
figure.alignwide.wp-block-post-featured-image {
	display: block;
	width: 70%;
	margin-inline: auto;
}

.wp-block-post-template > li.is-centered > .wp-block-post-featured-image {
	width: 100%;
}

/* Centres the inline-block photo above.
   Scoped by the card container rather than by .post.type-post.status-publish:
   those classes change with the post status or type, so the rule would stop
   matching silently. */
li.wp-block-post.post.type-post.status-publish {
	text-align: center;
}

/* --- Migrated from the Customizer ---------------------------------------
   These few rules used to live in the database (custom_css post 817). They
   are the only ones from that block that still mean something: everything
   else described the old three-column grid and was removed. A copy of the
   original is kept in the candela_legacy_custom_css_backup option by the
   cleanup in functions.php.
   ---------------------------------------------------------------------- */

/* Embeds in a post are capped so a vertical video cannot fill the screen. */
figure.wp-block-embed.is-provider-youtube {
	max-height: 500px;
}

iframe {
	max-height: 500px;
}

/* The skip link lands at the very top of main, and the header sits right above
   the first card. 75px of breathing room between them. */
main#wp--skip-link--target {
	margin-top: 75px !important;
}

/* Breathing room between the logo and the first card. */
.home header.wp-block-template-part {
	margin-bottom: 30px;
}

/* The logo is capped at 100% of the column, so on a narrow screen it reaches
   both edges. The gutter sits on the header rather than on the image: the
   figure is a flex item, and padding there would be counted inside the width
   the image measures against. On desktop nothing moves, because the logo is
   narrower than the column anyway. */
header.wp-block-template-part {
	padding-inline: 1.5rem;
}

/* The logo comes from [candela_logo], not from a core/image block, so WordPress
   does not enqueue the image block stylesheet: the only thing that used to cap
   an inline width: 500px is gone, and the logo spills off a phone screen.
   Declared here because the rule belongs to the markup we generate ourselves. */
header.wp-block-template-part .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* The link wraps the image and nothing else: an underline would be drawn under
   the picture, and the browser default would keep the anchor's colour for it. */
header.wp-block-template-part .wp-block-image a {
	text-decoration: none;
}