/* Front Page Designer (Customizer → Front Page Designer). Only enqueued
   on the front page — see inc/frontpage-designer.php. Every block is full
   width of .nonotami-content and its own content is centered; spacing
   between blocks is an inline style (one shared value, user-set) rather
   than anything here. */

/* display: flow-root (not plain block) gives each block its own block
   formatting context, so a child's margin — including a negative one,
   e.g. the masonry-overlay card's own `margin-bottom: -16.6667%`
   (css/category-archive.css) — can never collapse through this box and
   bleed into whatever block sits above or below it. Without this, two
   blocks could end up visually overlapping instead of merely touching at
   spacing 0. */
.nonotami-fp-block {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	display: flow-root;
}

/* --- Map --- */
/* No user-set height any more — a plain 2:1 box (the world map's own
   viewBox ratio; fine as a fixed default for the pin map too), height
   purely derived from width. This also sidesteps the bug the old
   height-in-px version had: the shortcode's own markup
   (.nonotami-maps-world, a plain block div with no height of its own)
   broke the percentage-height chain down to the actual <svg>/maplibre
   box, so `height: 100%` on those resolved to "auto" instead — the svg
   then rendered at its own full intrinsic (width/aspect) height,
   overflowing straight through the fixed-height box and over whatever
   came after it on the page. Position: absolute + inset: 0 here sidesteps
   that chain entirely: it sizes against this box (the nearest positioned
   ancestor) directly, never caring whether any element between the two
   has a height of its own. overflow: hidden is a second, redundant guard
   — belt and suspenders, same reasoning as .nonotami-fp-block's
   flow-root above, just for an overflow-by-size bug instead of a margin
   one. */
.nonotami-fp-maps-inner {
	width: 100%;
	aspect-ratio: 2 / 1;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid #000;
}

/* Not a user setting — always on, either color depending on theme (same
   data-nonotami-theme attribute every other dark-mode override in this
   theme reads, inc/dark-mode.php). */
html[data-nonotami-theme="dark"] .nonotami-fp-maps-inner {
	border-color: #fff;
}

.nonotami-fp-maps-inner .nonotami-maps-world,
.nonotami-fp-maps-inner .nonotami-maps-pin-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	max-width: none;
}

/* The world map's own wrapper only — maplibre (the pin map) manages its
   own canvas/control children with absolute positioning already; turning
   IT into a flex container too could fight with that, so it keeps plain
   block display, just filled via position/inset above. */
.nonotami-fp-maps-inner .nonotami-maps-world {
	display: flex;
	justify-content: center;
	align-items: center;
}

.nonotami-fp-maps-inner .nonotami-maps-world-svg {
	width: 100%;
	height: 100%;
}

/* --- Categories --- */
/* A plain centered flex row, NOT CSS grid — "Columns" (render_categories()'s
   $row_defs, balance_row_counts()) only decides how many items go in each
   row (when to wrap to a new one); it was never meant to stretch that
   row to the block's full width divided into N tracks. Every item keeps
   its own fixed size (see .nonotami-fp-cat-image below) regardless of
   row/column count, and the row is just that many fixed-size items,
   centered as a group with a plain gap between them — 5 columns and 5
   items is 5 circles sitting together in the middle, not 5 circles each
   stretched to fill 1/5 of the full row. flex-wrap is a mobile/narrow-
   viewport safety net (items can reflow to extra sub-rows there), not
   how a row's count is actually decided — that's still server-side. */
.nonotami-fp-cat-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.nonotami-fp-cat-row:last-child {
	margin-bottom: 0;
}

.nonotami-fp-cat-item {
	display: block;
	flex: 0 0 auto;
	text-decoration: none;
	color: inherit;
}

/* Image crop (Customizer → Front Page Designer → Categories → "Image
   crop"): width is computed server-side from the height setting and the
   crop mode itself (render_categories() — equal to height for circle/
   square, 1.5x height for 3:2) and set as an explicit inline width/height
   — a fixed size, same at every item count, never stretched to fill
   whatever's left of the row.
   margin: 0 auto centers that fixed-size box within its (possibly wider)
   cell; the item's own link + name still span the full cell width. */
.nonotami-fp-cat-image {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	max-width: 100%;
	border-radius: 4px;
}

.nonotami-fp-cat-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nonotami-fp-categories.is-circle .nonotami-fp-cat-image {
	border-radius: 50%;
}

/* --- Latest posts --- */
/* The "border between sections" idea never made sense for this block —
   this is a border around each card (list item or masonry card) instead,
   color/type/thickness user-set (Customizer → Front Page Designer →
   Latest Posts), off by default (--nonotami-fp-card-border is only set
   inline, per render_latest_posts(), when the toggle is on). */
.nonotami-fp-latest-posts .nonotami-archive-list-item,
.nonotami-fp-latest-posts .nonotami-archive-card {
	border: var( --nonotami-fp-card-border, none );
	box-sizing: border-box;
}

/* Fit, not crop — same "no cropping" rule as everywhere else images show
   (recommended posts: css/recommended-posts-frontend.css). The media
   box's own fixed aspect-ratio (css/category-archive.css) stays — this
   only changes how the image sits inside it, letterboxed instead of
   cropped, so nothing of the photo is cut off. Scoped to this section
   only; category archive pages reuse the exact same .nonotami-archive-*
   classes and are deliberately left cropped. No shadow/border here —
   that request was for the Recommended Posts overlay card specifically
   (css/recommended-posts-frontend.css's .nonotami-rp-overlay), nowhere
   else. */
.nonotami-fp-latest-posts .nonotami-archive-card-img {
	background: transparent;
	object-fit: contain;
}

/* One trick, category-image badge over the top-left corner of the
   featured image, front page only (see
   Nonotami_Category_Archive_Layout::card_image_html()'s $with_cat_badge).
   Sized relative to its own media box (22%), not a fixed px — a fixed
   48px badge was roughly half the list design's small 96px-wide image
   box, crowding out the real photo almost entirely there; a percentage
   scales sensibly whether this card's media box is the list design's
   96px square or the masonry design's much wider one. */
.nonotami-archive-card-media {
	position: relative;
}

.nonotami-fp-latest-posts .nonotami-archive-card-cat-badge {
	position: absolute;
	top: 6%;
	left: 6%;
	width: 22%;
	aspect-ratio: 1 / 1;
	height: auto;
	min-width: 20px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var( --nonotami-color-bg, #fff );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.3 );
}

/* --- About me --- */
.nonotami-fp-about {
	display: flex;
	justify-content: center;
}

/* Edge to edge: About Me's own design (Nonotami → Content Boxes) always
   bakes in a 1.5rem top/bottom margin (css/content-boxes-frontend.css) —
   meant for when it's prepended/appended to the_content(), not for this
   block context, where spacing between blocks is the Front Page
   Designer's own shared "Spacing between blocks" value, already applied
   to this block's own wrapper. Left alone, the two would stack (this
   block's margin AND the box's own), and make About Me's gap different
   from every other block's — zeroed here so this block is only ever as
   far from its neighbors as the shared spacing says, same as the others. */
.nonotami-fp-about .nonotami-cb-about {
	margin: 0 auto;
}