/*
 * ============================================================================
 * N01 (docs/N01_ChangeLog.md, docs/K01_harajuku_guide_layout_instruction.md):
 * dedicated single-post layout for the "原宿ガイド" category (slug
 * harajuku-guide). Entirely scoped under body.harajuku-guide-article (added
 * only on that category's own single-post page by harajuku_today_add_guide_
 * body_class() in harajuku-today-event-data.php), so nothing in this file
 * can ever affect any other category or page. Enqueued only on that same
 * page by harajuku_today_enqueue_guide_style().
 *
 * Every "spot" in a 原宿ガイド article is an ordinary Gutenberg Group block
 * the author adds directly in the post body (docs/K01 "各スポットは
 * Gutenberg の「グループブロック」でひとまとまりにしている"). This file styles
 * that existing structure via `.entry-content > .wp-block-group` (direct
 * children only, so a Group nested *inside* one spot -- e.g. wrapping a
 * multi-image layout -- is never mistaken for a spot of its own); it never
 * parses or depends on any block's own text content (docs/K01 "本文中の
 * ...文字列を解析してデータ化しない").
 *
 * N02 (docs/N02_ChangeLog.md, docs/K02_harajuku_guide_quick_nav_instruction.md)
 * adds the `.harajuku-guide-nav*` quick-nav rules and this file's own
 * `scroll-margin-top` near the bottom -- see each rule's own comment.
 *
 * N03 (docs/N03_ChangeLog.md, docs/K03_harajuku_guide_visual_refinement_
 * instruction.md) widens the article (see the "Content width" block right
 * below), tightens vertical spacing throughout, and rebuilds the quick-nav
 * as a 2-column grid -- see each rule's own comment.
 * ============================================================================
 */

/* ---- K03 "1.": widen the article to ~960px on desktop -----------------
 * Every block directly inside `.entry-content` (itself the theme's `is-
 * layout-constrained` post-content wrapper) is individually sized+centered
 * to the theme's global content-size (confirmed 645px live, see this same
 * plugin's harajuku-today-event-data.php "1340px" comment for how that was
 * measured) by a same-origin core rule shaped like `.is-layout-constrained >
 * :where(:not(.alignleft):not(.alignright):not(.alignfull))` -- specificity
 * (0,1,0). This plugin's stylesheet is enqueued after the theme's inline
 * global styles, and every selector below has higher specificity, so a plain
 * override (no `!important`) wins outright -- the same mechanism already
 * relied on for `.harajuku-event-card-meta` in harajuku-event-data.css (see
 * that rule's own comment). `max-width` is a ceiling, not a forced width, so
 * a phone viewport already narrower than 960px needs no separate override
 * (docs/K03 "スマホでは従来どおり画面幅に自然に収める").
 *
 * `.wp-block-post-title`/`.wp-block-post-featured-image` are WordPress
 * core's own block class names (not theme-specific markup this plugin would
 * otherwise have to guess at), used so the title and eyecatch line up with
 * the same width as the body below them (docs/K03 "アイキャッチ、導入カード、
 * ナビ、スポットカードの左右幅を揃える") without touching any theme file. The
 * quick-nav (`.harajuku-guide-nav`, injected as a direct child of `.entry-
 * content`) and every intro/closing paragraph and spot card already match
 * `.entry-content > *` below, so they automatically share this same width.
 */

body.harajuku-guide-article .entry-content > *,
body.harajuku-guide-article .wp-block-post-title,
body.harajuku-guide-article .wp-block-post-featured-image {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- N03 2026-08-27 follow-up (chat request, no dedicated K-doc): force
 * the guide article's own eyecatch (`.wp-block-post-featured-image`, WordPress
 * core's own block class -- same one the width rule above already targets)
 * to a fixed widescreen crop on both PC and phone, image not stretched
 * (`object-fit: cover` + `object-position: center`). Scoped under
 * `body.harajuku-guide-article` only, so event/shop posts (which render the
 * same core block, at their own natural aspect ratio, via the theme's
 * default template) are completely unaffected -- confirmed no unscoped
 * `.wp-block-post-featured-image` rule exists elsewhere in this plugin
 * (harajuku-event-data.css only ever targets it inside `.harajuku-card`
 * archive/front-page cards, never a single post's own eyecatch). No media
 * query: the ratio is the same at every width, exactly as requested ("PC・
 * スマホとも横長表示"). Originally shipped at ~16:7 (1.45.3); changed to a
 * more banner-like 16:3 per a same-day follow-up chat request -- no other
 * property here changed. ---- */
body.harajuku-guide-article .wp-block-post-featured-image {
	aspect-ratio: 16 / 3;
	overflow: hidden;
}

body.harajuku-guide-article .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---- Article body: comfortable reading size for intro/closing text ---- */

body.harajuku-guide-article .entry-content {
	font-size: 17px;
	line-height: 1.85;
}

body.harajuku-guide-article .entry-content > p {
	margin-top: 0;
	margin-bottom: 1.4em;
}

/* ---- Each spot: one top-level Group block, styled as its own card ---- */

/* K03 "3."/"4.": card-to-card gap and internal padding trimmed ~25% from
 * the previous 2.75em/1.4em 1.25em (docs/K03 "縦余白を20〜30%程度縮める" /
 * "カード内部paddingを過剰にしない") while keeping the card visually distinct. */
body.harajuku-guide-article .entry-content > .wp-block-group {
	margin-top: 2.1em;
	margin-bottom: 2.1em;
	padding: 1.2em 1.1em;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	background: #ffffff;
	/* N02/K02: a spot's HTML anchor sits on this same element, so a
	 * quick-nav jump lands here -- this keeps a fixed header (e.g. the
	 * WordPress admin bar shown to logged-in editors) from covering the
	 * spot's own heading right after the jump. */
	scroll-margin-top: 48px;
}

body.harajuku-guide-article .entry-content > .wp-block-group:first-of-type {
	margin-top: 1.3em;
}

body.harajuku-guide-article .entry-content > .wp-block-group:last-of-type {
	margin-bottom: 1.3em;
}

/* H2 = spot name, visually emphasized (docs/K01 "H2をスポット名として強調").
 * K03 "4.": margin-bottom trimmed (0.7em -> 0.5em) to bring the heading and
 * the spot's image closer together (docs/K03 "H2見出しと画像の距離を少し詰める"). */
body.harajuku-guide-article .entry-content > .wp-block-group h2 {
	font-size: 1.375em;
	line-height: 1.4;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0.5em;
	padding-bottom: 0.45em;
	border-bottom: 3px solid #b7791f;
}

/* Any smaller heading (H3 etc.) an author adds inside a spot -- heading
 * levels themselves are left untouched (docs/K01 "Gutenberg側で設定した
 * 見出しレベルを勝手に変更しないこと"); this only affects spacing. */
body.harajuku-guide-article .entry-content > .wp-block-group h3,
body.harajuku-guide-article .entry-content > .wp-block-group h4 {
	margin-top: 1.2em;
	margin-bottom: 0.5em;
}

/* ---- Images: large and readable, never overflow, spaced when stacked ---- */

body.harajuku-guide-article .entry-content > .wp-block-group img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

body.harajuku-guide-article .entry-content > .wp-block-group .wp-block-image,
body.harajuku-guide-article .entry-content > .wp-block-group .wp-block-gallery {
	margin-top: 0.9em;
	margin-bottom: 1.1em;
}

body.harajuku-guide-article .entry-content > .wp-block-group .wp-block-image:first-child {
	margin-top: 0;
}

/* A multi-image layout via Columns: let it wrap on narrow screens instead of
 * squeezing images down (docs/K01 "複数画像でもスマホで崩れない"). */
body.harajuku-guide-article .entry-content > .wp-block-group .wp-block-columns {
	gap: 0.75em;
	flex-wrap: wrap;
}

body.harajuku-guide-article .entry-content > .wp-block-group .wp-block-column {
	flex-basis: 100%;
}

@media (min-width: 480px) {
	body.harajuku-guide-article .entry-content > .wp-block-group .wp-block-column {
		flex-basis: 0;
	}
}

/* ---- Info list: plain WP list block, styled as a basic-info card ----
 * docs/K01 "情報リストを基本情報カードのように見せる" / "項目文字列を
 * プログラムで解析せず...CSS等で見やすく整える程度でよい" -- no per-item
 * parsing, just uniform card styling for whatever list items the author
 * writes (場所/住所/目印/数/使える時間/穴場度/特記事項 etc., docs/K01
 * "穴場度" included -- no dedicated field/star-rating styling yet, kept as
 * plain list text so it can move to its own block/meta field later without
 * a CSS rewrite here). */
/* K03 "4.": the description paragraph right before the info list gets its
 * own tight bottom margin (theme/browser default paragraph spacing was
 * otherwise pushing it further from the list than intended), and the list's
 * own top margin is trimmed (1.1em -> 0.75em) to match (docs/K03 "説明文と
 * 情報リストの距離も少し詰める"). */
body.harajuku-guide-article .entry-content > .wp-block-group > p {
	margin-top: 0;
	margin-bottom: 0.8em;
}

body.harajuku-guide-article .entry-content > .wp-block-group ul {
	list-style: none;
	margin: 0.75em 0 0;
	padding: 0.9em 1.1em;
	background: #faf7f0;
	border-radius: 10px;
}

body.harajuku-guide-article .entry-content > .wp-block-group ul li {
	padding: 0.4em 0;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
	overflow-wrap: break-word;
	word-break: break-word;
}

body.harajuku-guide-article .entry-content > .wp-block-group ul li:last-child {
	border-bottom: none;
}

/* ---- Quick nav (N02/K02): "今いる場所・目的から探す" jump-link chips,
 * injected by harajuku_today_inject_guide_quick_nav() right before the
 * article's first spot. A selection nav, not a search form (docs/K02
 * "検索フォームではなく選択式ナビとして見せる") -- pill-shaped tap targets,
 * reusing this file's existing info-card background/accent color so it
 * blends with the rest of the guide layout instead of introducing a new
 * palette (docs/K02 "原宿Todayの既存デザインに馴染ませる" / "過剰装飾はしない"). */

/* K03 "2."/"3.": card margin/padding trimmed, and top/bottom padding
 * specifically reduced (docs/K03 "ナビカードの上下paddingも少し縮める").
 *
 * N03 2026-08-27 follow-up (chat request, no dedicated K-doc): padding
 * trimmed further still (top/bottom roughly halved again, sides trimmed a
 * bit) together with the grid `gap` below, to compress the nav's overall
 * rendered height by ~10-20% without touching `.harajuku-guide-nav__link`'s
 * own `min-height: 44px` tap target, which stays exactly as-is. See
 * docs/N03_ChangeLog.md's own dated entry for the approximate before/after
 * height arithmetic this was designed against. */
body.harajuku-guide-article .harajuku-guide-nav {
	margin: 1.5em 0 1.9em;
	padding: 0.4em 0.85em 0.45em;
	background: #faf7f0;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
}

body.harajuku-guide-article .harajuku-guide-nav__heading {
	margin: 0 0 0.6em;
	font-size: 0.95em;
	font-weight: 700;
	color: #4a4a4a;
}

/* K03 "2.": a real 2-column grid (rather than the previous `flex-basis:
 * calc(50%...)`, which could still end up a single wide column depending on
 * label length/container width) guarantees exactly 2 columns on desktop
 * (docs/K03 "PC：2列表示を基本"). `minmax(0, 1fr)` keeps both columns equal
 * and lets a button's own text wrap instead of overflowing its column. An
 * odd 5th button simply occupies the first cell of its own row and leaves
 * the second cell empty -- grid's normal auto-flow, nothing extra needed
 * (docs/K03 "最後が1件余る場合も自然に表示"). */
body.harajuku-guide-article .harajuku-guide-nav__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* N03 2026-08-27 follow-up: gap halved (0.5em -> 0.25em) alongside the
	 * container padding above, part of the same overall-height compression. */
	gap: 0.25em;
}

body.harajuku-guide-article .harajuku-guide-nav__link {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0.55em 0.7em;
	border: 1px solid #b7791f;
	border-radius: 999px;
	background: #ffffff;
	color: #7a5411;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

body.harajuku-guide-article .harajuku-guide-nav__link:hover,
body.harajuku-guide-article .harajuku-guide-nav__link:focus-visible {
	background: #b7791f;
	color: #ffffff;
}

/* K03 "2.": on a narrow phone, 2 columns can squeeze a longer label
 * uncomfortably -- 1 column reads better there (docs/K03 "スマホ：1列または
 * 2列のうち読みやすい方"). Same 420px threshold as before. */
@media (max-width: 420px) {
	body.harajuku-guide-article .harajuku-guide-nav__links {
		grid-template-columns: 1fr;
	}
}

/* ---- Responsive: phone-first per docs/K01 "スマートフォン表示を最優先する" ---- */

@media (max-width: 600px) {
	body.harajuku-guide-article .entry-content {
		font-size: 16px;
	}

	body.harajuku-guide-article .entry-content > .wp-block-group {
		padding: 1.05em 0.85em;
		border-radius: 12px;
		margin-top: 1.7em;
		margin-bottom: 1.7em;
	}

	body.harajuku-guide-article .entry-content > .wp-block-group h2 {
		font-size: 1.2em;
	}
}