/* Post/page header controller. All sizing is plain CSS percentages against
   a fixed, known aspect ratio — no JS, nothing recalculated on resize,
   the browser does it for free. */

.nonotami-post-header {
	max-width: 750px;
	margin: 0 auto var( --nonotami-header-bottom-spacing, 1rem ) auto;
}

/* Media + card share one grid cell (below) instead of being plain
   stacked siblings. A block container's auto height is driven by the
   BOTTOM MARGIN EDGE OF ITS LAST IN-FLOW CHILD (the card) — fine while
   "Card overlap onto image" stayed small and the card was always taller
   than the sliver it rode up onto, but that setting now goes up to
   pulling the card all the way to the image's top: once the overlap
   exceeds the card's own height, the OLD plain-stacked layout shrank
   `.nonotami-post-header` down to roughly the card's height alone — the
   box ended partway up the image instead of at its bottom — and
   .entry-content right after it then started there too, rendering
   partly or fully UNDER the image. Grid's own row-sizing takes the MAX
   needed size across every item sharing a cell, independent of any one
   item's own negative margin, so putting the image and the card in the
   same cell (grid-area: 1 / 1) guarantees this row — and therefore
   wherever .entry-content starts — is never shorter than the image,
   while still growing taller when the card's own content needs more
   room than that (unchanged from before). */
.nonotami-post-header:not( .nonotami-post-header-no-media ) {
	display: grid;
	grid-template-columns: 1fr;
}

/* No featured image (hidden by the "Show featured image" toggle, or none
   set) — the 750px cap above is tied to the image's own 3:2 box, so it's
   dropped in favor of 90% of whatever width the content column actually
   has (that column itself is capped at 900px — see layout.css). */
.nonotami-post-header.nonotami-post-header-no-media {
	max-width: 90%;
}

/* 3:2, capped at 750x500, responsive below that keeping ratio. Fills with
   the page's own background (follows --nonotami-color-bg, same as the
   card below it) rather than staying transparent — object-fit: contain
   below means an image that isn't exactly 3:2 itself leaves bars within
   this box, and those need something behind them other than whatever
   happens to be further back. */
.nonotami-post-header-media {
	grid-area: 1 / 1;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var( --nonotami-color-bg, #fff );
}

/* Targets only the real photo (".wp-post-image" is WordPress core's own
   class on every featured image) — a bare "img" selector here would also
   catch the platform-badges plugin's small corner icon, which shares this
   same wrapper, and stretch it to fill the whole box too. object-fit:
   contain — the whole image always visible, fit to the 3:2 box and
   centered, not cropped to fill it; mobile and desktop both use this
   same box, nothing per-breakpoint here. */
.nonotami-post-header-media .wp-post-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* The logo/backup-logo fallback (inc/featured-image.php, when the post has
   no featured image of its own) renders as one bare <img> with none of
   core's own classes — a *direct* child of this box, never nested inside
   the platform-badges plugin's wrap span the way the real photo can be, so
   "> img" here can never also catch that plugin's small badge icon. Same
   fit/centering as the real photo above. */
.nonotami-post-header-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* That plugin wraps the photo + badge in its own <span>, which would
   otherwise collapse to 0 height once the photo inside it goes absolute —
   pin it to fill the box too, so the badge (positioned relative to this
   span) still has real dimensions to sit a corner of. */
.nonotami-post-header-media .nonotami-pb-wrap {
	position: absolute;
	inset: 0;
}

.nonotami-post-header-subtitle {
	font-size: 1.1rem;
	opacity: 0.8;
	margin-top: 0.25rem;
}

/* Excerpt, disclaimer and the meta row (below) all share one size and
   line-height — 0.85em of the body text, not three separate numbers —
   so whichever ones are actually present on a given post (not every post
   has all three) take up the same, consistent height rather than each
   nudging the card's height by a different amount. */
.nonotami-post-header-excerpt {
	font-style: italic;
	font-size: 0.85em;
	line-height: 1.5;
}

/* Plain text, part of the card — no bar/background/padding of its own
   (that's the plugin's standalone-box look, not this); same color rules
   as the rest of the card (inherited, no override), just smaller. */
.nonotami-post-header-disclaimer {
	font-size: 0.85em;
	line-height: 1.5;
	font-style: italic;
	margin-top: 0.75rem;
}

.nonotami-post-header-disclaimer p {
	margin: 0;
}

/* Meta row — between the title and excerpt, or the card's last item
   when the excerpt is off. See inc/post-meta.php. */
.nonotami-post-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0;
	font-size: 0.85em;
	line-height: 1.5;
	opacity: 0.8;
}

.nonotami-post-meta > * {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.nonotami-meta-icon {
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

/* Fixed black-fill SVGs (assets/meta-icons/*.svg, served as plain <img>,
   so their fill can't be recolored via CSS `color`/`fill`) — inverted to
   white in dark mode instead. */
html[data-nonotami-theme="dark"] .nonotami-meta-icon {
	filter: invert( 1 );
}

.nonotami-meta-separator {
	opacity: 0.6;
}

.nonotami-post-header-card {
	/* The page's own background color, fading from 50% opaque at the top
	   (blends into the image above it) to fully opaque at the bottom —
	   white by default, but follows --nonotami-color-bg, so in dark mode
	   this becomes a dark card instead of staying a white card that would
	   fight with the (now light) card text. color-mix() against
	   `transparent` gives the 50%-opacity step without needing a separate
	   RGB-triplet variable just to use rgba(). */
	background: linear-gradient(
		to bottom,
		color-mix( in srgb, var( --nonotami-color-bg, #fff ) 50%, transparent ),
		var( --nonotami-color-bg, #fff )
	);
	padding: 1.25rem 1.5rem var( --nonotami-card-padding-bottom, 1.25rem );
	box-sizing: border-box;
	text-align: center;
	/* Very light, right + bottom only (positive x, positive y, no spread,
	   zero on the left/top — a plain box-shadow is one shape, it just
	   happens to fall only on those two sides at this offset/blur). */
	box-shadow: 3px 3px 10px rgba( 0, 0, 0, 0.08 );
}

/* No featured image (toggle off, or none set) — a plain header, not a
   card: no background fade, no shadow. That styling exists to help the
   card read against the image behind it and lift it off the page; with
   no image there's nothing to blend into or lift off, so it'd just be a
   gray/white box floating for no reason. Order and content are
   untouched — title, subtitle, excerpt, meta, disclaimer all still
   render exactly the same, this only strips the two visual properties
   above. */
.nonotami-post-header-no-media .nonotami-post-header-card {
	background: none;
	box-shadow: none;
}

/* Overlaps the image's bottom edge by --nonotami-card-overlap (as a % of
   the image's own height) — only applied when there is an image.
   align-self: END was tried first and doesn't work: 'end' alignment pins
   the item's MARGIN BOX to the area's end edge using margin-BOTTOM (0
   here), so margin-top never moves the item at all — it only shrinks
   this item's own contribution to the grid row's auto-height (negative
   margins count there), which is how "the card doesn't actually overlap
   anything, and a short card can leave .entry-content starting too high"
   both happened at once. align-self: START, with a POSITIVE margin-top
   instead, fixes both: a start-aligned item's top edge sits at
   margin-top from the area's own top, so this directly controls where
   the card begins (100% minus the overlap = flush at the image's bottom,
   same as before, at overlap 0) — and because the margin is positive,
   not negative, the row's auto-height (max() across the image's and the
   card's own contribution, each inclusive of their margin) can only ever
   come out to image height + however much the card's content, after
   that margin, actually needs: never less than the image, exactly the
   "push .entry-content down, but only when it's actually needed" rule.
   100% (64.6667% / 66.6667%) is 3:2's own height-as-width-%, same reason
   the overlap var below is in width-relative % too: percentage
   margins/widths always resolve against the containing block's WIDTH,
   never height, even for a top/bottom property. */
.nonotami-post-header-card-overlap {
	grid-area: 1 / 1;
	align-self: start;
	width: var( --nonotami-card-width, 80% );
	margin: calc( 66.6667% - var( --nonotami-card-overlap, 16.6667% ) ) auto 0;
	position: relative;
}