/**
 * Shared, sitewide block patterns (see PLAN.md §3): eyebrow label,
 * section heading, and numbered card. These repeat across Home,
 * Services, The City, Store, News, and Stories — not page-specific,
 * so (unlike hero.css/home.css) this loads on every page.
 */

/*
 * Carousel pagination dots (hero + Services carousels): the plugin
 * renders each dot as a real <button> sized directly by
 * --swiper-pagination-bullet-size (8px, the design's visual dot size),
 * so there's no separate hit-area element to pad without also growing
 * the visible dot. box-sizing:content-box + padding grows the button's
 * actual clickable box to meet the 24x24 CSS px minimum touch target
 * (WCAG 2.5.8 / Lighthouse target-size) while background-clip keeps the
 * painted dot itself at its original small size. Padding is exactly 8px
 * (8+8+8=24, the literal minimum) rather than more generous padding: on
 * Services this row sits between the prev/next arrows (see
 * SERVICES-001), which were positioned assuming the old, narrower dot
 * row — more padding here reintroduces the arrow/dot overlap that fix
 * removed (confirmed live: 10px padding put the row's outer edge ~2px
 * into the arrow's box).
 * !important on background-clip: the block also generates its own
 * inline stylesheet with a 3-class selector
 * (".wp-block-cb-carousel-v2 .cb-pagination .cb-pagination-bullet")
 * that's more specific than this rule and sets the `background`
 * shorthand, which silently resets background-clip back to its
 * border-box default — confirmed live via document.styleSheets.
 */
.chennai-world-hero-carousel .swiper-pagination-bullet,
.chennai-world-services-carousel .swiper-pagination-bullet {
	box-sizing: content-box;
	padding: 8px;
	background-clip: content-box !important;
}

.chennai-world-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--accent-gold);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

/*
 * When this class lands on a wp:group block (its "flow" layout in the
 * editor, unrelated to the flex row this class actually renders as),
 * core's block-gap global styles add `margin-block-start` to every
 * child after the first — landing on the text span here, since the dot
 * is first-child and exempt. That pushed the text down out of the flex
 * row instead of sitting centered beside the dot (visible sitewide:
 * "What we offer", "Our story", etc). Same root cause and fix already
 * applied to the hero-only variant of this pattern below
 * (.chennai-world-hero-eyebrow), just never carried over to this
 * shared class. Zeroing margin on all children fixes every instance of
 * this pattern from this one place.
 */
.chennai-world-eyebrow > * {
	margin: 0;
}

.chennai-world-eyebrow-dot {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: currentcolor;
}

.chennai-world-section-heading {
	max-width: 30ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--text-primary);
}

.chennai-world-section-heading em {
	color: var(--wp--preset--color--accent-teal);
	font-style: italic;
}

.chennai-world-section-intro {
	max-width: 46ch;
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--large);
}

.chennai-world-numbered-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--30);
	border-radius: 1rem;
	background-color: var(--wp--preset--color--surface);
	color: inherit;
	text-decoration: none;
}

.chennai-world-numbered-card-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--preset--color--accent-gold);
}

.chennai-world-numbered-card--teal .chennai-world-numbered-card-number {
	color: var(--wp--preset--color--accent-teal);
}

.chennai-world-numbered-card h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
}

.chennai-world-numbered-card p {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--medium);
}

/* Sub-page header bar (Services/The City/Store/News/Stories): a
   "← Back to home" link + eyebrow, optionally followed by a
   page-specific right-hand element (Services' slide counter, etc.). */
.chennai-world-subpage-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem var(--wp--preset--spacing--40) 0;
}

.chennai-world-subpage-header .chennai-world-eyebrow {
	margin-bottom: 0;
}

/*
 * Page-header wrapper (Store/News/Stories): a single block-level
 * container around the "← Back to home" row + eyebrow + <h1> + intro
 * paragraph. Required so these sit correctly inside the page's
 * full-width "constrained" section — WP's generated layout CSS
 * centers each *direct child* of a constrained container individually
 * via max-width + margin:auto !important (see the hero/City-header
 * notes elsewhere in this file's history for the same root cause).
 * That's harmless for a wide element (a flex row that already fills
 * the column), but for a *narrow* one — like an <h1> capped at 30ch,
 * or a <p> capped at 46ch — it gets centered against the full
 * viewport instead of sitting flush at the column's real left edge,
 * and a plain eyebrow (inline-flex, so the centering doesn't even
 * apply) ends up flush against the literal browser edge with zero
 * padding. Wrapping everything in one real block-level parent fixes
 * it the same way "What We Offer"/"Our Story"/"On Air" on the Home
 * page already avoid the bug — the wrapper (not each item inside it)
 * is what receives the (now harmless, because it's wide) centering.
 */
.chennai-world-page-header {
	/* Trimmed from 1.5rem — deliberate deviation from the design, per
	   owner request to cut the top gap on News/Stories/Store/archive
	   further than the section-level padding above already does. */
	padding: 0.5rem var(--wp--preset--spacing--40) 0;
}

.chennai-world-page-header .chennai-world-subpage-header {
	padding: 0;
	margin-bottom: 1rem;
}

.chennai-world-back-link {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

.chennai-world-back-link:hover {
	color: var(--wp--preset--color--text-primary);
}

/* Post card (News/Stories, §3): shared between both archives' featured
   and grid Query Loops, and reused by the shared "chennai-world-post-*"
   naming below regardless of which page renders it. */

.chennai-world-post-featured-wrap .wp-block-post-template,
.chennai-world-post-grid-wrap .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.chennai-world-post-featured-wrap .wp-block-post-template {
	grid-template-columns: 1fr;
}

/*
 * core/post-template renders one <li class="wp-block-post ..."> per
 * queried post, generated from get_post_class() — there's no way to
 * add a custom className directly onto that <li> via block markup
 * (a className set on the post-template block itself lands on the
 * outer <ul>, not each item). So the card box styling below targets
 * the structural "> li" child instead of a custom class.
 */
.chennai-world-post-featured-wrap .wp-block-post-template > li,
.chennai-world-post-grid-wrap .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1.25rem;
	background-color: var(--wp--preset--color--surface);
	box-shadow: rgba(0, 0, 0, 0.35) 0 30px 80px 0;
}

.chennai-world-post-featured-wrap .wp-block-post-template > li {
	flex-direction: row;
	border: 1px solid var(--wp--preset--color--accent-gold);
}

.chennai-world-post-featured-wrap .wp-block-post-template > li .wp-block-post-featured-image,
.chennai-world-post-grid-wrap .wp-block-post-template > li .wp-block-post-featured-image {
	margin: 0;
}

.chennai-world-post-featured-wrap .wp-block-post-template > li .wp-block-post-featured-image img,
.chennai-world-post-grid-wrap .wp-block-post-template > li .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chennai-world-post-featured-wrap .wp-block-post-template > li .wp-block-post-featured-image {
	flex: 1 1 45%;
}

.chennai-world-post-grid-wrap .wp-block-post-template > li .wp-block-post-featured-image {
	flex-shrink: 0;
}

.chennai-world-post-card-photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 11rem;
	background-image: repeating-linear-gradient(135deg, var(--wp--preset--color--surface), var(--wp--preset--color--surface) 10px, var(--wp--preset--color--background-secondary) 10px, var(--wp--preset--color--background-secondary) 20px);
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.05em;
}

.chennai-world-post-featured-wrap .chennai-world-post-card-photo--placeholder {
	flex: 1 1 45%;
	height: auto;
}

.chennai-world-post-card-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
}

.chennai-world-post-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--accent-gold);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.chennai-world-post-card-meta .wp-block-post-terms,
.chennai-world-post-card-meta .wp-block-chennai-world-read-time {
	color: var(--wp--preset--color--accent-gold);
}

.chennai-world-post-card-meta a {
	color: inherit;
	text-decoration: none;
}

.chennai-world-post-card-meta-dot {
	color: var(--wp--preset--color--text-secondary);
	white-space: nowrap;
}

.chennai-world-post-card-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.25;
}

.chennai-world-post-featured-wrap .chennai-world-post-card-title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 300;
}

.chennai-world-post-card-title a {
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
}

.chennai-world-post-card-byline a {
	color: inherit;
	text-decoration: none;
}

.chennai-world-post-card-title a:hover {
	text-decoration: underline;
}

.chennai-world-post-card-excerpt {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--medium);
}

.chennai-world-post-featured-wrap .chennai-world-post-card-text {
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}

/*
 * Children reset to margin:0: this is a wp:group block ("flow" layout
 * in the editor) rendered as a flex row below — core's block-gap
 * global styles still add margin-block-start to every child after the
 * first, which pushed it out of the row (same root cause as the
 * shared .chennai-world-eyebrow fix above).
 */
.chennai-world-post-card-byline > * {
	margin: 0;
}

.chennai-world-post-card-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.5rem;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.chennai-world-post-card-read-link {
	display: inline-block;
	margin-top: 1.5rem;
	color: var(--wp--preset--color--accent-teal);
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 900px) {

	.chennai-world-post-grid-wrap .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}

	.chennai-world-post-featured-wrap .wp-block-post-template > li {
		flex-direction: column;
	}

	.chennai-world-post-featured-wrap .wp-block-post-template > li .wp-block-post-featured-image,
	.chennai-world-post-featured-wrap .chennai-world-post-card-photo--placeholder {
		flex: none;
		height: 14rem;
	}
}

@media (max-width: 560px) {

	.chennai-world-post-grid-wrap .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* Category/tag/date archive template (archive.html) — query pagination row. */
.chennai-world-archive-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	margin-top: var(--wp--preset--spacing--30);
}

.chennai-world-archive-pagination .page-numbers {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}

.chennai-world-archive-pagination a.page-numbers:hover,
.chennai-world-archive-pagination .page-numbers.current {
	color: var(--wp--preset--color--accent-gold);
}