/*
 * Harajuku Today Event Data -- 開催概要 box (docs/C03_HarajukuToday_Phase3_
 * WordPress_Event_Summary.md). Enqueued only on single post pages that carry
 * harajuku_* meta -- see harajuku_today_enqueue_event_summary_style() in
 * harajuku-today-event-data.php.
 */

.harajuku-event-summary {
	box-sizing: border-box;
	position: static;
	width: 100%;
	/* Match the theme's own text measure (block themes expose this custom
	 * property for "layout: constrained" children); falls back to 100% of
	 * the surrounding content column on classic/non-block themes, so the box
	 * never stretches wider than the paragraphs around it. */
	max-width: var(--wp--style--global--content-size, 100%);
	/* docs/E02_個別記事上部の情報密度・読みやすさ改善.md "4.": a small top margin
	 * (previously 0) gives the featured image -> 開催概要 box transition some
	 * breathing room instead of the box sitting flush against the image. */
	margin: 1em auto 1.5em;
	padding: 1em 1.25em;
	background: rgba(127, 127, 127, 0.08);
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 6px;
}

.harajuku-event-summary * {
	box-sizing: border-box;
}

/* docs/E02 "3.": groups the status badge + "開催概要"/"ショップ情報" heading
 * into their own row, independent from the info rows below -- "状態バッジを
 * 独立した大きな行として扱い、縦方向の余白を増やしすぎないこと". No margin of its
 * own (the badge/title below still carry their pre-existing bottom margins),
 * so this wrapper is purely structural and does not add vertical space. */
.harajuku-event-summary__header {
	margin: 0;
}

.harajuku-event-summary__title {
	margin: 0 0 0.75em;
	font-size: 1.1em;
	line-height: 1.4;
}

.harajuku-event-status {
	display: inline-block;
	margin: 0 0 0.75em;
	padding: 0.25em 0.75em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: bold;
}

.harajuku-event-summary__list {
	margin: 0;
}

.harajuku-event-summary__row {
	padding: 0.5em 0;
	border-top: 1px solid rgba(127, 127, 127, 0.25);
}

.harajuku-event-summary__row:first-child {
	border-top: none;
}

.harajuku-event-summary__row dt {
	margin: 0;
	font-weight: bold;
}

.harajuku-event-summary__row dd {
	margin: 0.2em 0 0;
}

/*
 * R04-Revised (docs/R04_Revised_Article_Page_900px_Layout_and_Related_
 * Filtering.md "8."): 開催期間/開催時間(営業時間) get a bolder, slightly larger
 * value than the other rows (料金/会場) -- doc "8."'s own "1.05〜1.15rem /
 * font-weight 600〜700" target. Only `dd` (the value) changes; `dt` (the
 * label) keeps the same bold weight every row already has, so the visual
 * difference is the value's own size/weight, not a label change.
 */
.harajuku-event-summary__row--emphasis dd {
	font-size: 1.1rem;
	font-weight: 700;
}

/* Desktop: dt/dd side by side. Mobile stays stacked (the default above). */
@media (min-width: 600px) {
	.harajuku-event-summary__row {
		display: flex;
		gap: 1em;
	}

	.harajuku-event-summary__row dt {
		flex: 0 0 8em;
	}

	.harajuku-event-summary__row dd {
		flex: 1 1 auto;
		margin: 0;
	}
}

/*
 * docs/G01_Event_Summary_Google_Maps_Embed.md: 会場の地図 (Google Maps embed,
 * API key不要 -- harajuku_today_build_maps_embed_url() の "output=embed" URL,
 * src/harajuku_collector/maps.py と同じ検索URL方式). Fixed-ratio wrapper keeps
 * the iframe itself free of explicit width/height so it stays responsive; no
 * border of its own since it sits directly inside the already-bordered
 * .harajuku-event-summary box.
 */
/*
 * R04-Revised (docs/R04_Revised_Article_Page_900px_Layout_and_Related_
 * Filtering.md "9."): shrunk from a 16:9 box (which rendered ~295px tall
 * inside the Hero's ~524px-wide right column at desktop widths) to a wider
 * 12:5 ratio -- doc "9."'s own "160〜220px程度" target, at both the ~524px
 * desktop right-column width (~218px) and typical mobile widths (~163px at
 * 380px). `max-height` is a defensive cap only, for any viewport wide enough
 * that the aspect-ratio math alone would exceed the target range.
 */
.harajuku-event-summary__map {
	position: relative;
	width: 100%;
	aspect-ratio: 12 / 5;
	max-height: 220px;
	margin-top: 0.75em;
	border-radius: 4px;
	overflow: hidden;
}

.harajuku-event-summary__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* docs/E02 "2.": 補助情報 (開催上の注意/情報確認) -- visually smaller/muted than
 * the main info list above ("補助情報は、主要情報より文字サイズや色を控えめにす
 * る"), separated by a light dashed rule rather than the same solid border
 * the main rows use, so the two groups read as distinct priority tiers. Its
 * own .harajuku-event-summary__row rows reuse the same dt/dd rules above
 * (including the >=600px side-by-side layout) at this block's smaller
 * inherited font-size. */
.harajuku-event-summary__notes {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px dashed rgba(127, 127, 127, 0.3);
	font-size: 0.9em;
	opacity: 0.85;
}

.harajuku-event-summary__notes dl {
	margin: 0;
}

/*
 * Front-page card meta (docs/C05_HarajukuToday_Phase5_Top_Card_Event_Info.md).
 * Inserted immediately after core/post-title inside the front page's
 * "harajuku-today-query" Query Loop -- see
 * harajuku_today_inject_card_meta_after_post_title() in
 * harajuku-today-event-data.php. Deliberately has no fixed width/height of
 * its own (it must sit inside whatever column width the post-template grid
 * already gives each card) and no min-width overrides that could force a
 * card wider than its column.
 */

.harajuku-event-card-meta {
	box-sizing: border-box;
	/* No max-width of our own: a block element already fills its parent by
	 * default. Setting max-width:100% here used to fight the active theme's
	 * own ".is-layout-constrained > :where(...)" global-styles rule (same
	 * 1-class specificity, but this plugin's stylesheet loads after the
	 * theme's inline global styles, so ours used to win the tie) on the
	 * event/shop category archives, where the Post Title is wrapped in a
	 * constrained Group -- that rule narrows+centers the title to the theme's
	 * content width, but our explicit max-width:100% kept this card meta
	 * block stretched to the full (much wider) row, so the status badge and
	 * detail rows sat far to the left of the title above them. Leaving
	 * max-width unset lets that same theme rule size+center this block
	 * exactly like the title when nested under a constrained layout (the
	 * archive pages), while remaining a harmless no-op (natural width already
	 * equals 100% of a narrower grid column) on the front page's card grid,
	 * where no such ancestor exists.
	 */
	margin: 0.4em 0 0.75em;
	font-size: 0.85em;
	line-height: 1.5;
}

.harajuku-event-card-meta * {
	box-sizing: border-box;
}

/*
 * 1.21.0 (docs/F04_Visit_Update_Badge_Top_Cards.md "13."): wraps the status
 * badge and the "見てきた n" badge so 2-3 badges never overflow the card on a
 * narrow screen -- they wrap onto a second line instead. A no-op when only
 * one badge is present (a single flex child lays out exactly like the old
 * bare .harajuku-event-card-status div did).
 */
.harajuku-event-card-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.4em;
	row-gap: 0.3em;
}

.harajuku-event-card-status {
	display: inline-block;
	max-width: 100%;
	margin: 0 0 0.4em;
	padding: 0.15em 0.65em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 1.4;
	overflow-wrap: break-word;
}

.harajuku-event-card-status--today-only {
	border-color: #c0392b;
	color: #c0392b;
}

.harajuku-event-card-status--starts-today {
	border-color: #2b6cb0;
	color: #2b6cb0;
}

.harajuku-event-card-status--final-day {
	border-color: #b7791f;
	color: #b7791f;
}

.harajuku-event-card-status--ongoing {
	border-color: #276749;
	color: #276749;
}

/* 1.15.0 (docs/C16): 常設イベント badge -- neutral gray, deliberately distinct
 * from every date-derived status color above, since a 常設 post is not "today
 * only" or "ongoing" in the same sense; it signals "this is a standing
 * filler item," not an urgency level. */
.harajuku-event-card-status--permanent {
	border-color: #6b7280;
	color: #6b7280;
}

/* 1.23.0 (docs/F06_TopPage_Tomorrow_Info_Display.md "9."): 明日開催/明日スタート
 * badge -- a distinct violet, not reused from any status above, so a
 * tomorrow-start card reads as its own tier rather than being mistaken for
 * today's --ongoing (green) or --final-day (gold). */
.harajuku-event-card-status--upcoming {
	border-color: #7c3aed;
	color: #7c3aed;
}

/* 1.21.0 (docs/F04_Visit_Update_Badge_Top_Cards.md "12."): "見てきた n" badge --
 * a distinct color from every status above (none of which is teal/cyan) so
 * it reads as its own independent signal, not a 5th event-status value, even
 * though it reuses the same badge shape/class. */
.harajuku-event-card-status--visit {
	border-color: #0e7490;
	color: #0e7490;
}

/* 1.61.0 (docs/Q13_Visited_Visual_Emphasis.md "6."): styles the formatted
 * confirm-date span (e.g. "9/5確認") that replaces F04's old bare visit-count
 * digit inside the --visit badge -- normal weight and slightly reduced
 * opacity so "見てきた" itself stays the bold, high-contrast part of the
 * badge and the date reads as supplementary detail (doc "8.": 派手すぎない). */
.harajuku-event-card-status__visit-date {
	margin-left: 0.35em;
	font-weight: normal;
	opacity: 0.85;
}

.harajuku-event-card-meta__list {
	margin: 0;
}

.harajuku-event-card-meta__row {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5em;
	row-gap: 0;
	padding: 0.1em 0;
}

.harajuku-event-card-meta__row dt {
	margin: 0;
	flex: 0 0 auto;
	font-weight: bold;
}

.harajuku-event-card-meta__row dd {
	margin: 0;
	flex: 1 1 8em;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/*
 * "今日の状況" summary bar (docs/C07_HarajukuToday_Today_Status_Summary.md).
 * Prepended once, immediately before the front page's "harajuku-today-query"
 * Query Loop -- see harajuku_today_inject_today_summary_before_query() in
 * harajuku-today-event-data.php. Sits between the theme's own heading and
 * the card grid, so it deliberately uses no fixed width/height and no
 * heading tags of its own (avoids competing with the page's existing
 * heading hierarchy).
 */

/*
 * The bar's parts (date / per-status counts / last-verified time) are laid
 * out as one flex row separated by "｜", so on a desktop-width column they
 * read as a single line:
 *
 *   2026年8月2日（日）の原宿｜本日最終日 1件｜開催中 1件｜最終確認 8月1日 12:38
 *
 * `flex-wrap: wrap` is the only responsive rule needed -- no media query.
 * The parts stay on one line for as long as they fit and drop to the next
 * line only when the column is genuinely too narrow (phones), so the bar
 * never forces the page to scroll horizontally. The PHP markup is unchanged
 * (`__date` / `__counts` / `__updated` are still separate elements, and
 * which of them render is still decided by the same $is_first / $total
 * branching), so this is purely a presentation change.
 */
.harajuku-today-summary {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.5em;
	row-gap: 0.2em;
	max-width: 100%;
	margin: 0 0 1.25em;
	font-size: 0.85em;
}

.harajuku-today-summary * {
	box-sizing: border-box;
}

/* The section's own row-gap handles the spacing once the row wraps, so no
 * part carries a margin of its own any more. `min-width: 0` lets a long
 * part shrink and wrap its text internally instead of overflowing the
 * column (the usual flex `min-width: auto` overflow). */
.harajuku-today-summary > * {
	margin: 0;
	min-width: 0;
}

.harajuku-today-summary > :not(:first-child)::before {
	content: "｜";
	opacity: 0.55;
}

/* `__counts` is itself a flex container, so its own column-gap already
 * spaces its "｜" from the first count; the <p> parts are inline contexts
 * and need that space spelled out. */
.harajuku-today-summary > p:not(:first-child)::before {
	margin-right: 0.5em;
}

.harajuku-today-summary__date {
	font-weight: bold;
}

.harajuku-today-summary__counts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.5em;
	row-gap: 0.2em;
	font-size: 0.95em;
}

.harajuku-today-summary__count {
	white-space: nowrap;
}

.harajuku-today-summary__count:not(:first-child)::before {
	content: "｜";
	margin-right: 0.5em;
	opacity: 0.55;
}

/* 1.15.0 (docs/C16 "12."): the "常設 N件" count -- slightly muted, matching
 * __updated's own opacity, since it's a supplementary breakdown of the total
 * rather than a live/urgent status count. */
.harajuku-today-summary__count--permanent {
	opacity: 0.75;
}

.harajuku-today-summary__updated {
	font-size: 0.85em;
	opacity: 0.75;
}

.harajuku-today-summary__empty {
	font-size: 0.95em;
	opacity: 0.8;
}

.harajuku-today-summary__section-count {
	font-size: 0.95em;
	font-weight: bold;
}

/*
 * Shop card meta (docs/C11_HarajukuToday_Home_Event_Shop_Sections.md).
 * Inserted immediately after core/post-title inside the front page's
 * "harajuku-today-shop-query" Query Loop -- see
 * harajuku_today_render_shop_card_meta_html() in
 * harajuku-today-event-data.php. Structurally identical to the event card
 * meta above it (same box model, badge shape, row layout), duplicated under
 * its own `harajuku-shop-card-*` class prefix rather than sharing selectors
 * with `harajuku-event-card-*` so the two can be restyled independently
 * without one phase's CSS change accidentally affecting the other.
 */

.harajuku-shop-card-meta {
	box-sizing: border-box;
	/* See .harajuku-event-card-meta's own comment above -- same reasoning,
	 * shop side. */
	margin: 0.4em 0 0.75em;
	font-size: 0.85em;
	line-height: 1.5;
}

.harajuku-shop-card-meta * {
	box-sizing: border-box;
}

/* 1.21.0: shop equivalent of .harajuku-event-card-badges above -- see its own
 * comment for the reasoning. */
.harajuku-shop-card-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.4em;
	row-gap: 0.3em;
}

.harajuku-shop-card-status {
	display: inline-block;
	max-width: 100%;
	margin: 0 0 0.4em;
	padding: 0.15em 0.65em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 1.4;
	overflow-wrap: break-word;
}

.harajuku-shop-card-status--today-only {
	border-color: #c0392b;
	color: #c0392b;
}

.harajuku-shop-card-status--starts-today {
	border-color: #2b6cb0;
	color: #2b6cb0;
}

.harajuku-shop-card-status--final-day {
	border-color: #b7791f;
	color: #b7791f;
}

.harajuku-shop-card-status--open {
	border-color: #276749;
	color: #276749;
}

/* 1.15.0 (docs/C16): 常設ショップ badge -- see .harajuku-event-card-status--
 * permanent above for the same reasoning, shop side. */
.harajuku-shop-card-status--permanent {
	border-color: #6b7280;
	color: #6b7280;
}

/* 1.23.0 (docs/F06_TopPage_Tomorrow_Info_Display.md "9."): see
 * .harajuku-event-card-status--upcoming above for the same reasoning, shop
 * side. */
.harajuku-shop-card-status--upcoming {
	border-color: #7c3aed;
	color: #7c3aed;
}

/* 1.21.0: shop equivalent of .harajuku-event-card-status--visit above -- see
 * its own comment for the reasoning. */
.harajuku-shop-card-status--visit {
	border-color: #0e7490;
	color: #0e7490;
}

/* 1.61.0: shop equivalent of .harajuku-event-card-status__visit-date above --
 * see its own comment for the reasoning. */
.harajuku-shop-card-status__visit-date {
	margin-left: 0.35em;
	font-weight: normal;
	opacity: 0.85;
}

/* 1.62.0 (docs/Q14_Visited_Retrospective_Slot.md "10."): cosmetic-only visual
 * difference for the one 振り返り card the News Slider small grid may show --
 * added via the post_class filter (harajuku_today_add_retrospective_post_
 * class()) rather than any theme-markup change. Reduced saturation/brightness
 * so it doesn't read as "available today," while staying fully readable and
 * clickable (doc "10.": 完全グレーアウトして「クリックできない記事」に見せない
 * -- this is a subtle tint, not opacity-based dimming that would look
 * disabled). */
.harajuku-retrospective-card {
	filter: saturate(0.7) brightness(0.96);
}

.harajuku-shop-card-meta__list {
	margin: 0;
}

.harajuku-shop-card-meta__row {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5em;
	row-gap: 0;
	padding: 0.1em 0;
}

.harajuku-shop-card-meta__row dt {
	margin: 0;
	flex: 0 0 auto;
	font-weight: bold;
}

.harajuku-shop-card-meta__row dd {
	margin: 0;
	flex: 1 1 8em;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/*
 * Section wrappers (docs/C11 "7. CSS" -- 補助クラス候補). Not applied by any
 * PHP in this plugin; these are for the Group block a person manually wraps
 * each section's heading + Query Loop in during the Site Editor step
 * described in the plugin README, so the responsive column fallback below
 * has something scoped to attach to. Harmless (no-op) if the class is never
 * added -- WordPress does not know about it either way.
 */

.harajuku-today-event-section,
.harajuku-today-shop-section {
	margin: 0 0 2.5em;
}

/*
 * Defensive responsive column fallback for the shop Query Loop's post
 * template (docs/C11 "PC：4列 / タブレット：2列 / スマートフォン：1列"). Low
 * specificity, class-selector only -- an explicit `grid-template-columns`
 * the block itself sets (via its own inline `style` attribute, from the
 * Site Editor's Grid column-count control) always wins over this, since an
 * inline style outranks any class selector regardless of media query. This
 * only ever takes effect if the block is left at a layout the theme doesn't
 * already constrain, so it cannot fight a deliberate Grid setting -- it can
 * only fill in when nothing else already decided the column count.
 */
.harajuku-today-shop-section .wp-block-post-template.is-layout-grid,
.harajuku-today-shop-section ul.wp-block-post-template {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.harajuku-today-shop-section .wp-block-post-template.is-layout-grid,
	.harajuku-today-shop-section ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.harajuku-today-shop-section .wp-block-post-template.is-layout-grid,
	.harajuku-today-shop-section ul.wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/*
 * トップページ本体のイベント/ショップ列数 (docs/harajuku-today-responsive-
 * investigation.md). The shop-section fallback directly above never applies
 * on the live front page -- confirmed by DOM inspection -- because the
 * `*-section` class it targets is an opt-in wrapper a person adds manually in
 * the Site Editor (see this file's own comment above it) and the current
 * front page template does not have it. What actually decides column count
 * on the live front page is Gutenberg's own per-block generated CSS (a
 * `wp-container-core-post-template-is-layout-xxxxxxxx` class, hash suffix
 * different per site edit, written straight into the page's inline
 * `core-block-supports-inline-css` style block) using a percentage-based
 * `minmax()` track width -- e.g. `minmax(max(min(18px, 100%), 33.3333% - 4px), 1fr)`
 * for 3 columns. That keeps exactly 3 (or 4) tracks at any container width
 * instead of dropping to fewer columns, because the minimum track width
 * shrinks proportionally with the container instead of ever forcing a
 * reflow. It also carries `has-native-responsive-grid`, which is exactly the
 * class WordPress core's own 600px-and-below single-column fallback excludes
 * via `:not(.has-native-responsive-grid)` -- so that fallback never kicks in
 * either. Investigation confirmed the Site Editor's "最大列 1" control that
 * was changed to try to fix this only reached an outer Group block wrapping
 * the Query Loop, not this inner Post Template grid, so it had no visible
 * effect.
 *
 * Scoped to the two Query Loop classes the front page's own PHP config
 * already assigns one-to-one per section (harajuku_today_query_loop_config_
 * definitions() above in the PHP file) -- `harajuku-today-event-query` /
 * `harajuku-today-shop-query` -- so this cannot affect the category
 * archives, the final-day/past-info pages, or any other Query Loop; those
 * classes exist only on the front page's two sections. Two classes plus
 * `is-layout-grid` gives this rule higher specificity than Gutenberg's own
 * single hashed class, and this stylesheet is enqueued after Gutenberg's
 * inline style, so normal cascade order already wins here -- no
 * `!important` needed, and this cannot fight a deliberate Grid setting any
 * differently than the shop-section fallback above already documents doing.
 */
.harajuku-today-event-query .wp-block-post-template.is-layout-grid,
.harajuku-today-event-query ul.wp-block-post-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.harajuku-today-shop-query .wp-block-post-template.is-layout-grid,
.harajuku-today-shop-query ul.wp-block-post-template {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.harajuku-today-event-query .wp-block-post-template.is-layout-grid,
	.harajuku-today-event-query ul.wp-block-post-template,
	.harajuku-today-shop-query .wp-block-post-template.is-layout-grid,
	.harajuku-today-shop-query ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.harajuku-today-event-query .wp-block-post-template.is-layout-grid,
	.harajuku-today-event-query ul.wp-block-post-template,
	.harajuku-today-shop-query .wp-block-post-template.is-layout-grid,
	.harajuku-today-shop-query ul.wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/*
 * 本日最終日 / 過去情報 pages (docs/C13_HarajukuToday_Final_Day_And_Archive_
 * Pages.md "10. レイアウト" -- PC 3列 / タブレット 2列 / スマートフォン 1列).
 * Reuses the badge/row classes already defined above
 * (.harajuku-event-card-* / .harajuku-shop-card-*) unchanged -- only the
 * grid fallback and the zero-state message are new here.
 *
 * 1.35.1: this comment used to write the two class names glued together
 * with a slash and no space, which put a literal star-slash pair inside
 * the comment body and closed it early. Everything after that accidental
 * close, up to this comment's own intended closing star-slash, was then
 * parsed as one broken selector prelude -- which made the browser drop
 * the entire repeat(3, ...) base rule below (confirmed live on
 * harajuku.fun: the rule's raw bytes were served correctly, but never
 * appeared in the browser's parsed stylesheet rule list). That is why
 * 3-column never won against the Site Editor's own generated
 * wp-container-core-post-template-is-layout-xxxx class rule (2 columns),
 * even though this rule's selector (3 classes) already has higher
 * specificity than that single-class rule and needs no !important.
 * Lesson: never let a wildcard class name butt directly against a slash
 * inside a CSS comment -- always keep a space (or punctuation) between
 * the trailing star and the slash.
 *
 * Same low-specificity, class-selector-only approach as the shop section's
 * own fallback above.
 */
.harajuku-today-final-day-query .wp-block-post-template.is-layout-grid,
.harajuku-today-final-day-query ul.wp-block-post-template,
.harajuku-today-archive-query .wp-block-post-template.is-layout-grid,
.harajuku-today-archive-query ul.wp-block-post-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.harajuku-today-final-day-query .wp-block-post-template.is-layout-grid,
	.harajuku-today-final-day-query ul.wp-block-post-template,
	.harajuku-today-archive-query .wp-block-post-template.is-layout-grid,
	.harajuku-today-archive-query ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.harajuku-today-final-day-query .wp-block-post-template.is-layout-grid,
	.harajuku-today-final-day-query ul.wp-block-post-template,
	.harajuku-today-archive-query .wp-block-post-template.is-layout-grid,
	.harajuku-today-archive-query ul.wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/*
 * イベントカテゴリーアーカイブ (docs/J06-3_Event_Archive_Three_Column_Grid.md)
 * -- PC 3列 / タブレット 2列 / スマートフォン 1列。ショップアーカイブへの
 * 横展開前の試験実装。
 *
 * final-day/archive-query (docs/C13, J06-2) と違い、こちらは Site Editor
 * 側にGrid設定自体がまだ存在せず is-layout-flow のまま (実DOM確認済み) な
 * ので、詳細度で既存Gridルールに勝つ必要はなく、素直に display: grid を
 * 指定するだけでよい。
 *
 * .wp-block-query / .wp-block-post-template 自体にはページ固有クラスが
 * 付いていない (実DOM確認済み、このアーカイブページには Query Loop が1つ
 * しか存在しない) ため、WordPress標準の body class である category-event
 * を起点にスコープする。自動生成される wp-container-... 系クラスや、順番
 * 依存のセレクタには一切依存しない。
 */
body.category-event .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--style--block-gap, 1.2rem);
}

/*
 * WordPress core が is-layout-flow の子要素に付与する行間マージン (低い
 * 詳細度で常に効いている既存ルール) は、DOM順で先頭以外の全カードに一律
 * 加算される。Grid化後もこれが残ると、1行目以外のカードだけ上に余計な
 * 隙間ができ、gapと二重になって行がずれる。ここで打ち消し、間隔は上の
 * gap プロパティだけに一本化する。min-width: 0 は、長いタイトルや会場名
 * によって特定の列だけ幅が押し広げられるのを防ぐため (docs Step 8)。
 *
 * J06-3-1 (docs/J06-3-1_Event_Archive_Narrow_Overflow_Fix.md): overflow-wrap
 * は、カード本文(投稿の entry-content 全体がこのアーカイブでは各カードに
 * そのまま表示されている)内の「元ページ」リンクが、収集元記事の生のURL
 * をそのままリンクテキストにしているために起きていた横あふれの修正。URL
 * のような空白を含まない文字列は自然な改行位置を持たないため、列幅が
 * 狭くなるとリンクだけがカード幅を超えて伸び、右側に横スクロールが生じ
 * ていた(実機DOM計測で確認: 3列/2列/1列いずれの列幅でも、URLの長さ次第
 * で最大107px程度あふれていた)。overflow-wrap: anywhere は継承される
 * ため、この1箇所の指定でタイトル・抜粋・メタ情報・リンクすべてに及ぶ。
 * word-break: break-all ではなく overflow-wrap: anywhere を選んだのは、
 * 通常の単語や日本語文はそのまま自然な位置で改行され、あふれる長い文字
 * 列だけが必要な位置でのみ折り返されるため。
 */
body.category-event .wp-block-post-template > .wp-block-post {
	margin-block-start: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 900px) {
	body.category-event .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	body.category-event .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/*
 * ショップカテゴリーアーカイブ (docs/J06-4_Shop_Archive_Three_Column_Grid.md)
 * -- 直前のイベントカテゴリー用ブロック (J06-3/J06-3-1) の横展開。ライブDOM
 * 確認の結果、`/category/shop/` は body class が `category-shop` になる点
 * 以外、`.wp-block-query`/`.wp-block-post-template` がページ内に1つだけ・
 * Site Editor側のGrid設定なし・is-layout-flowのままという構造がイベント側
 * と完全に一致していたため、セレクタのスコープだけを置き換えて同じ方式を
 * 適用する。トップページの `.harajuku-today-shop-section` (D02/C11、4列
 * フォールバック) とはページ・セレクタとも別物であり、このルールとは干渉
 * しない。overflow-wrap: anywhere は J06-3-1と同じ理由 (カード本文中の
 * 「元ページ」生URLが折り返されないことによる横あふれの防止) で最初から
 * 適用する。
 */
body.category-shop .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--style--block-gap, 1.2rem);
}

body.category-shop .wp-block-post-template > .wp-block-post {
	margin-block-start: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 900px) {
	body.category-shop .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	body.category-shop .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/*
 * J06-5 (docs/J06-5_Unified_Archive_Card_Design.md): unifies the visual card
 * chrome (background/border/border-radius/padding/image ratio/typography/
 * shadow) across the 4 listing pages below, on top of the 3/2/1-column grids
 * J06-2 (final-day/archive-query) and J06-3/J06-4 (event/shop category
 * archives) already established just above. Column count, PHP query logic,
 * and DB are untouched -- appearance only.
 *
 *   body.category-event              -- /category/event/
 *   body.category-shop                -- /category/shop/
 *   .harajuku-today-final-day-query   -- /final-day/
 *   .harajuku-today-archive-query     -- /past-info/
 *
 * Live DOM check (2026-08-19) found two different card markups sharing the
 * same `.harajuku-card` class:
 *  - event/shop category archives: every child (image/title/meta/
 *    entry-content) sits inside one inner `.wp-block-group` that carries an
 *    inline `padding-top`/`padding-bottom` (a Site Editor block-spacing
 *    control on that Group -- wins over any class-based override without
 *    `!important`) plus a `has-global-padding` class (50px left/right).
 *  - final-day/past-info (`.harajuku-today-final-day-query` /
 *    `.harajuku-today-archive-query`): no such wrapper -- image/title/meta/
 *    excerpt are direct children of `.harajuku-card` itself, with no padding
 *    at all. past-info's featured-image figure also carries its own inline
 *    `aspect-ratio:4/3` (again a Site Editor Featured Image setting, event/
 *    shop's own inline value is `3/2`), and past-info's card body is a Post
 *    Excerpt block (`.wp-block-post-excerpt`) rather than event/shop's full
 *    `.entry-content`.
 *
 * Rather than distribute padding onto every individual child element
 * (fragile across two different DOM shapes), padding is unified once at the
 * outer `.harajuku-card` level (box-sizing: border-box) and the event/shop
 * inner group's own padding is zeroed out so it stops double-applying --
 * this also means the image sits inset within the same padding as the text
 * below it (not edge-to-edge), which was confirmed live (temporary <style>
 * injection, reverted -- no server-side change) to keep each row's image
 * bottom edge / title start position aligned across all three real-card
 * pages (event/shop archives + past-info; final-day currently has 0 posts
 * live, so its actual card rendering is unconfirmed -- see docs Step 13).
 * `aspect-ratio` is unified to `3/2` (already proven live on 2 of the 4
 * pages) rather than the doc's `16/10` candidate, which has no live
 * precedent on this site. Title/meta typography is pinned at its current,
 * already-identical value across pages rather than changed, since no
 * unification gap was found there; only margins/the excerpt-vs-entry-
 * content font-size gap (22px past-info vs 18px event/shop) needed fixing.
 *
 * Container width itself (event/shop archives are `alignfull`, ~1553px at a
 * 1568px-wide live viewport; final-day/past-info stay at the theme's
 * ~645px content width) is a Site Editor Query Loop alignment setting, not
 * something this stylesheet controls -- left as-is here and reported
 * separately (see docs/J06-5_ChangeLog.md "11.") rather than guessed at.
 */

body.category-event .harajuku-card,
body.category-shop .harajuku-card,
.harajuku-today-final-day-query .harajuku-card,
.harajuku-today-archive-query .harajuku-card {
	box-sizing: border-box;
	padding: 1.25em;
	background: rgba(127, 127, 127, 0.06);
	border: 1px solid rgba(127, 127, 127, 0.18);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.category-event .harajuku-card *,
body.category-shop .harajuku-card *,
.harajuku-today-final-day-query .harajuku-card *,
.harajuku-today-archive-query .harajuku-card * {
	box-sizing: border-box;
}

/* Zeroes out the event/shop inner group's own padding -- the outer card
 * rule above now supplies it once, uniformly with final-day/past-info
 * (which have no such wrapper). `!important` is required for the inline
 * padding-top/padding-bottom half (Site Editor block-spacing control, see
 * this block's own top comment); the has-global-padding class half would
 * not strictly need it, but is included here too for one easy-to-read rule
 * rather than splitting the override in two. */
body.category-event .harajuku-card > .wp-block-group,
body.category-shop .harajuku-card > .wp-block-group {
	padding: 0 !important;
}

/* Image: unified 3/2 ratio + cover-fit + its own smaller radius (the image
 * is inset within the card's own padding above, not edge-to-edge, so it
 * needs a corner radius of its own). `!important` overrides past-info's
 * inline `aspect-ratio:4/3` (event/shop's own inline `3/2` already matches,
 * so it is a harmless no-op there). */
body.category-event .harajuku-card .wp-block-post-featured-image,
body.category-shop .harajuku-card .wp-block-post-featured-image,
.harajuku-today-final-day-query .harajuku-card .wp-block-post-featured-image,
.harajuku-today-archive-query .harajuku-card .wp-block-post-featured-image {
	aspect-ratio: 3 / 2 !important;
	width: 100%;
	margin: 0 0 0.75em;
	border-radius: 6px;
	overflow: hidden;
}

body.category-event .harajuku-card .wp-block-post-featured-image img,
body.category-shop .harajuku-card .wp-block-post-featured-image img,
.harajuku-today-final-day-query .harajuku-card .wp-block-post-featured-image img,
.harajuku-today-archive-query .harajuku-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}

/* Title margin: pinned explicitly (value already identical across all 3
 * confirmed pages beforehand -- see this block's own top comment). */
body.category-event .harajuku-card .wp-block-post-title,
body.category-shop .harajuku-card .wp-block-post-title,
.harajuku-today-final-day-query .harajuku-card .wp-block-post-title,
.harajuku-today-archive-query .harajuku-card .wp-block-post-title {
	margin: 0 0 0.4em;
}

/* Meta/badge block margin: pinned explicitly, same reasoning as the title
 * margin above (already identical across pages; this just makes it
 * deliberate rather than an accidental match of two unrelated block-gap
 * presets). Covers both the event and shop meta class, since a page like
 * past-info mixes posts from both categories in one archive. */
body.category-event .harajuku-card .harajuku-event-card-meta,
body.category-event .harajuku-card .harajuku-shop-card-meta,
body.category-shop .harajuku-card .harajuku-event-card-meta,
body.category-shop .harajuku-card .harajuku-shop-card-meta,
.harajuku-today-final-day-query .harajuku-card .harajuku-event-card-meta,
.harajuku-today-final-day-query .harajuku-card .harajuku-shop-card-meta,
.harajuku-today-archive-query .harajuku-card .harajuku-event-card-meta,
.harajuku-today-archive-query .harajuku-card .harajuku-shop-card-meta {
	margin: 0.4em 0 0.75em;
}

/* Body text: event/shop show the full `.entry-content`, final-day/past-info
 * show a `.wp-block-post-excerpt` instead (Step 8: content itself is left
 * untouched -- only the shared typography/margin is unified here). Fixes
 * the one real gap found live: past-info's excerpt rendered at 22px, while
 * event/shop's entry-content rendered at 18px. `!important` on
 * padding/margin clears past-info/final-day's own block-gap-preset margin
 * so every page starts from the same explicit value. */
body.category-event .harajuku-card .entry-content,
body.category-shop .harajuku-card .entry-content,
.harajuku-today-final-day-query .harajuku-card .entry-content,
.harajuku-today-archive-query .harajuku-card .entry-content,
body.category-event .harajuku-card .wp-block-post-excerpt,
body.category-shop .harajuku-card .wp-block-post-excerpt,
.harajuku-today-final-day-query .harajuku-card .wp-block-post-excerpt,
.harajuku-today-archive-query .harajuku-card .wp-block-post-excerpt {
	padding: 0 !important;
	margin: 0.5em 0 0 !important;
	font-size: 18px;
	line-height: 1.4;
}

/* J06-5 Step 6: defensive `.hc-gallery` containment inside these 4 pages'
 * cards only -- no overflow was actually observed live (only 1 gallery
 * instance found across all sampled cards, and it did not overflow its
 * card), but this guards against the J06-3-1-class overflow this doc
 * explicitly calls out as a risk. Scoped under `.harajuku-card` only, so
 * the single-post page's own `.hc-gallery` (J02's Hero gallery) is
 * untouched. */
body.category-event .harajuku-card .hc-gallery,
body.category-shop .harajuku-card .hc-gallery,
.harajuku-today-final-day-query .harajuku-card .hc-gallery,
.harajuku-today-archive-query .harajuku-card .hc-gallery {
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

/*
 * Zero-state message (docs/C13 "5."/"6." "0件時") -- inserted by
 * harajuku_today_override_final_day_archive_no_results() in place of the
 * Query No Results block's own content.
 */
.harajuku-today-empty {
	font-size: 0.95em;
	opacity: 0.8;
}

/*
 * Full-card overlay link (docs/C15_HarajukuToday_Full_Card_Link.md). Applied
 * only to the `<li class="wp-block-post ...">` WordPress core itself already
 * renders per post inside a target Query Loop's post-template -- see
 * harajuku_today_inject_card_overlay_links() in harajuku-today-event-data.php.
 * No extra Group-block wrapper is required or assumed; `.harajuku-card` and
 * `.harajuku-card__overlay-link` are only ever added by that PHP filter, so
 * this never affects an unrecognized Query Loop, a single post page, or any
 * other listing.
 */

.harajuku-card {
	position: relative;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* 1.30.0 (docs/F08_TopPage_Padding_With_Upcoming_Events.md "7.2"): tints the
 * whole card panel -- not just the badge -- for a card whose post is
 * 明日開催/明日スタート or a further-future padding pick, so "this isn't
 * today's event" reads even before a viewer reaches the badge text. Reuses
 * the same violet the --upcoming badge already uses (F06 "9.") so both
 * signals read as one system.
 *
 * 1.30.1: added `!important` after a live check on harajuku.fun found this
 * rule losing to the site's Customizer "追加CSS" `.harajuku-card-layout {
 * background: #faf9f6; }` -- same specificity, later in source order
 * (wp_custom_css_cb() prints on `wp_head` at priority 101, after this
 * plugin's own enqueued stylesheet).
 *
 * 1.30.2: `!important` alone still wasn't visible. A second live check
 * (inspecting the actual served HTML, not just computed styles) found why:
 * `harajuku-card--future` is correctly added by harajuku_today_add_card_
 * overlay_to_li_tag() to the outer `<li class="wp-block-post ...">` only --
 * but that `<li>` is never itself the visible panel. Each event card's
 * *own* Post Template puts an inner, opaque `<div class="wp-block-group ...
 * harajuku-card-layout ...">` (the same `.harajuku-card-layout` from 1.30.1's
 * note, an "Additional CSS Class(es)" the site itself added to that inner
 * Group block, not this plugin) directly over the `<li>`'s full area, so the
 * `<li>`'s own background -- however loudly declared -- was always painted
 * *underneath* that div and never visible. The rule below now also targets
 * that descendant directly. The shop section's cards have no such inner
 * wrapper (confirmed live -- their `<li>` background paints fine on its
 * own), so the plain `.harajuku-card--future` rule stays too; harmless,
 * inert `!important` on an element that's already the visible layer for
 * that section. */
.harajuku-card--future {
	background-color: rgba(124, 58, 237, 0.07) !important;
	border-radius: inherit;
}

.harajuku-card--future .harajuku-card-layout {
	background-color: rgba(124, 58, 237, 0.07) !important;
}

.harajuku-card__overlay-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* Every pre-existing link/button/input inside the card (featured image,
 * title, "詳しく見る") stays clickable exactly as before -- raised above the
 * overlay rather than nested inside it. Plain body text (excerpt, card meta
 * rows) is deliberately left at the overlay's own stacking level: docs/C15
 * "1."'s own goal is that clicking/tapping the card's whitespace *and* body
 * text navigates to the post, and "14."'s own priority order
 * ("タップ・クリックしやすさを優先") explicitly allows sacrificing desktop
 * click-drag text selection over that same area to get it -- see the plugin
 * README's "Full-card overlay link" section for this trade-off spelled out. */
.harajuku-card a:not(.harajuku-card__overlay-link),
.harajuku-card button,
.harajuku-card input {
	position: relative;
	z-index: 2;
}

/* PC-only hover affordance (docs/C15 "8." "過度なアニメーションは不要"). Absent
 * on touch-only devices via the `(hover: hover)` media feature, so it never
 * fires from a tap. */
@media (hover: hover) {
	.harajuku-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	}
}

/* Visible keyboard focus (docs/C15 "9."). The `:has()` rule outlines the
 * whole card when the overlay link itself has focus; the plain
 * `:focus-visible` rule on the overlay link is the fallback for a browser
 * without `:has()` support -- since the overlay already covers the card via
 * `inset: 0`, its own outline reads as "the whole card" either way. */
.harajuku-card:has(.harajuku-card__overlay-link:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.harajuku-card__overlay-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/*
 * SNS share buttons -- unified 44x44px touch targets, right-aligned (docs/
 * E04_X共有ボタン円形化_ちらつき低減.md, 1.18.0, replacing 1.17.1's left-
 * aligned layout). One `.harajuku-share.harajuku-share--compact` block per
 * article, inserted by harajuku_today_inject_event_summary() right after the
 * 開催概要/ショップ情報 box. No visible "この記事を共有" text (conveyed via
 * `role="group" aria-label` on the container instead). No `position: fixed`,
 * no page-bottom-following bar (docs/E03 "7. CSS方針" 避けること, still true).
 *
 * X (`.harajuku-share__icon--x`, an `<a>` this plugin fully controls again as
 * of 1.18.0 -- see the plugin file's own 1.18.0 changelog note for why X's
 * 1.17.3 official widget was reversed) and URLコピー
 * (`.harajuku-share__icon--copy`) are both plain elements this stylesheet
 * sizes/colors directly. LINE (`.harajuku-share__icon--line`) stays a wrapper
 * around LINE Developers' own official small-icon widget (unchanged since
 * 1.17.2) -- this rule only reserves the fixed 44x44 box and centers the
 * widget inside it; deliberately no border-radius/filter/transform targets
 * the widget's own internals (`.harajuku-share__line` or anything inside
 * it), per 1.17.2's own established "ロゴを変形するCSSを適用しないこと" policy,
 * which E04 does not revisit for LINE's own markup (only the surrounding
 * layout).
 *
 * 1.18.3: the *visible* circle for all three is 30px, not 44px -- see the
 * `.harajuku-share__icon` rule's own comment below for why (LINE's official
 * widget never actually rendered at 44px, so X/copy's own 44px-filling
 * circles looked oversized by comparison). The 44x44 box below stays as the
 * shared, invisible touch-target/CLS-reservation footprint for all three;
 * only the visible graphic inside it shrank.
 */

.harajuku-share {
	box-sizing: border-box;
	max-width: var(--wp--style--global--content-size, 100%);
	margin: 1em 0 1.5em;
}

.harajuku-share * {
	box-sizing: border-box;
}

.harajuku-share--compact {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 44px;
}

/* Outer 44x44px touch target shared by all three icons -- fixed from first
 * paint regardless of image/CSS/widget-script load order, so no reload ever
 * changes the row's size or position (docs "ちらつき・CLS対策"). 1.18.1: the
 * size-critical properties are `!important` and the box clips its own
 * content (`overflow: hidden`) to guard against any theme global-style rule
 * winning the cascade.
 *
 * 1.18.3: this outer box is a touch-target reservation only, no longer a
 * visible circle by itself -- live production check (screenshot) found X's
 * own drawn 44px circle reading visibly larger than LINE's official small
 * icon, which (being a widget this plugin does not control or resize) never
 * actually renders at 44px in the first place. Rather than guess LINE's
 * exact rendered size again, the user supplied a ready-made circular X icon
 * (`assets/x-icon.png`) already visually matched against the live LINE icon,
 * and this plugin now displays it (and its own hand-drawn copy icon) at a
 * smaller visible diameter (30px, chosen as this asset's own natural 60px
 * raster halved for a sharp 2x-density render) *centered inside* the same
 * 44x44 touch target LINE's own wrapper already used -- mirroring LINE's own
 * "smaller visible badge inside a larger invisible box" shape instead of
 * fighting it. */
.harajuku-share__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	flex: 0 0 44px !important;
	padding: 0;
	border: none;
	border-radius: 50%;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/* A faint full-touch-target hover highlight, shared by all three -- the
 * visible icon itself no longer fills this box, so this is what gives the
 * whole 44px tap area a hover affordance (docs "hover / active": color/
 * opacity transition only, no `transform: scale(...)`). */
.harajuku-share__icon:hover {
	background: rgba(0, 0, 0, 0.05);
}

/* X's own ready-made circular badge (background + logo already baked into
 * the PNG by design -- this plugin draws no background/border of its own
 * here). `border-radius: 50%` is a defensive safety net in case the source
 * image's own corners are not already fully transparent. */
.harajuku-share__icon--x img {
	display: block;
	width: 30px !important;
	height: 30px !important;
	max-width: 30px !important;
	max-height: 30px !important;
	border-radius: 50%;
}

/* No background/border of its own -- the official LINE widget it wraps is
 * already a complete, self-contained circular badge once its loader script
 * runs; this class only centers it inside the shared 44x44 touch target. */
.harajuku-share__icon--line {
	background: transparent;
}

.harajuku-share__icon--copy {
	cursor: pointer;
}

/* The copy button's own visible circle -- drawn at the same 30px diameter as
 * X's badge (see the .harajuku-share__icon comment above), centered inside
 * the 44x44 touch target by the shared flex rule on .harajuku-share__icon. */
.harajuku-share__icon-visual {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	min-height: 30px !important;
	max-width: 30px !important;
	max-height: 30px !important;
	border-radius: 50%;
	background: #f5f5f5;
	border: 1px solid #d9d9d9;
	color: #4a4a4a;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.harajuku-share__icon-visual svg {
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
}

/* Post-copy feedback (assets/js/harajuku-share.js): background/border/color
 * only on the inner 30px visual circle, never a size change on either box --
 * docs "コピー後のフィードバック...ボタンサイズを変えない". The class itself
 * still toggles on the outer <button> (unchanged JS); this selector reaches
 * through to the visible circle. */
.harajuku-share__icon--copy.is-copied .harajuku-share__icon-visual {
	background: #e6f4ea;
	border-color: #34a853;
	color: #1e7e34;
}

.harajuku-share__icon--copy.is-copy-error .harajuku-share__icon-visual {
	background: #fdecea;
	border-color: #e53935;
	color: #c62828;
}

.harajuku-share__icon:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Screen-reader-only result announcement for the copy button (docs "推奨は
 * アイコン色・背景色・aria-labelの変更です" -- feedback is visual via the
 * .is-copied/.is-copy-error classes above, never inserted visible text that
 * could push the row wider or wrap it to a second line). Deliberately not
 * `display: none`, which would stop `aria-live` from ever announcing it. */
.harajuku-share__message {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/*
 * "見てきた" visit-update display (docs/F03_Visit_Updates_WordPress_Display.md,
 * 1.20.0). Enqueued only on a single post page that actually has something to
 * show -- see harajuku_today_enqueue_event_summary_style()'s 1.20.0 note in
 * harajuku-today-event-data.php. Every selector below is scoped under
 * .harajuku-visit-updates/.harajuku-visit-update -- no bare element selector
 * (img/p/etc.) and no `.wp-block-group`/`.is-layout-constrained` override, per
 * docs "20. CSSスコープ" (the exact category-page layout regression this
 * plugin has hit before, see harajuku-event-card-meta's own comment above).
 */

.harajuku-visit-updates {
	box-sizing: border-box;
	width: 100%;
	/* R05 (docs/R05_Visit_Update_Compact_Layout_and_Post_Event_Behavior.md
	 * "17."): narrowed from J04's 1100px to the single 900px axis R04-Revised
	 * established for every other single-article section (Hero/article body/
	 * source-details/related-guides/related-articles) -- this section no
	 * longer needs extra width now that photos sit in their own fixed-size
	 * column instead of stretching across the whole card (see .harajuku-
	 * visit-update__photos below). */
	max-width: 900px;
	margin: 1.5em auto;
}

.harajuku-visit-updates * {
	box-sizing: border-box;
}

/* J06 (docs/J06_Visit_Heading_Hairline_Unification.md): matches the bottom-
 * of-article "他にも、今日の原宿では・・・" hairline, a WordPress Site Editor
 * Group block that isn't in this repo -- confirmed live on harajuku.fun via
 * its computed/inline style: `background-color:#d9d9c2`,
 * `border-radius:51px` on every corner, `padding:6px var(--wp--preset--
 * spacing--20)` (10px). Reused here as a plain, fully-rounded pill
 * (`border-radius: 999px` reads identically on a bar this short) rather than
 * copying the exact 51px, so this rule stays independent of that
 * Customizer-side value ever changing. Text styling (weight/size/color) is
 * deliberately left as this heading's own -- doc "4.5" only asks that the
 * *hairline* match, not the light (font-weight 300) paragraph text the other
 * hairline happens to wrap. */
.harajuku-visit-updates__title {
	margin: 0 0 1em;
	padding: 0.35em 0.6em;
	background: #d9d9c2;
	border-radius: 999px;
	font-size: 1.1em;
	line-height: 1.4;
	text-align: left;
}

/* R05 (docs "10."/"15."): once the event has ended, the pill switches from
 * the "currently happening" beige (#d9d9c2, still used by every ongoing/
 * upcoming/permanent post) to a neutral grey -- doc "15." explicitly asks for
 * "派手な警告色ではなくニュートラルな灰色" here, not a second accent color, so
 * this reuses the exact same 999px pill shape with only the fill changed. */
.harajuku-visit-updates__title--ended {
	background: #e2e2e2;
}

.harajuku-visit-updates__ended-note {
	margin: -0.6em 0 1em;
	font-size: 0.85em;
	opacity: 0.75;
}

.harajuku-visit-updates__list {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

/* One visit-update card (docs "9. 1追記の基本構造"). */
.harajuku-visit-update {
	padding: 1em 1.25em;
	background: rgba(127, 127, 127, 0.06);
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 6px;
}

/* R05 (docs "3."-"6."): groups the date/title header and the body text into
 * one column, sitting alongside .harajuku-visit-update__photos below inside
 * .harajuku-visit-update__body (see that selector's own @media block for the
 * desktop 2-column split; .harajuku-visit-update__main has no styling of its
 * own beyond being a grid item -- min-width:0 keeps long unbroken text/URLs
 * in the body from forcing the grid column wider than its 60% track). */
.harajuku-visit-update__main {
	min-width: 0;
}

.harajuku-visit-update__header {
	margin: 0 0 0.5em;
}

.harajuku-visit-update__date {
	margin: 0 0 0.15em;
	font-size: 0.9em;
	opacity: 0.75;
}

.harajuku-visit-update__title {
	margin: 0;
	font-size: 1em;
	font-weight: bold;
}

/* R05 (docs "6."): "本文より少しコンパクト" -- nudged down from 1.7, still well
 * clear of a cramped single-spaced feel. No excerpt/truncation: long bodies
 * still render in full and grow the card's height naturally. */
.harajuku-visit-update__content {
	line-height: 1.6;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Photos render before the body text (docs/M02_TopPage_Visit_Highlight_Plan.md
 * section 6: 優先度「日付＞写真＞本文」, kept unchanged by R05) in a fixed
 * 2-column grid. R05 (docs "3."-"5."): capped to at most 3 photos by the PHP
 * side (harajuku_today_render_visit_update_card()'s array_slice()) -- the
 * first photo always spans both columns ("main", 大1), any remaining 1-2
 * photos (小1/小2) fall into the grid below it, matching doc "4."'s 1/2/3+
 * layouts exactly with no extra markup or :nth-child rules. */
.harajuku-visit-update__photos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5em;
	margin: 0 0 0.75em;
}

.harajuku-visit-update__photo {
	margin: 0;
}

/* The first photo ("main", docs "4.") always spans full width, whether it is
 * the only photo or has 1-2 smaller thumbnails below it -- R05 generalizes
 * the pre-R05 :only-child rule (which only covered the "1枚" case) to :first-
 * child so the "2枚"/"3枚以上" cases (doc "4.") get the same 大1 treatment. */
.harajuku-visit-update__photo:first-child {
	grid-column: 1 / -1;
}

.harajuku-visit-update__photo-link {
	display: block;
}

/* R05 (docs "5."): a fixed aspect-ratio box (instead of the old `height:
 * auto`, which let a tall portrait photo stretch the whole card downward) so
 * every photo -- main or thumbnail -- renders at a predictable height.
 * object-fit: cover crops to fill that box; doc "5." flags that this may lose
 * information on a very tall poster/signage photo, but this session has no
 * access to the actual production photo set to confirm how often that
 * happens, so `cover` (doc's own first-phase recommendation) is used as-is --
 * left as a follow-up if a live check later finds it cropping badly. */
.harajuku-visit-update__photo-img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.harajuku-visit-update__photo:first-child .harajuku-visit-update__photo-img {
	aspect-ratio: 4 / 3;
}

.harajuku-visit-update__photo:not(:first-child) .harajuku-visit-update__photo-img {
	aspect-ratio: 1 / 1;
}

.harajuku-visit-update__caption {
	margin: 0.35em 0 0;
	font-size: 0.85em;
	opacity: 0.8;
}

/* Full-viewport click-to-enlarge overlay (docs/M02 section 6), a pure-CSS
 * `:target` lightbox -- no JavaScript, matching F03's own precedent
 * ("重いJS/外部ライブラリを増やさない"). Reuses the already-loaded photo `url`
 * (no second, larger image request); each .harajuku-visit-update__photo-link
 * points at this element's id, and this element's own href="#" closes it by
 * clearing the URL fragment (so it stops matching :target) -- clicking
 * anywhere on the enlarged photo closes it again. */
.harajuku-visit-update__lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 2em;
	background: rgba(0, 0, 0, 0.85);
}

.harajuku-visit-update__lightbox:target {
	display: flex;
}

.harajuku-visit-update__lightbox-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 4px;
}

/* R05 (docs "3."): desktop 2-column compact card -- photos ~40% / date+title+
 * body ~60%, replacing M02's own "text 60% / photos 40%" split that section 6
 * removed for making photos too small (M02 kept a single full-width column at
 * every viewport instead). R05 deliberately reintroduces a side-by-side split
 * because the underlying problem M02 solved (a large hero-style photo
 * cramped into 40%) no longer applies now that every photo already renders in
 * its own small fixed-aspect-ratio box (see .harajuku-visit-update__photo-img
 * above) -- the whole point of this pass is a *compact* card, not a large
 * photo. Same 600px breakpoint the 開催概要 box's dt/dd layout already
 * switches at (docs "3." doesn't mandate a specific breakpoint). Scoped with
 * :has() to the "has photos" case only -- with no photos, .__body has just
 * one child (.harajuku-visit-update__main) and stays a plain block, needing
 * no grid at all. Source order already matches the target columns (photos
 * first, main second, docs "3." "写真左/本文右"), so no `order` override is
 * needed on either axis. */
@media (min-width: 600px) {
	.harajuku-visit-update__body:has(.harajuku-visit-update__photos) {
		display: grid;
		grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
		gap: 1em;
		align-items: start;
	}
}

/*
 * J01 (docs/J01_Single_Article_Responsive_Layout.md) -- single-article Hero:
 * featured image + 開催概要/ショップ情報 box, stacked (image above summary) on
 * mobile, side by side on desktop. Every selector below is scoped under
 * .harajuku-single-hero/.harajuku-single-home-button/.harajuku-source-details
 * -- no bare element selector and no .wp-block-group/.is-layout-constrained
 * override, same discipline as .harajuku-visit-updates above (docs "14."
 * "必ず .harajuku-* のスコープ内で指定").
 *
 * J02 (docs/J02_Single_Article_Wide_Layout_Gallery.md) reworks this same
 * Hero for a wider PC layout and adds .harajuku-single-main-image/
 * .harajuku-single-gallery (2枚目以降, moved out of the body's own
 * .hc-gallery) and .harajuku-single-title-wide (the post title) -- same
 * scoping discipline, `alignwide` (the theme's own class, not this
 * stylesheet's) is the only exception to "no .is-layout-constrained
 * override" since it targets the theme's existing wide-width mechanism
 * rather than fighting it.
 */

.harajuku-single-hero {
	box-sizing: border-box;
	display: grid;
	gap: 1em;
	width: 100%;
	margin: 0.5em auto 0;
}

/*
 * R01 (docs/R01_Article_Info_Page_Responsive_Redesign.md "3."/"24."): the
 * article is now capped at ~1160px (R01's recommended 1100-1200px range)
 * instead of riding the theme's own wide-size (1340px, J02's original
 * choice) -- the single biggest cause of "PCの広い画面で写真が大きくなりすぎる"
 * (R01 "0.") was this Hero filling the full 1340px wide-size while giving the
 * photo column the *larger* share of it (see the grid-template-columns rule
 * below). `.harajuku-single-hero`/`.harajuku-single-title-wide`/
 * `.harajuku-single-share` all also carry the theme's own `alignwide` class
 * (see each element's own render function), and the theme's
 * `.is-layout-constrained > .alignwide { max-width: var(--wide-size) }` rule
 * has the same two-class specificity as a bare `.harajuku-single-hero`
 * selector alone would -- unlike before (where both sides agreed on 1340px
 * and it didn't matter who won), this override only takes effect if it
 * actually wins that specificity tie, which depends on stylesheet print
 * order -- and this codebase already has one documented case
 * (`.harajuku-card--future`'s background-color, 1.30.1) where an
 * equal-specificity plugin rule silently lost to another stylesheet printed
 * later, with no visible error. Since there's no way to live-verify cascade
 * order for this session, `!important` is used here directly rather than
 * risk the whole R01 redesign's core "余白を作ってアイキャッチを縮小する" goal
 * silently not applying (docs "22." "!importantの乱用禁止" -- this is a narrow,
 * one-purpose, well-justified exception, not blanket use).
 *
 * R04-Revised (docs/R04_Revised_Article_Page_900px_Layout_and_Related_
 * Filtering.md "0."-"2."): narrowed further, from 1160px to 900px, and this
 * is now the SAME common width every other single-article section (article
 * body/source-details/related-guides/related-articles, and `<article>`/
 * `.related-posts` themselves further down this file) uses -- doc "2."
 * deliberately replaces 1.66.0's "1160px outer frame, 900px sections inside
 * it" shape with one single width for the whole page. `!important` is kept
 * for the same cascade-safety reason as before, now against a 900px value.
 */
.harajuku-single-hero.alignwide,
.harajuku-single-title-wide.alignwide,
.harajuku-single-share.alignwide {
	max-width: 900px !important;
}

.harajuku-single-hero * {
	box-sizing: border-box;
}

/* J02 "9."/"10."/"11.": media column now stacks the uncropped main photo
 * above an optional 2-column gallery of the remaining photos, instead of a
 * single fixed-aspect-ratio cropped image. */
.harajuku-single-hero__media {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	width: 100%;
}

/* No crop, no fixed aspect-ratio -- docs "10.1" "元の比率をできる限り維持" /
 * "不自然なcropを避ける". The featured image is always the largest photo by
 * construction: it fills the full media-column width, while every gallery
 * photo below is at most half that width (2-column grid). */
.harajuku-single-main-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* J02 "9."/"10.2": 2枚目以降, a plain 2-column grid at both mobile and
 * desktop widths (docs "4.1"/"4.2"/"19." all show the same 2-column photo
 * grid regardless of viewport) -- a lone 2nd photo naturally occupies only
 * the grid's first cell (half width), already smaller than the full-width
 * main photo above it, so no extra `:only-child` rule is needed the way
 * .harajuku-visit-update__photos above needs one for its own "1枚なら全幅"
 * requirement (a deliberately different rule from this gallery's own "2枚目
 * はメイン写真より小さく", docs "9." "2枚"). No `object-fit: cover` (docs
 * "10.2" "強制は今回避ける" -- avoids cropping venue maps/posters/signage
 * photos that may be mixed into a gallery).
 */
.harajuku-single-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5em;
}

.harajuku-single-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* .harajuku-event-summary already carries its own margin (1em auto 1.5em)
 * for its previous "alone, directly in $content" position; inside the Hero
 * grid it just fills its own column, so that outer margin is zeroed here. */
.harajuku-single-hero__summary .harajuku-event-summary {
	margin: 0;
}

/*
 * R04-Revised (docs/R04_Revised_Article_Page_900px_Layout_and_Related_
 * Filtering.md "3."/"5."): mobile stacking order across all THREE Hero
 * children (media/body/summary -- R01 only ever had two, media/summary).
 * Decision (no explicit doc instruction beyond "情報優先を基本に...調査して決定"):
 * 開催概要 (critical status/period/time facts) first, then the photo, then the
 * full article body text last -- the same "info before photo" priority R01
 * already established, extended to put the free-text body (least
 * time-critical of the three) at the very end rather than between the other
 * two. DOM source order stays media -> body -> summary (unchanged from
 * harajuku_today_render_single_hero_html()'s own concatenation order, doc
 * "3."'s required body-before-summary shape) -- this is purely a visual
 * reorder via `order`, reset back to 0 on all three at the desktop
 * breakpoint below, where `grid-template-areas` (not `order`) places them.
 */
.harajuku-single-hero__summary {
	order: -2;
}

.harajuku-single-hero__media {
	order: -1;
}

.harajuku-single-hero__body {
	order: 0;
}

/* Desktop: photo on the left spanning both rows, article body above 開催概要
 * on the right -- doc "1."/"3."/"4."
 *
 * R01 "3."/"4." originally set this breakpoint/ratio for a 2-item (media/
 * summary) grid; R04-Revised keeps the same 900px breakpoint value (docs
 * "既存Q09等の900pxブレークポイントとの整合を優先") but switches to `grid-template-
 * areas` now that there are three children needing 2 rows only in the right
 * column, and narrows the photo column further (from ~43% to ~41%, doc "4."'s
 * "画像40〜42% / 右カラム58〜60%" range) to compensate for the Hero's own outer
 * cap dropping from 1160px to 900px above -- without this the photo would
 * render even smaller than doc "4." intends at typical desktop widths.
 * `grid-template-areas` positions media/body/summary directly (no extra DOM
 * wrapper around body+summary, unlike doc "3."'s own suggested `__right`
 * div) -- doc "3." only asks for the visual shape (photo left, body-over-
 * summary right), and areas achieve that with 3 flat grid-item children,
 * which is also what keeps the mobile 3-way reorder above simple.
 */
@media (min-width: 900px) {
	.harajuku-single-hero {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 1.45fr);
		grid-template-areas: "media body" "media summary";
		align-items: start;
	}

	.harajuku-single-hero__media {
		grid-area: media;
		order: 0;
	}

	.harajuku-single-hero__body {
		grid-area: body;
		order: 0;
	}

	.harajuku-single-hero__summary {
		grid-area: summary;
		order: 0;
	}
}

/*
 * J02 (docs/J02_Single_Article_Wide_Layout_Gallery.md "5.1"): wraps the
 * title (+ home button) so it shares the Hero's own `alignwide` width --
 * see harajuku_today_widen_post_title_on_single()'s own docblock.
 *
 * J04-1 (docs/J04-1_Share_Alignment_and_Title_Margin.md): live production
 * devtools probe (1440px, getBoundingClientRect) found this element's real
 * parent -- the theme's own Entry Header `wp-block-group` wrapping the
 * `core/post-title` block -- carries an inline `padding-left:0px;
 * padding-right:0px` (the theme author zeroed it in the site editor), unlike
 * the Hero/gallery's parent (`.entry-content`, the Post Content block), which
 * keeps the theme's real `has-global-padding` inset
 * (`--wp--style--root--padding-left/right`, live-measured `clamp(30px, 5vw,
 * 50px)`). Both parents share the same outer (viewport-relative) box at every
 * width -- confirmed via `getBoundingClientRect()` on both -- so relying on
 * `.is-layout-constrained > .alignwide` alone (max-width only, no
 * margin-inline centering in this theme's own rule) left this element filling
 * that *whole* outer box edge-to-edge, landing measurably left of the Hero's
 * own (padding-inset) left edge -- docs "16." "タイトルは...Hero左端を...揃え
 * る". Replicating the Hero parent's own missing inset directly on this
 * element (rather than fighting the theme's zeroed-out parent padding) via
 * the *same* live root-padding custom property closes the gap at any
 * viewport width without a hardcoded pixel guess: subtracting it from `width`
 * reproduces `.entry-content`'s content-box size, and the existing
 * `max-width`/`margin-inline:auto` pair then centers it exactly like Hero's
 * own rule below -- verified equal to Hero's `left`/`right` (0px diff) at
 * 1440px on the live production page, both under and at the 1340px cap.
 */
.harajuku-single-title-wide {
	box-sizing: border-box;
	width: calc(100% - (var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)));
	/* R01: max-width moved to the `.harajuku-single-title-wide.alignwide`
	 * compound rule next to `.harajuku-single-hero` above -- same 900px cap
	 * (R04-Revised; originally 1160px), same specificity-matching reason. */
	margin-left: auto;
	margin-right: auto;
}

/*
 * J01 "7.": large, easy-to-find home button above the article title -- a
 * plain CSS circle around a "←" character, no external image/SVG. Mobile
 * (below J03's 768px breakpoint) keeps J01's original normal-flow placement
 * (no `position: fixed`, per the doc's explicit concern about hiding the
 * mobile browser UI/body text); desktop switches to `position: fixed` in the
 * `@media (min-width: 768px)` block further down (docs/J03_Single_Post_
 * Scope_Fix_and_Spacing.md "10."/"11.") so the button stays reachable while
 * scrolling a long article, now that the J03 scope fix guarantees this class
 * only ever renders once, on the actual single post being viewed.
 */
.harajuku-single-home-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	/* J03 (docs/J03_Single_Post_Scope_Fix_and_Spacing.md "8."): margin-bottom
	 * dropped to 0 (was J02's 0.4em, itself already halved from J01's
	 * 0.75em) -- the button-to-title gap is now entirely the theme's own H1
	 * margin-top (~21px), down from the previous ~31px combined total. The
	 * larger gap above the button, between it and the theme's own site
	 * header, still comes from the active theme's own block spacing on the
	 * `.wp-block-group.has-global-padding` ancestor wrapping the title --
	 * out of reach without a bare `.wp-block-group` selector, which docs
	 * "26." forbids. */
	margin: 0;
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 50%;
	font-size: 1.2em;
	line-height: 1;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.harajuku-single-home-button:hover {
	background: rgba(0, 0, 0, 0.05);
}

.harajuku-single-home-button:active {
	background: rgba(0, 0, 0, 0.1);
}

.harajuku-single-home-button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/*
 * J03 (docs/J03_Single_Post_Scope_Fix_and_Spacing.md "10."/"11."): desktop
 * only -- keeps the home button pinned near the top-left of the viewport
 * while scrolling a long article, instead of scrolling away with the title
 * after a couple hundred pixels (a `position: sticky` on the button's own
 * ~110px-tall containing block, `.harajuku-single-title-wide`, was measured
 * live and ruled out for exactly this reason -- confirmed no other ancestor
 * up to <html> sets overflow/transform/filter/contain/perspective/
 * will-change, so `position: fixed` here is unobstructed). `top` clears the
 * theme's own site header (measured live at 30px tall for a logged-out
 * visitor, no admin bar); a solid background-color is added above so article
 * text scrolling underneath doesn't show through the circle. Mobile is left
 * at J01's normal-flow placement -- doc "10."/"11.2": fixed is a PC-only
 * concern here, unlike the flat "never use position: fixed" J01 originally
 * ruled for all viewports.
 */
@media (min-width: 768px) {
	.harajuku-single-home-button {
		position: fixed;
		top: 44px;
		left: 16px;
		z-index: 100;
		background-color: var(--wp--preset--color--base, #fff);
	}
}

/*
 * J01 "11.": 情報源・確認情報 -- a collapsed <details> near the bottom of the
 * article instead of occupying the top of the body (docs "本文の先頭付近を
 * 占有しない"). Standard details/summary element, no JavaScript.
 *
 * R04-Revised (docs/R04_Revised_Article_Page_900px_Layout_and_Related_
 * Filtering.md "10."): supersedes 1.66.0's flush-left (`margin: 0`) change --
 * centered (`auto`) again at the common 900px width every single-article
 * section now shares (doc "2.").
 */
.harajuku-source-details {
	box-sizing: border-box;
	width: 100%;
	/* J04 (docs/J04_Share_Lightbox_Content_Width.md "14."): widened from the
	 * theme's own (narrow, ~645px) content-size var to match
	 * .harajuku-single-article-body's own 900px -- "本文より極端に狭くならない
	 * ようにする...第一候補は本文と同程度" (this fold's own content is usually
	 * short, so the doc's "本文と同じ900px" option, not 見てきた's 1100px). */
	max-width: 900px;
	margin: 1.5em auto 0;
	padding: 0.75em 1em;
	background: rgba(127, 127, 127, 0.06);
	border: 1px solid rgba(127, 127, 127, 0.25);
	border-radius: 6px;
	font-size: 0.9em;
}

.harajuku-source-details * {
	box-sizing: border-box;
}

.harajuku-source-details summary {
	cursor: pointer;
	font-weight: bold;
}

.harajuku-source-details__body {
	margin-top: 0.75em;
	overflow-wrap: break-word;
	word-break: break-word;
}

.harajuku-source-details__verified {
	margin: 0 0 0.5em;
	opacity: 0.85;
}

/*
 * J04 (docs/J04_Share_Lightbox_Content_Width.md) -- SNS share moved under the
 * title (.harajuku-single-share), the article body's own reading-width
 * wrapper (.harajuku-single-article-body), and the click-to-enlarge cursor
 * for the Hero's main/gallery photos (.harajuku-single-photo-link, the
 * overlay itself reuses .harajuku-visit-update__lightbox/-img above
 * unchanged -- see harajuku_today_render_lightbox_overlay()'s own docblock).
 * Same scoping discipline as every other section in this file (docs "20.":
 * no bare element selector, no .wp-block-group/.is-layout-constrained
 * override, alignwide is the theme's own class, not this stylesheet's).
 */

/* Sibling to .harajuku-single-title-wide (docs "3.2": right-aligned, "タイト
 * ル直下"), not nested inside it, so its width isn't coupled to the title's
 * own. Same alignwide-with-defensive-fallback shape as .harajuku-single-hero
 * above -- the theme's own `.is-layout-constrained > .alignwide` rule
 * supplies the real max-width/centering whenever it applies; this is only a
 * fallback for a context where it has no effect. The inner
 * `.harajuku-share.harajuku-share--compact` block (unchanged, reused as-is)
 * already handles right-alignment and mobile wrapping.
 *
 * J04-1 (docs/J04-1_Share_Alignment_and_Title_Margin.md): this wrapper sits
 * in the exact same theme Entry Header parent as .harajuku-single-title-wide
 * above -- same live-probed root cause (that parent's inline
 * `padding-left/right:0px`, no `margin-inline:auto` from the theme's own
 * alignwide rule either) and the same `width: calc(...)` fix, replicating the
 * Hero parent's (`.entry-content`) real inset via the live
 * `--wp--style--root--padding-left/right` custom property instead of a
 * hardcoded pixel guess. Without this, this wrapper's own right edge landed
 * ~50px right of Hero's -- a smaller, easy-to-miss gap next to the *other*
 * bug this same live probe caught: the reused `.harajuku-share` inner div
 * (still carrying its own narrower ~645px max-width, no auto margin, from its
 * old position as a direct .is-layout-constrained child) was rendering as a
 * plain block filling up to that 645px cap flush against this wrapper's LEFT
 * edge, not shrinking to its icon-row content width the way a flex item
 * would -- because `display: flex` was missing from *this* wrapper in the
 * actually-deployed production CSS (docs "3." "前回は...確認した" turned out to
 * describe a local-only edit that had never shipped), so the child was never
 * actually a flex item in the first place. That combination -- a ~645px-wide
 * box flush against this wrapper's own left edge, itself already sitting at
 * the *un-fixed*, too-far-left position -- is what put the visible icons
 * "中央付近" (docs "2.1") instead of merely ~50px off. Both the `display:
 * flex` (now genuinely present below) and the `width: calc(...)` fix
 * (matching the title's own) were confirmed together via a live production
 * getBoundingClientRect() probe (temporary injected <style>, reverted before
 * editing this file): at 1440px, COPY's own right edge landed 0px off Hero's
 * right edge, and the same held at the 1340px cap. */
.harajuku-single-share {
	box-sizing: border-box;
	width: calc(100% - (var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)));
	/* R01: max-width moved to the `.harajuku-single-share.alignwide` compound
	 * rule next to `.harajuku-single-hero` above -- same 900px cap
	 * (R04-Revised; originally 1160px), same specificity-matching reason. */
	margin: 0.5em auto 0;
	display: flex;
	justify-content: flex-end;
}

/* J07 (docs/J07_Title_to_Share_Spacing_Investigation.md): live getBoundingClientRect()
 * probe on harajuku.fun found ~43px between the title's bottom edge and the
 * visible share icons (PC), only ~21px of which is the title's own -- unset,
 * still-UA-default -- `margin-block-end: 0.67em`. The other ~22px turned out
 * to be `.harajuku-share`'s own `margin-top: 1em` (line ~728 above, a leftover
 * from before J04 moved this element under the title): that rule predates
 * this wrapper's `display: flex` and used to sit in normal flow, where an
 * adjacent block's top margin collapses with the sibling above it -- it no
 * longer does, since a flex item's margin never collapses with anything, so
 * that 1em started adding on top of the title's own margin instead of being
 * absorbed by it. `.harajuku-share`'s `margin-bottom: 1.5em` (the space to
 * Hero below) is deliberately left untouched -- doc "6."/"8." only flagged
 * the title-to-share gap as too large, and shrinking the share-to-Hero gap
 * too was called out as a likely-unwanted side effect to avoid. */
.harajuku-single-share .harajuku-share {
	margin-top: 0;
}

/* J04 "9."/"10.": the free-text description remaining in $content after the
 * 開催概要/gallery/hc-overview pieces are all extracted -- narrower than the
 * Hero/title's alignwide measure (docs "10.": "1340px全幅にはしない") but
 * clearly wider than the theme's own ~645px content-size (docs "645pxより明
 * 確に広い"), for readable Japanese body-text line length.
 *
 * R04-Revised (docs/R04_Revised_Article_Page_900px_Layout_and_Related_
 * Filtering.md "3."): this div now normally renders INSIDE the Hero's own
 * `.harajuku-single-hero__body` right-column cell (see that class further
 * up), where its own max-width/margin below are no-ops (the parent cell is
 * already narrower than 900px) -- they only still matter for the fallback
 * case where the Hero itself doesn't render at all (harajuku_today_inject_
 * event_summary()'s own `$article_body_html` variable), where this class
 * still needs to stand alone, centered, at the common 900px width (doc "2.",
 * supersedes 1.66.0's flush-left `margin: 0`). */
.harajuku-single-article-body {
	box-sizing: border-box;
	width: 100%;
	max-width: 900px;
	margin: 1.5em auto;
}

.harajuku-single-article-body * {
	box-sizing: border-box;
}

/* J04 "7.": layered onto the reused `.harajuku-visit-update__photo-link`
 * class (docs "16.") so only the Hero's main/gallery photos get the
 * click-to-enlarge affordance -- the already-shipped 見てきた thumbnails keep
 * their own (default `<a>`) cursor untouched. A faint opacity fade on hover
 * only -- no scale/transform (docs "7." "過剰なscale animationは禁止"). */
.harajuku-single-photo-link {
	cursor: zoom-in;
	transition: opacity 0.15s ease;
}

.harajuku-single-photo-link:hover {
	opacity: 0.85;
}

/* ============================================================================
 * R02 (docs/R02_Article_Header_Meta_Cleanup.md): single-article header/meta
 * cleanup -- new "独自メタ行" (status/見てきた badges + 最終確認), and hiding the
 * classic theme's own author/投稿日/コメント数 row on managed articles only.
 * ============================================================================ */

/* docs/R02_Investigation.md "8.": `article.post > .entry-meta.align-self-
 * center` reaches only the single post's OWN copy of this exact theme markup
 * -- the identical markup Related Story cards, the two category archives, and
 * the front page's own cards all render is always nested one level deeper,
 * inside `<figcaption class="post-content">`, so this `>` child combinator
 * structurally cannot match any of them (verified against production HTML for
 * both an event and a shop article, plus the shop archive and the front
 * page). `body.harajuku-managed-article` (harajuku_today_add_single_managed_
 * article_body_class()) additionally scopes this to only this plugin's own
 * managed posts (harajuku_item_id > 0) -- an ordinary blog post or 原宿ガイド
 * post viewed on its own single page keeps its classic 著者/投稿日/コメント数
 * row untouched. The bare `.entry-meta` (no "align-self-center", the カテゴ
 * リー badge) is deliberately NOT included here -- docs "12." keeps that
 * visible as the header's own top line. A bare `.entry-meta { display: none;
 * }` selector is explicitly forbidden by the doc ("7."); this is not that. */
body.harajuku-managed-article article.post > .entry-meta.align-self-center {
	display: none;
}

/* The new meta row itself -- at most 2 short lines, no card-like box (docs
 * "14." "大きなカード状にしない"). The actual status/見てきた badge coloring
 * comes from the existing `.harajuku-event-card-status`/`.harajuku-shop-card-
 * status`/`--visit` rules above (docs "14." "状態バッジ=既存色"); only this
 * row's own flex-wrap layout and the 最終確認 line are new. */
.harajuku-single-meta {
	margin: 0 0 1em;
}

.harajuku-single-meta__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.4em;
	row-gap: 0.3em;
}

/*
 * R04-Revised (docs/R04_Revised_Article_Page_900px_Layout_and_Related_
 * Filtering.md "7."): now a `<span>` inside `.harajuku-single-meta__badges`
 * itself (was a separate block-level div below it) so it shares the same
 * flex row as the status/見てきた badges -- "[本日最終日] [見てきた 9/5確認]
 * 最終確認 9/1" on one line, wrapping onto its own line via the row's existing
 * `flex-wrap: wrap` only when the row is too narrow. `margin-left: auto`
 * pushes it to the row's right edge whenever there IS spare width, matching
 * doc "7."'s own mockup; it simply has no effect once the row wraps.
 */
.harajuku-single-meta__verified {
	margin-left: auto;
	font-size: 0.85em;
	opacity: 0.75;
}

/* ============================================================================
 * J05: Related posts photo-background cards
 * (docs/J05_Related_Posts_Image_Cards_and_Exclude_Current.md). Applies only to
 * `<li class="wp-block-post ... harajuku-related-card">` -- a class this
 * plugin only ever adds via harajuku_today_add_related_card_media_to_li_tag()
 * in harajuku-today-event-data.php, itself gated to the one Query Loop
 * carrying `harajuku-related-posts` on a single post page (docs "3."/"14.").
 * Deliberately limited to background image / overlay / title / date / card
 * inner layout only (docs "11."): grid column count (PC 4 / mobile 2, docs
 * "2."/"10.") is left completely untouched here -- PC's 4 columns come from
 * the Site Editor's own Query Loop layout setting, and mobile's 2 columns
 * from the site's own global "追加CSS" already shown in docs "2." -- so this
 * section never declares `display: grid` / `grid-template-columns` at all.
 *
 * J05-2 (docs/J05-2_Related_Cards_Bottom_Title_and_Stronger_Gradient.md "4."):
 * a live check found the title sitting higher than intended once the site's
 * own Post Date block was removed from the Post Template (done by the user
 * directly in the Site Editor, not by this plugin -- docs "2."/"7.": no
 * removal logic is added here). The title is now pinned to the card's own
 * bottom edge with `position: absolute` on the title element itself, rather
 * than relying on `.harajuku-related-card`'s own flex layout to push a lone
 * remaining flex child down -- immune to whatever other blocks a future
 * Post Template edit does or doesn't leave behind. The gradient strengthening
 * itself lives in harajuku-today-event-data.php's own `$gradient` string
 * (harajuku_today_add_related_card_media_to_li_tag()), not here.
 * ============================================================================
 */

.harajuku-related-card {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	box-sizing: border-box;
}

.harajuku-related-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: inherit;
	pointer-events: none;
}

/* docs "5."/"9." + J05-2 "4.": white, bold, 2-3 lines with line-clamp,
 * pinned flush to the card's own bottom edge regardless of the Post
 * Template's other content, above both the media layer (z-index 0) and the
 * invisible full-card overlay link (z-index 1, `.harajuku-card__overlay-link`
 * above) -- the same z-index: 2 tier `.harajuku-card a:not(.harajuku-card__
 * overlay-link)` already raises every other card's real links to. */
.harajuku-related-card .wp-block-post-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 12px;
	box-sizing: border-box;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.harajuku-related-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* docs "5.": small, semi-transparent white -- kept rather than hidden, but
 * de-emphasized relative to the title. */
.harajuku-related-card .wp-block-post-date {
	position: relative;
	z-index: 2;
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.75rem;
}

/* ============================================================================
 * R03B (docs/R03B_Related_Story_Compact_and_Guide_Links.md): 関連ガイド section
 * + Related Story compaction. Entirely independent of the `.harajuku-related-
 * card`/`.wp-block-post-*` rules just above -- those target a Gutenberg
 * Query Loop (`.wp-block-post-template.harajuku-related-posts`) that only
 * exists on a Site Editor block theme; docs/R03B_Investigation.md "1."/"2."
 * confirmed the live single-post template's own "Related Story" block at the
 * bottom of every article is classic theme output instead (plain `.row`/
 * `.col-lg-4 col-md-12 col-sm-12` Bootstrap markup, `<article class="post
 * grid-view-news-area">`, no `wp-block-*` class anywhere), scoped below by
 * its own `.related-posts` wrapper class instead.
 * ============================================================================ */

/* IMPORTANT LIMITATION (docs/R03B_Investigation.md "12."/"19.", confirmed
 * with the user in chat on 2026-09-08 before implementing): this plugin has
 * no safe way to reach the theme's own Related Story query on production (no
 * block hook fires, and there is no access to the theme's PHP source to look
 * for a plain `pre_get_posts`-reachable WP_Query). The theme still queries
 * and server-renders every one of its own Related Story posts (10 observed in
 * production for both an event and a shop article) -- this rule only hides
 * whatever is past the 4th card from view. It does NOT reduce the actual
 * query cost, and it cannot apply the doc's own priority ordering (today/
 * upcoming first, etc., doc "4.") -- the 4 cards left visible are simply
 * whichever 4 the theme's own (unobserved) ordering already put first. If a
 * safe way to control the underlying query is ever found, replace this one
 * rule with the real limit instead of a 5th-card-onward hide. `:nth-child(n+6)`
 * assumes the row's own first child is always the "Related Story" heading's
 * `.col-12` wrapper (verified against production HTML for both an event and
 * a shop article) -- child 2 is the 1st card, so child 6 is the 5th. */
body.harajuku-managed-article .related-posts > div:nth-child(n+6) {
	display: none !important;
}

/* R03B-1 (docs/R03B-1_Related_Story_Grid_Bug_Investigation_and_Fix.md):
 * fixes a production regression where Related Story rendered as a giant,
 * near-1-column list instead of the intended 4-column grid. Root cause
 * (confirmed by fetching the live theme's own bootstrap.css/style.css, not
 * guessed): the theme's `.row` (Bootstrap 5, also present on this same
 * element alongside `.related-posts`) sets `display: flex;`, which has the
 * SAME specificity (one class) as this stylesheet's original bare
 * `.related-posts { display: grid; }` -- and since bootstrap.css loads AFTER
 * this plugin's stylesheet in <head> (confirmed via the live page's own
 * <link> order: harajuku-event-data.css is enqueued 2nd, bootstrap.css 3rd,
 * with no explicit dependency between them), the tie was broken by source
 * order in Bootstrap's favor. `.related-posts` stayed `display: flex` (a
 * `.row`), while this stylesheet's OWN `max-width: none;`/`flex: none;`
 * reset on the column `<div>`s -- correctly winning on specificity alone
 * against Bootstrap's `.col-lg-4`/`.row > *` (each a single class or
 * class+universal-selector, both lower specificity than this stylesheet's
 * original `.related-posts > div`) -- then stripped away Bootstrap's own
 * `max-width: 100%`/`33.333%` containment too, so each flex item was free to
 * grow to its own content's natural (often full original photo resolution)
 * width under `flex-wrap: wrap`, which is exactly the "ほぼ1列・写真巨大化"
 * symptom reported.
 *
 * Fix: every selector below is now scoped under `body.harajuku-managed-
 * article` (docs "12."), raising specificity above any bare `.row`/`.col-*`/
 * `.row > *` Bootstrap selector (each confirmed, by directly reading
 * bootstrap.css, to carry no `!important` and no higher-specificity variant)
 * regardless of load order -- `!important` is added on top (docs "18.": local
 * use permitted when justified) as defense against any other, unverified CSS
 * (Customizer "追加CSS", a caching/minify plugin's own concatenation reorder,
 * a future theme update) that might reintroduce the same kind of tie. Also
 * resets `.related-posts` itself off of `.row`'s own negative gutter margins
 * (`margin: 0 -0.75rem` in Bootstrap 5's `--bs-gutter-x: 1.5rem` default) and
 * adds `min-width: 0` (docs "9.") so a grid item's content (a long title, an
 * un-shrunk image) can never push its own track wider than the grid intends. */
body.harajuku-managed-article .related-posts {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 16px 12px;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

body.harajuku-managed-article .related-posts > div {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	flex: none !important;
	padding: 0 !important;
	margin-top: 0 !important;
}

body.harajuku-managed-article .related-posts > div:first-child {
	grid-column: 1 / -1;
}

body.harajuku-managed-article .related-posts article,
body.harajuku-managed-article .related-posts .post-content,
body.harajuku-managed-article .related-posts .entry-header {
	min-width: 0;
}

@media (max-width: 900px) {
	body.harajuku-managed-article .related-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	body.harajuku-managed-article .related-posts {
		grid-template-columns: 1fr !important;
	}
}

/* Card content trimming (docs "6."): no long excerpt, no author/comment/
 * Gravatar. Only the WordPress post date (`.posted-on`) is kept as the
 * closest safe stand-in for "状態または期間" -- a real event-status badge
 * would need a plugin hook into the card's own rendering, which docs/R03B_
 * Investigation.md "12." found doesn't exist here (same limitation as the
 * card count above). The カテゴリー badge (`.entry-meta` without "align-self-
 * center") is left alone -- doc "6." allows a small category label. */
body.harajuku-managed-article .related-posts .entry-content {
	display: none;
}

body.harajuku-managed-article .related-posts .entry-meta.align-self-center .author,
body.harajuku-managed-article .related-posts .entry-meta.align-self-center .comment-links {
	display: none;
}

/* Small, uniform card image (docs "7."): fixed aspect ratio + object-fit:
 * cover, never scaling up to compete with the article's own Hero photo. */
body.harajuku-managed-article .related-posts figure.post-thumbnail {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

body.harajuku-managed-article .related-posts figure.post-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.harajuku-managed-article .related-posts figcaption.post-content {
	padding: 8px 4px 4px;
}

/* docs "25.": title kept to at most 3 lines. */
body.harajuku-managed-article .related-posts .entry-title {
	min-width: 0;
	margin: 0.3em 0 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	font-size: 0.95em;
	line-height: 1.4;
}

/* Heading text (docs "9."): the theme's own "Related Story" text is hardcoded
 * classic-template output with no filterable hook (the same class of problem
 * as the H1/H2 title tag, docs/R02_Investigation.md "12.") -- overridden
 * visually via CSS generated content rather than an output-buffer/regex
 * rewrite of the theme's own template, keeping with this project's "テーマ本
 * 体編集はしない" rule. Deliberately the neutral "関連記事" here, NOT "おすすめ
 * 記事" -- per the user's own decision (chat, 2026-09-08): since the theme's
 * own post ordering can't be curated (see the count-limiting rule above),
 * "おすすめ" (a curated recommendation) would overstate what this actually is.
 *
 * R03B-3 (docs/R03B-3_Related_Story_Heading_Cleanup.md): the above only ever
 * zeroed `.f-heading`'s own font-size/line-height, leaving two theme rules
 * (confirmed by fetching the live theme's own CSS, not guessed) untouched: a
 * "flag ribbon" style, `.news-section-title.five h5 { background-color:
 * #1b8415 }` (the active child theme's green accent color; the parent theme
 * ships the same rule in blue) painting a small colored box via `h5.f-
 * heading`'s own fixed-rem `padding` (unaffected by `font-size: 0`) -- the
 * "green bar" the user reported in production -- and `.news-section-title
 * .f-heading:before { position: absolute; right: -15px; width: 0; height: 0;
 * ... }` (a decorative arrow originally meant to poke out from the ribbon),
 * which our own `content: "関連記事"` replacement above inherited verbatim,
 * so it rendered white-on-white and clipped by `.news-section-title`'s own
 * `overflow: hidden` -- i.e. the "関連記事" text was never actually visible.
 * Every contested property is now reset explicitly rather than relying on
 * font-size alone; `!important` only on the ones a same-specificity theme
 * rule could otherwise still win (background-color/position/width/height),
 * the same defense-in-depth pattern R03B-1 used for the grid fix above.
 *
 * R03B-4 (docs/R03B-4_Related_Story_Heading_Clip_Fix.md): R03B-3 reset
 * `position`/`width`/`height`/`border` on the theme's decorative-arrow
 * `::before` above but missed `transform` -- the theme's own centering trick
 * (`position: absolute; top: 50%; transform: translateY(-50%);`, meant to
 * vertically center a 0-size triangle) left `transform: translateY(-50%)`
 * in effect regardless of `position`, so the "関連記事" text still shifted
 * up by half its own rendered height and got clipped by `.news-section-
 * title`'s `overflow: hidden` -- confirmed live via `getComputedStyle()` on
 * production (`transform: matrix(1, 0, 0, 1, 0, -12.8795)`, exactly half of
 * the text's own 25.76px height) and visually verified by screenshotting a
 * temporary `transform: none` override, not guessed. Also drops `.f-
 * heading`'s `line-height: 1` (computes to 0px against `font-size: 0`, per
 * doc "5." harmless today but not a value to keep) in favor of `normal`. */
body.harajuku-managed-article .related-posts .news-section-title {
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 0 0 8px;
	margin: 0 0 10px;
}

body.harajuku-managed-article .related-posts .f-heading {
	background-color: transparent !important;
	color: inherit;
	text-transform: none;
	padding: 0;
	margin: 0;
	font-size: 0;
	line-height: normal;
}

body.harajuku-managed-article .related-posts .f-heading::before {
	content: "関連記事";
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	transform: none !important;
	display: block;
	font-size: 1.15rem;
	line-height: 1.4;
	font-weight: 700;
	color: inherit;
}

/* 関連ガイド section (docs "10."-"14.", "21."-"22."): deliberately reuses the
 * same accent color (`#b7791f`/`rgba(183, 121, 31, 0.35)`/`#fffaf0`) as the
 * existing front-page `.harajuku-guide-top-card*` (below) for "少しガイドら
 * しく" (doc "21.") -- a distinct-but-related look from both that wider single
 * card and the plain `.related-posts` cards just above.
 *
 * R03B-1 (docs/R03B-1_Related_Story_Grid_Bug_Investigation_and_Fix.md "10."/
 * "16."): this section is appended after $source_details_html, outside
 * `.harajuku-single-article-body`'s own 900px reading-width cap -- so with
 * only 1-2 guide posts ever in a 2-column grid, a single card had nothing
 * bounding it to a sane width and rendered far larger than intended (the
 * user's own screenshot: one guide card's image nearly as wide as the
 * article's own 1160px Hero). Capping this section itself to the same 900px
 * `.harajuku-single-article-body` uses restores a normal-looking card size
 * regardless of how many guide posts exist.
 *
 * R04-Revised (docs/R04_Revised_Article_Page_900px_Layout_and_Related_
 * Filtering.md "11."): supersedes 1.66.0's flush-left (`margin: 0`) change --
 * this section is centered (`auto`) again, matching the new common 900px
 * width every single-article section shares (doc "2."). The card's own
 * 720px cap is also removed below (doc "11.": "セクションwidth:900px、
 * カードwidth:100%") so a 1-card section fills the full 900px instead of
 * leaving a gap on the right. */
.harajuku-related-guides {
	max-width: 900px;
	margin: 1.5em auto;
}

.harajuku-related-guides__title {
	margin: 0 0 0.6em;
	font-size: 1.1em;
	font-weight: 700;
}

/* R03B-2 (docs/R03B-2_Related_Guide_Horizontal_Compact_Card.md): the previous
 * 2-column grid of column-flex ("image on top, text below") cards read as
 * large, near-square boxes on PC and shrank to an awkward half-width on
 * narrow screens (doc "0."). Changed to a single column of horizontal
 * (image-left, text-right) flex cards instead -- one card per row regardless
 * of count (doc "4."/"15."), each capped to 720px and left-aligned (doc
 * "3."/"14.") rather than stretched or centered. Related Story's own CSS
 * (above) is untouched (doc "18.").
 */
.harajuku-related-guides__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	justify-items: start;
}

.harajuku-related-guide-card {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: none;
	min-width: 0;
	min-height: 140px;
	overflow: hidden;
	border: 1px solid rgba(183, 121, 31, 0.35);
	border-radius: 12px;
	background: #fffaf0;
	color: inherit;
	text-decoration: none;
}

/* Image-optional (doc "20."): when the PHP renderer omits `__media` (no
 * thumbnail), there is simply no first flex item, so `__body` alone fills
 * the card via its own `flex: 1 1 auto` below -- no empty media box left
 * behind, no modifier class needed. */
.harajuku-related-guide-card__media {
	flex: 0 0 34%;
	max-width: 34%;
	min-width: 0;
	overflow: hidden;
	margin: 0;
}

.harajuku-related-guide-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.harajuku-related-guide-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px 14px;
}

.harajuku-related-guide-card__label {
	display: inline-block;
	align-self: flex-start;
	padding: 2px 8px;
	border-radius: 999px;
	background: #b7791f;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
}

.harajuku-related-guide-card__title {
	margin: 0.4em 0 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.4;
}

/* ============================================================================
 * R04 (docs/R04_Single_Article_Content_Alignment_and_Centering.md): single-
 * article content width/centering unification. Before this, `<article
 * class="post ...">` itself (the classic theme's own Bootstrap markup --
 * `section.single-news-area > .container-full > .row > .col-lg-12 >
 * article.post`, confirmed via a live production getBoundingClientRect()
 * probe) and the Related Story `.related-posts` grid (a sibling of
 * `<article>`, same `.col-lg-12` parent -- docs "0.") had NO max-width of
 * their own, so on a wide PC screen both simply filled `.container-full`'s
 * full (15px-padding-only, up to a 1600px cap) width -- live-measured 1301px
 * at a ~1346px viewport, versus the Hero/title's existing hardcoded 1160px
 * cap (R01, `.harajuku-single-hero.alignwide` above) and the article
 * body/details/guide's existing 900px cap. That ~140-400px gap between the
 * article's own outer edge and everything actually capped inside it is the
 * "でこぼこ" doc "0." describes: Hero/body/guide all centered neatly at their
 * own (narrower) widths, while the article's own left/right edges and the
 * full-bleed Related Story grid sat far outside that column.
 *
 * Fix: cap `<article>` itself and `.related-posts` to the SAME 1160px Hero
 * already uses, both centered via `margin: 0 auto`. Once `<article>`'s own
 * content-box is exactly 1160px, the Hero/title/share's own existing
 * `max-width: 1160px !important; margin: 0 auto;` (R01, unchanged) simply
 * never needs to shrink anything -- no double max-width narrowing (docs
 * "14."). Every other `<article>` child (`.entry-header`/`.entry-meta`/
 * `.entry-content`, all confirmed via the same live probe to sit flush
 * against `<article>`'s own edges already, no `max-width` of their own)
 * automatically inherits the new 1160px box for free, so category/title/meta
 * land flush with Hero's own left edge with no selector of their own needed.
 *
 * `<article>`'s own selector is deliberately the full structural chain above,
 * NOT a bare `article.post` (doc "7.": "実際にブラウザが認識しているclassを確認
 * してからセレクタを決定すること") -- the SAME `article.post` class (plus a
 * shared `.single-news-area` ancestor) is also present on every Related Story
 * CARD (confirmed live: 10 per article, class `"post grid-view-news-area"`,
 * nested `.related-posts > .col-lg-4 > article.post`, no intervening
 * `.col-lg-12`), so a bare `article.post` selector would also match those --
 * harmless in practice today (each card's own natural width already sits
 * well under 1160px, so the cap and centering are no-ops there) but not a
 * selector to rely on. The 4-level child-combinator chain matches exactly the
 * one `<article>` that is a *direct* child of the *specific* `.col-lg-12`
 * that is itself a direct child of `.single-news-area`'s own `.row` --
 * verified via `document.querySelectorAll(...).length === 1` on both a live
 * event article and a live shop article; Related Story cards, one level
 * deeper under a `.col-lg-4`, structurally cannot match.
 *
 * Below ~1190px viewport width (1160px + `.container-full`'s own 15px×2
 * padding), `max-width: 1160px` never actually constrains anything and
 * `margin: 0 auto` resolves to 0 -- i.e. this entire rule is a no-op at
 * tablet/mobile widths (doc "19."/"20."), so no separate mobile override and
 * no double-padding risk (doc "9."): the existing `.container-full`
 * padding (confirmed 15px, unchanged by this fix, live-verified to carry no
 * competing max-width for this template) continues to be the only inset at
 * those widths, same as before this change.
 *
 * R04-Revised (docs/R04_Revised_Article_Page_900px_Layout_and_Related_
 * Filtering.md "0."-"2."): both selectors below now cap at 900px, not 1160px
 * -- doc "2." replaces the previous "1160px outer frame, 900px sections
 * inside it" shape with one common 900px width for the whole page, so
 * `<article>`/`.related-posts` now match the same width Hero/body/source/
 * guide/related-articles all already use, instead of framing them.
 */
body.harajuku-managed-article section.single-news-area > .container-full > .row > .col-lg-12 > article.post {
	box-sizing: border-box;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* `.related-posts` (R03B-1 above) already resets Bootstrap's `.row` gutter
 * margin to a plain `margin: 0 !important` so its own CSS grid `gap` is the
 * only spacing -- this later, same-selector rule re-overrides just the
 * margin (also `!important`, so source order settles the tie in this rule's
 * favor) to center it at the same 900px as `<article>` above instead,
 * closing the "Related Storyだけ幅が違う" gap (doc "8.") without touching any
 * of R03B-1's grid/column/gutter fixes (`display: grid`, `grid-template-
 * columns`, the `> div` resets, the heading `grid-column: 1 / -1`) above.
 * Only relevant when the theme's own Related Story is actually still shown
 * (the rule right below this one hides it whenever the plugin's own 関連記事
 * section has cards of its own) -- this keeps the theme's block looking
 * correct as a fallback rather than assuming it's always hidden. */
body.harajuku-managed-article section.single-news-area > .container-full > .row > .col-lg-12 > .related-posts {
	max-width: 900px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/*
 * R04-Revised (docs "12."/"17."): hides the classic theme's own Related Story
 * block entirely, but ONLY on a managed article whose own 関連記事 section
 * (below) actually has at least one card -- `harajuku-has-related-articles`
 * is added to `<body>` by harajuku_today_add_related_articles_body_class()
 * exactly when that's true, so a post with zero eligible 関連記事 candidates
 * keeps showing the theme's own block (doc "17.": "非表示は独自関連記事が正常に
 * 出る場合のみ"). `!important` matches R03B-1's own `display: grid !important`
 * on the plain `body.harajuku-managed-article .related-posts` selector above
 * -- without it this rule's `display: none` (non-!important) would lose to
 * that earlier !important rule despite this selector's higher specificity,
 * since a non-!important declaration never beats an !important one
 * regardless of specificity.
 */
body.harajuku-managed-article.harajuku-has-related-articles .related-posts {
	display: none !important;
}

/*
 * R04-Revised (docs "18."): the new 関連記事 section itself -- up to 4 cards,
 * same 900px common width, PC 4-column / mobile 2-column grid (doc "18." "900
 * px内でPC4列"). Card style deliberately kept simple and independent of the
 * dormant J05 `.harajuku-related-card` photo-overlay renderer above (that
 * renderer's own docblock notes it never actually fires in production --
 * see harajuku_today_add_related_card_media_to_li_tag()'s docblock), rather
 * than depending on markup this stylesheet can't verify against a live page.
 */
.harajuku-related-articles {
	max-width: 900px;
	margin: 1.5em auto;
}

.harajuku-related-articles__title {
	margin: 0 0 0.6em;
	font-size: 1.1em;
	font-weight: 700;
}

.harajuku-related-articles__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 700px) {
	.harajuku-related-articles__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.harajuku-related-article-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgba(127, 127, 127, 0.25);
	border-radius: 10px;
	background: var(--wp--preset--color--base, #fff);
	color: inherit;
	text-decoration: none;
}

.harajuku-related-article-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.harajuku-related-article-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.harajuku-related-article-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.6em 0.7em 0.8em;
}

.harajuku-related-article-card__category {
	font-size: 0.75em;
	font-weight: 700;
	opacity: 0.7;
}

.harajuku-related-article-card__title {
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.4;
}

.harajuku-related-article-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.4em;
	row-gap: 0.2em;
	font-size: 0.8em;
}

.harajuku-related-article-card__period {
	opacity: 0.75;
}

.harajuku-related-article-card__retrospective {
	font-weight: 700;
	opacity: 0.75;
}

/* ============================================================================
 * 1.46.0 (docs/N04_ChangeLog.md, docs/K04_top_page_harajuku_guide_instruction.md):
 * front-page "原宿ガイド" horizontal card, output by the `[harajuku_guide_top_
 * card]` shortcode (harajuku-today-event-data.php) and placed manually via a
 * Shortcode block between the front page's event and shop Query Loops. Scoped
 * entirely under `.harajuku-guide-top-card` -- shares no selector with the
 * `.harajuku-card` event/shop listing cards above, by design (docs/K04
 * "イベントカードとは別デザインにする" -- distinct role, distinct look).
 *
 * 1.46.1 (chat request, no dedicated K-doc -- compaction follow-up): 1.46.0's
 * card scaled its eyecatch with the column width (`aspect-ratio: 4/3` inside
 * a 42%-wide column) and gave "原宿ガイドをもっと見る" its own bottom row --
 * together, on a typical ~600-700px content column, that made the card
 * roughly 250-300px tall. This revision fixed the eyecatch to an explicit,
 * non-scaling box (a small width percentage + a fixed pixel height,
 * `object-fit: cover` so the crop never distorts) instead of an
 * aspect-ratio, and moved the archive link into the header row.
 *
 * 1.46.2 (chat request, no dedicated K-doc -- second compaction follow-up):
 * 1.46.1 still read as noticeably taller than the 130-160px target live. Root
 * cause, found by re-reading this stylesheet line by line rather than
 * guessing: every spacing value here (padding/margin/gap) was in `em`, and
 * **no rule anywhere in this block set an explicit `line-height`** -- both
 * scale directly off whatever font-size/line-height the active theme's
 * global styles put on the block/paragraph elements this shortcode's plain
 * `<div>`/`<p>`/`<span>` markup inherits. A generous theme line-height (many
 * block themes ship ~1.6-1.7 for body copy) applied to the header's `<p
 * class="...lede">` alone can add several extra pixels of line-box height on
 * top of the `em`-sized `margin`/`gap` around it, and the same compounds
 * again in the content column (title/excerpt/cta) -- explaining a taller
 * render than the em arithmetic alone would predict, with no min-height or
 * aspect-ratio rule anywhere in this file to point to instead (confirmed: no
 * `min-height` was ever added to this block, and the aspect-ratio removed in
 * 1.46.1 stayed removed).
 *
 * Fix: every font-size below is now a fixed `px` value, and every text rule
 * gets its own explicit, tight `line-height` -- so the card's rendered
 * height no longer depends on the surrounding theme's typography at all.
 * The header row also switches to `flex-wrap: nowrap` at the desktop
 * breakpoint (`white-space: nowrap` + `text-overflow: ellipsis` on the lede
 * as a safety valve) so "原宿ガイド" / the lede / "もっと見る" render on one
 * line as intended, never wrapping into a second line that would otherwise
 * add a full extra line-height to the card. Budget at the 700px breakpoint:
 * 12px padding + ~17px header row + 8px gap + 100px image row + 12px padding
 * ≈ 149px, inside the requested 130-160px. Still not verified in a live
 * browser (none available in this environment) -- confirm the actual
 * rendered height after deploying and adjust the pixel values below if the
 * live theme's rendering differs from this estimate.
 *
 * 1.46.3 (chat request, no dedicated K-doc -- third compaction follow-up):
 * live on the actual site, 1.46.2's smaller text confirmed the CSS file
 * itself was updating and loading correctly, but the section's overall
 * height did not shrink -- meaning something sized independently of
 * font-size/line-height was still dominating the height, and the reporter's
 * own screenshot showed the eyecatch rendering much taller than the 100px
 * this file specifies. Two candidates were addressed defensively, since a
 * live inspector isn't available in this environment to confirm which one
 * (or both) applied:
 *
 * 1. **The theme's own global image rule.** Most block themes ship a
 *    same-origin `img { height: auto; max-width: 100%; }`-shaped rule for
 *    responsive images. This selector's specificity (0,0,1) is lower than
 *    `.harajuku-guide-top-card__media img`'s (0,1,1), so it should already
 *    lose the cascade -- but if the live theme's version of that rule is
 *    scoped more specifically than a bare `img` (e.g. nested under a
 *    layout-root class), it could still win. `width`/`height`/`object-fit`
 *    on the media box and its `<img>` are now `!important`, removing any
 *    dependency on guessing the theme's exact selector.
 * 2. **Spacing added at the block level**, exactly as the reporter suspected
 *    ("ブロックにパディングやマージンなどが設定されている可能性があります"):
 *    the Site Editor's Shortcode block (`.wp-block-shortcode`, WordPress
 *    core's own wrapper class for that block type) supports the block
 *    inspector's Advanced spacing controls, which write padding/margin
 *    directly as an inline `style` on that wrapper -- entirely outside this
 *    plugin's own `.harajuku-guide-top-card` div, so no rule scoped only to
 *    that div could ever have reset it. A `:has()`-scoped rule below zeroes
 *    `.wp-block-shortcode`'s margin/padding, but only when it actually wraps
 *    this specific card (never any other Shortcode block elsewhere on the
 *    site) -- browsers without `:has()` support simply skip this rule
 *    (graceful no-op), which is why it's listed defensively rather than
 *    relied on as the only fix.
 *
 * Every text/spacing value inside the card additionally gets a blanket
 * `margin: 0; padding: 0;` reset up front (undone selectively by the more
 * specific rules that follow it below in this same file), removing any
 * remaining possibility of a theme's global element-level style leaking in
 * through an element this plugin didn't already set an explicit value on.
 * Still not verified in a live browser -- if the section is still taller
 * than 130-160px after this, the next step is to inspect the live DOM
 * directly (browser DevTools -> the actual computed `height`/`margin`/
 * `padding` on `.harajuku-guide-top-card__media`, its `<img>`, and every
 * ancestor up to `.wp-block-shortcode`) rather than guessing further from
 * this environment.
 *
 * 1.46.4 (chat request, no dedicated K-doc -- confirmed live, height fixed):
 * 1.46.3's height fix worked (confirmed via a live screenshot). The very
 * small `px` font-sizes 1.46.2 introduced to make the height deterministic
 * (11-12.5px in several places) read as too small once seen live -- bumped
 * every text element up by 1-1.5px (label/more 11->12, lede 12->13, title
 * 14->15, excerpt 12.5->13, cta 12->13). Line-heights are unchanged, and the
 * image's fixed height still dominates the row, so this does not meaningfully
 * change the card's overall height.
 * ============================================================================ */

.harajuku-guide-top-card,
.harajuku-guide-top-card * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 1.46.3: the Site Editor's Shortcode block wrapper (`.wp-block-shortcode`,
 * WordPress core's own class) can carry its own padding/margin from the
 * block inspector's Advanced spacing controls -- entirely outside this
 * plugin's markup. Scoped with `:has()` so this never affects any other
 * Shortcode block on the site; browsers without `:has()` just skip it. */
.wp-block-shortcode:has(> .harajuku-guide-top-card) {
	margin: 0;
	padding: 0;
}

.harajuku-guide-top-card {
	margin: 12px 0 !important;
	padding: 12px 16px !important;
	border: 1px solid rgba(183, 121, 31, 0.35);
	border-radius: 12px;
	background: #fffaf0;
}

.harajuku-guide-top-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0 0 8px;
}

.harajuku-guide-top-card__label {
	display: inline-block;
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: #b7791f;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.harajuku-guide-top-card__lede {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: #6b5a3a;
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 1.46.1: pushed into the header row itself (was its own bottom row) --
 * `margin-left: auto` pins it to the row's right edge without needing a
 * separate flex container. */
.harajuku-guide-top-card__more {
	display: inline-block;
	flex-shrink: 0;
	margin-left: auto;
	color: #7a5411;
	font-size: 12px;
	line-height: 1.3;
	text-decoration: underline;
	white-space: nowrap;
}

.harajuku-guide-top-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

/* Only rendered when the post has a featured image (docs/K04 "0件の場合...
 * 空の枠を表示しない" -- the same "hide, don't reserve a blank box" rule also
 * applies at the per-field level here: no eyecatch, no empty media box).
 * Fixed pixel height (never aspect-ratio, never min-height) so the crop
 * stays compact regardless of column width or theme typography -- docs/K04
 * "画像がつぶれない" is satisfied by `object-fit: cover` on the <img>, not by
 * letting the box itself grow. */
/* 1.46.3: width/height/object-fit hardened to `!important` -- see this
 * block's own changelog note above ("the theme's own global image rule").
 * `max-height` pinned alongside `height` so a theme rule that only targets
 * `max-height` (some responsive-image resets do) can't stretch it either. */
.harajuku-guide-top-card__media {
	flex: 0 0 auto;
	width: 100% !important;
	height: 120px !important;
	max-height: 120px !important;
	overflow: hidden;
	border-radius: 8px;
	background: #f0e6d2;
}

.harajuku-guide-top-card__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center;
}

.harajuku-guide-top-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
}

.harajuku-guide-top-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: #2b2b2b;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.harajuku-guide-top-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: #555555;
	font-size: 13px;
	line-height: 1.4;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.harajuku-guide-top-card__cta {
	display: inline-block;
	color: #b7791f;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.harajuku-guide-top-card__body:hover .harajuku-guide-top-card__cta,
.harajuku-guide-top-card__body:focus-visible .harajuku-guide-top-card__cta {
	text-decoration: underline;
}

/* PC/タブレット: 画像左・テキスト右の横並び（docs/K04「PCでは横長」）。700px は
 * このカード単体の内部レイアウト専用の閾値で、イベント/ショップのグリッド列数
 * とは無関係。1.46.2: 画像を列幅に依存しない固定サイズ（幅200px・高さ100px、
 * いずれも依頼の180-220px/90-110pxの範囲内）に変更し、見出し行を強制的に
 * 1行（`flex-wrap: nowrap`）にして、行の折り返しによる余分な高さを排除。
 * 抜粋もPCでは1行クランプに縮小（依頼「抜粋はPCでは1行、最大でも2行」）。 */
@media (min-width: 700px) {
	.harajuku-guide-top-card__header {
		flex-wrap: nowrap;
	}

	.harajuku-guide-top-card__body {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	.harajuku-guide-top-card__media {
		width: 200px !important;
		height: 100px !important;
		max-height: 100px !important;
	}

	.harajuku-guide-top-card__content {
		flex: 1 1 auto;
	}

	.harajuku-guide-top-card__excerpt {
		-webkit-line-clamp: 1;
	}
}

/* ============================================================================
 * Q09 (docs/Q09_Top_Event_Shop_Sections_Implementation.md, 1.57.0): front-page
 * 今日のイベント (3-card) / ショップ情報 (4-card) sections that harajuku_today_
 * render_front_section_html() (harajuku-today-event-data.php) renders --
 * originally printed in place of the classic Irvine News main-loop grid via
 * a now-removed loop_end handler (THEME11), now called directly by the
 * Harajuku Today custom theme's own `front-page.php`. Deliberately its own
 * small component, not the `wp-block-post-*`/harajuku-card-prefixed classes
 * the event/shop archive rules above target -- P04/P05's own investigation
 * found that markup only ever exists inside an actual Gutenberg Query Loop
 * DOM, which the classic front page never rendered (see that PHP function's
 * own docblock). Reuses the already-unscoped
 * `.harajuku-event-card-meta`/`.harajuku-shop-card-meta` blocks above
 * unchanged for the status badge/hours/venue/fee rows.
 *
 * Grid: PC (>900px) is 3 columns (event) / 4 columns (shop) per docs "1."/
 * "5.", matching the same 900px/480px tablet/mobile breakpoints the existing
 * `.harajuku-today-event-query`/`.harajuku-today-shop-query` rules above
 * already use for the same 3-vs-4 column front-page sections, so both column
 * counts step down together (2 columns, then 1) at the same two breakpoints
 * project-wide rather than introducing a third, unrelated set of numbers.
 * Eyecatch ratio is unified to 3/2 (docs "5.", same ratio already proven on
 * the event/shop archive/final-day/past-info cards above) via `object-fit:
 * cover`, and omitted entirely (no host `<div>` at all) for a post with no
 * featured image, so a missing image never leaves a broken/empty gray box.
 */
.harajuku-front-sections,
.harajuku-front-sections * {
	box-sizing: border-box;
}

.harajuku-front-section {
	margin: 0 0 28px;
}

.harajuku-front-section:last-child {
	margin-bottom: 0;
}

.harajuku-front-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 12px;
	margin: 0 0 14px;
}

.harajuku-front-section__title {
	margin: 0;
	font-size: 1.25em;
	font-weight: 700;
}

.harajuku-front-section__more {
	flex-shrink: 0;
	font-size: 0.85em;
	white-space: nowrap;
}

/*
 * Q12 (docs/Q12_Today_Summary_Information_Freshness.md "7."): the Todayサマリー
 * bar shown once, directly above the 今日のイベント grid. Reuses the same
 * flex-wrap + "｜"-separator technique already proven by the pre-existing
 * .harajuku-today-summary bar above (docs/C07/C11) rather than inventing a
 * new responsive approach -- `flex-wrap: wrap` alone keeps it on one line on
 * desktop and lets it drop to 2-3 lines on narrow screens with no media
 * query and no horizontal scroll (doc "14."). `__updated` is a separate
 * block-level line below the row (not another flex item in the same row),
 * matching the doc's own mockup ("7.": 開催中/本日最終日/見てきた更新 on one
 * line, 最終更新 on the line below) -- this is the one structural difference
 * from .harajuku-today-summary, which instead treats its own __updated as a
 * 4th flex item in the same "｜"-separated row.
 */
.harajuku-today-freshness {
	box-sizing: border-box;
	margin: 0 0 20px;
	font-size: 0.9em;
}

.harajuku-today-freshness__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.5em;
	row-gap: 0.2em;
}

.harajuku-today-freshness__row > :not(:first-child)::before {
	content: "｜";
	margin-right: 0.5em;
	opacity: 0.55;
}

.harajuku-today-freshness__title {
	font-weight: 700;
}

.harajuku-today-freshness__stat {
	white-space: nowrap;
}

.harajuku-today-freshness__stat a {
	color: inherit;
}

.harajuku-today-freshness__updated {
	margin: 4px 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

.harajuku-front-section__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Q11 (docs/Q11_Event_Sparse_Day_Trust_Display.md): "少数日" notice shown
 * above the today_event grid when it has 1-2 live posts, or in place of the
 * grid entirely when it has 0 -- replaces the old behavior of silently
 * padding the section to a full 3-card row with an upcoming/常設 post.
 * Reuses the section header's own type scale/opacity rhythm (see
 * .harajuku-today-empty above) rather than introducing a new one; no grid
 * layout change was needed since a 1- or 2-item grid already keeps each
 * card at its normal 1/3-column width (see the doc's own "10." investigation
 * note) instead of stretching to fill the row.
 */
.harajuku-today-sparse {
	margin: 0 0 14px;
}

.harajuku-today-sparse__title {
	margin: 0 0 4px;
	font-weight: 700;
}

.harajuku-today-sparse__body {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.8;
}

.harajuku-front-section__grid--shop {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.harajuku-front-section__grid,
	.harajuku-front-section__grid--shop {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.harajuku-front-section__grid,
	.harajuku-front-section__grid--shop {
		grid-template-columns: 1fr;
	}
}

.harajuku-front-card {
	margin: 0;
	padding: 0;
}

/* The whole card is one clickable area (docs "5."), so no separate overlay
 * link is needed here, unlike the Query-Loop-rendered card class above.
 */
.harajuku-front-card__link {
	display: flex;
	height: 100%;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.harajuku-front-card__link:hover .harajuku-front-card__title,
.harajuku-front-card__link:focus-visible .harajuku-front-card__title {
	text-decoration: underline;
}

.harajuku-front-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 8px;
	background: #eeeeee;
}

.harajuku-front-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.harajuku-front-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 10px 2px 0;
}

.harajuku-front-card__title {
	display: -webkit-box;
	margin: 0 0 6px;
	overflow: hidden;
	color: #2b2b2b;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/*
 * HARAO09_FIX02 -- 店舗情報 panel (shop_master_v2.db-driven posts only, see
 * harajuku_today_render_shop_info_panel_html() in harajuku-today-event-data.php).
 * Same box chrome as .harajuku-event-summary above (background/border/
 * radius/max-width tokens), namespaced separately since the two are never on
 * the same post together.
 */
.harajuku-shop-info-panel {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 100%);
	margin: 1em auto 1.5em;
	padding: 1em 1.25em;
	background: rgba(127, 127, 127, 0.08);
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 6px;
}

.harajuku-shop-info-panel__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.75em;
	padding: 0.35em 0;
	border-top: 1px solid rgba(127, 127, 127, 0.18);
}

.harajuku-shop-info-panel__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.harajuku-shop-info-panel__label {
	flex: 0 0 auto;
	min-width: 5.5em;
	color: inherit;
	font-weight: 700;
	opacity: 0.75;
}

.harajuku-shop-info-panel__value {
	flex: 1 1 auto;
	word-break: break-word;
}

/*
 * HARAO10 (docs/active/HARAO10): /shops/ directory + /shops/{slug}/ detail
 * pages, the shared shop card, the front-page "最近確認したお店" teaser, and
 * the POP UP article backlink. Kept in this one existing stylesheet (already
 * enqueued on every page these appear on -- see harajuku_today_enqueue_
 * event_summary_style()'s HARAO10 note) rather than a second file, matching
 * every other feature block above. Card grid uses CSS Grid with an
 * auto-fill minmax so both the 4-card front-page teaser and the 12+-card
 * directory grid share one rule and reflow correctly down to ~400px wide
 * (section: works at phone width) with no separate mobile breakpoint file.
 *
 * THEME05 (docs/active/THEME/THEME05_Top_Page_Rebuild_and_Shops_Breakpoint_
 * Adjustment.md "3."): there is no separate 4-column/3-column media query to
 * adjust -- the column count is a side effect of this one auto-fill minmax()
 * track width against the theme's `.ht-container`-equivalent width applied to
 * `.harajuku-shops-directory` (`min(100% - 32px, 1200px)`, see wordpress-
 * theme/harajuku-today/assets/css/site.css). At the previous 15em (240px)
 * track width, 4 columns only fit once that container reached >=1020px,
 * i.e. viewport >=~1052px -- switching to 3 columns noticeably before the
 * 1200px-capped desktop container was actually full. Narrowing the track to
 * 14.5em (232px) moves that same math to a >=992px container (viewport
 * >=~1020px), matching the requested "keep 4 columns down to ~1024px, switch
 * to 3 below that" without touching the shared 3->2/2->1 tiers (which shift
 * down by the same small amount as an unavoidable side effect of the single
 * shared track-width value, not a separate change).
 */

.harajuku-shops-directory {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 100%);
	margin: 1em auto 2em;
}

.harajuku-shops-directory__heading {
	margin-bottom: 0.75em;
}

.harajuku-shops-directory__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1em;
}

.harajuku-shops-directory__category-btn {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95em;
}

.harajuku-shops-directory__category-btn.is-active {
	background: #2c2c2c;
	color: #fff;
	border-color: #2c2c2c;
}

/* Section 6: present but visually secondary to the category buttons above. */
.harajuku-shops-directory__search {
	display: flex;
	gap: 0.5em;
	max-width: 20em;
	margin-bottom: 1em;
	font-size: 0.9em;
	opacity: 0.9;
}

.harajuku-shops-directory__search input[type="text"] {
	flex: 1 1 auto;
	padding: 0.4em 0.6em;
}

.harajuku-shops-directory__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 1.25em;
	padding: 0.75em 1em;
	background: rgba(127, 127, 127, 0.06);
	border-radius: 6px;
}

.harajuku-shops-directory__filters select {
	margin-left: 0.5em;
}

.harajuku-shops-directory__empty {
	opacity: 0.75;
}

.harajuku-shops-directory__more {
	text-align: center;
	margin-top: 1.5em;
}

.harajuku-shops-directory__more a {
	display: inline-block;
	padding: 0.6em 2em;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}

/* SHOP01: infinite-scroll loading/end/error states, JS-driven via [hidden]. */
.harajuku-shops-loading,
.harajuku-shops-end {
	text-align: center;
	margin-top: 1.5em;
	opacity: 0.75;
}

.harajuku-shops-load-sentinel {
	height: 1px;
}

.harajuku-shops-retry {
	display: block;
	margin: 1.5em auto 0;
	padding: 0.6em 2em;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 999px;
	background: transparent;
	font-weight: 700;
	cursor: pointer;
}

.harajuku-shops-directory__grid,
.harajuku-recent-shops-section__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14.5em, 1fr));
	gap: 1.25em;
}

.harajuku-shop-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(127, 127, 127, 0.25);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(127, 127, 127, 0.03);
}

.harajuku-shop-card__photo,
.harajuku-shop-card__photo--placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: rgba(127, 127, 127, 0.15);
}

.harajuku-shop-card__body {
	padding: 0.75em 0.9em 1em;
}

.harajuku-shop-card__category {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
	opacity: 0.7;
	margin-bottom: 0.25em;
}

.harajuku-shop-card__name {
	margin: 0 0 0.4em;
	font-size: 1.05em;
}

.harajuku-shop-card__hours {
	margin: 0 0 0.3em;
	font-size: 0.9em;
}

.harajuku-shop-card__runtime-badge {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.15);
	font-size: 0.85em;
}

.harajuku-shop-card__location {
	margin: 0 0 0.3em;
	font-size: 0.85em;
	opacity: 0.85;
	line-height: 1.4;
}

.harajuku-shop-card__verified {
	margin: 0;
	font-size: 0.75em;
	opacity: 0.6;
}

.harajuku-recent-shops-section {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 100%);
	margin: 2em auto;
}

.harajuku-recent-shops-section__heading,
.harajuku-front-section__heading {
	margin-bottom: 0.75em;
}

.harajuku-recent-shops-section__more {
	text-align: center;
	margin-top: 1.25em;
}

.harajuku-recent-shops-section__more a {
	display: inline-block;
	padding: 0.6em 2em;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}

/* Detail page (/shops/{slug}/) -------------------------------------------- */

.harajuku-shop-detail {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 100%);
	margin: 1em auto 2em;
}

.harajuku-shop-detail__name {
	margin-bottom: 0.2em;
}

.harajuku-shop-detail__category {
	font-weight: 700;
	opacity: 0.75;
	margin-bottom: 1em;
}

.harajuku-shop-detail__closed-notice {
	padding: 0.6em 1em;
	background: rgba(200, 60, 60, 0.12);
	border: 1px solid rgba(200, 60, 60, 0.4);
	border-radius: 6px;
	font-weight: 700;
	margin-bottom: 1em;
}

.harajuku-shop-detail__photos {
	margin-bottom: 1.25em;
}

.harajuku-shop-detail__photo-main,
.harajuku-shop-detail__photo-main--placeholder {
	width: 100%;
	max-height: 24em;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	background: rgba(127, 127, 127, 0.15);
}

.harajuku-shop-detail__photo-main--placeholder {
	aspect-ratio: 16 / 9;
}

.harajuku-shop-detail__photo-small-row {
	display: flex;
	gap: 0.5em;
	margin-top: 0.5em;
	overflow-x: auto;
}

.harajuku-shop-detail__photo-small {
	width: 6.5em;
	height: 6.5em;
	object-fit: cover;
	border-radius: 6px;
	flex: 0 0 auto;
}

.harajuku-shop-detail__info {
	margin-bottom: 1em;
}

.harajuku-shop-detail__info-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.75em;
	padding: 0.5em 0;
	border-top: 1px solid rgba(127, 127, 127, 0.18);
}

.harajuku-shop-detail__info-row:first-child {
	border-top: 0;
}

.harajuku-shop-detail__info-label {
	flex: 0 0 auto;
	min-width: 6em;
	font-weight: 700;
	opacity: 0.75;
}

.harajuku-shop-detail__info-value {
	flex: 1 1 auto;
	word-break: break-word;
}

.harajuku-shop-detail__runtime-badge {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.15);
	font-size: 0.85em;
}

.harajuku-shop-detail__map-link a {
	display: inline-block;
	padding: 0.5em 1.25em;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}

.harajuku-shop-detail__verified-note {
	font-size: 0.85em;
	opacity: 0.7;
	margin: 1em 0;
}

.harajuku-shop-detail__related ul,
.harajuku-shop-detail__latest-visit p {
	margin: 0.5em 0 0;
	padding-left: 1.25em;
}

.harajuku-related-shop-backlink {
	margin-top: 1.5em;
}

.harajuku-related-shop-backlink a {
	display: inline-block;
	padding: 0.5em 1.25em;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}