/*
 * SwissCham MK — custom rules that theme.json cannot express.
 * Everything expressible in theme.json stays in theme.json.
 * System reference: DESIGN.md (Alpine Precision).
 */

/* ---------------------------------------------------------------- Typography */

/* Cyrillic headings run long; balance stops a one-word last line. */
h1,
h2,
h3 {
	text-wrap: balance;
}

/* Red is reserved for actions and conviction bands — never for a heading. */
.wp-block-post-title a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* A card title is how an event or an article is opened on a phone, and it sets
   at 17px. Expand the hit area rather than the type: same drawing, 44px target.
   The overlay never shrinks a link that is already taller. */
.wp-block-post-title a,
.wp-block-site-title a {
	position: relative;
}

.wp-block-post-title a::after,
.wp-block-site-title a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}

/* ---------------------------------------------------------------- Band head */

/* The rule, the heading and the lead share one left edge with the grid beneath
   them. The head is `alignwide` so that edge is the 1440px measure rather than
   the 960px prose column — left-aligning inside the prose column would indent
   every heading 216px from its own grid at 1440, which reads as a bug.
   The lead keeps a prose measure of its own instead of running the full width. */
.swisscham-band-head {
	margin-bottom: 2.5rem;
}

/* A lead paragraph keeps a reading measure of its own wherever it appears —
   inside a band head, beside a photograph, or centred on a cover. Left to the
   container it runs 760–780px, which is 85+ Cyrillic characters a line. */
.swisscham-lead {
	max-width: 42rem;
}

/* --------------------------------------------------- Eyebrow and the red rule */

/* The section marker: what this band is, above the thing it says. */
.swisscham-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* A 56×4 bar of Swiss Signal Red. The system's one ornament, and it is
   structural: it opens a band and points at what follows. */
.wp-block-separator.swisscham-rule {
	width: 56px;
	height: 4px;
	border: 0;
	opacity: 1;
	margin-left: 0;
	margin-right: auto;
}

.wp-block-separator.swisscham-rule.is-centered {
	margin-left: auto;
}

/* The chamber names exactly six core values. Counting them is the North Star,
   not decoration — the index is set below the title it belongs to. */
.swisscham-index {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--wp--preset--color--foreground);
	/* The index is content, not ornament — the chamber names exactly six values
	   and counting them is the point. At 45% it measured 2.84:1 on the band and
	   failed AA; 62% puts it at 4.5:1 while still reading as secondary. */
	opacity: 0.62;
	margin: 0 0 0.875rem;
}

/* The value card opens with a line mark at left and its index at right. The
   mark is ink, not red: six red glyphs in one band would break Red-Means-Act. */
.swisscham-value-header {
	margin-bottom: 1.25rem;
}

.swisscham-value-header .swisscham-index {
	margin-bottom: 0;
}

.swisscham-value-icon {
	display: block;
	flex: none;
	width: 2rem;
	height: 2rem;
	color: var(--wp--preset--color--foreground);
}

/* --------------------------------------------------------------- Page header */

/* The band that opens every inner page, the events archive, and every single
   event: a title block, not a hero — no photograph, no card, no overlap, no
   fixed hero height. It reads as a Swiss technical document's cover sheet,
   but at full hero conviction: same 6rem padding as the homepage hero and
   closing CTA, same Display type step. It never shares a page with either,
   so borrowing their scale doesn't compete with them — it's this band's own
   ink-plus-red-instrument statement, not a new vocabulary. */
.swisscham-page-header {
	padding: 6rem 0;
}

/* This section's own rule mark reads at the scale of a section opener, not
   a card opener — turned up from the base 56x4 shared by every other band,
   which stays untouched everywhere else it is used. */
.swisscham-page-header-row .swisscham-rule {
	width: 96px;
	height: 6px;
	margin-bottom: 1.25rem;
	margin-left: calc(14px + 0.5rem);
}

/* Sun Yellow's one appearance: a tick the same height as the rule, reading
   as the other half of one calibration mark rather than a second ornament.
   DESIGN.md holds the accent in reserve for exactly this — a single small
   mark, spent once per viewport — and this band, which opens every inner
   page, is where it is spent. */
.swisscham-page-header-row {
	position: relative;
}

.swisscham-page-header-row::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 14px;
	height: 6px;
	background-color: var(--wp--preset--color--accent);
}

/* The Display step, the same scale the homepage hero sets — not the
   Events/Benefits rank-3 step this band used before. This band never
   shares a page with the hero, so borrowing its full type conviction
   doesn't compete with it; it delivers the ink-plus-red-instrument
   parity DESIGN.md already claims for this band. */
.swisscham-page-header-title {
	margin: 0;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	line-height: 1.15;
}

@media (max-width: 600px) {
	.swisscham-page-header {
		padding: 3.5rem 0;
	}

	.swisscham-page-header-row .swisscham-rule {
		width: 72px;
		margin-left: calc(10px + 0.5rem);
	}

	.swisscham-page-header-row::before {
		width: 10px;
	}
}

/* Date and location read as one fact, not two floating paragraphs. */
.swisscham-event-meta p {
	margin: 0;
	color: var(--wp--preset--color--foreground);
}

.swisscham-event-meta-sep {
	opacity: 0.5;
}

/* ------------------------------------------------------------------- Imagery */

/* Photographs are surfaces, never floating objects: no radius on a full-bleed
   band, no shadow anywhere, and always under a scrim so type stays legible. */
.wp-block-cover {
	box-shadow: none;
}

.wp-block-cover__image-background {
	object-fit: cover;
}

/* Two image treatments, and only two. A flat opacity scrim greys a photograph
   out; these desaturate it first so the geometry still reads underneath. */

/* Ink treatment — statement bands. Dark monochrome, white type. */
.swisscham-scrim-ink .wp-block-cover__image-background {
	filter: grayscale(1) contrast(1.25) brightness(0.5);
}

.swisscham-scrim-ink .wp-block-cover__background {
	opacity: 0.3;
}

/* Red treatment — the closing conviction band. Multiply keeps Swiss Signal Red
   saturated instead of washing it to pink over a bright photograph.

   Multiply darkens: the result is base × red, so the base has to sit ABOVE
   mid-grey for the band to land on the real #D8241E. Darkening it first, as
   this did at brightness(0.7), multiplied red into brick and the conviction
   band read muddy — the opposite of what the treatment is for. Lifting the
   base and flattening it keeps the field on Swiss red while the viaduct still
   reads in the dark values.

   The contrast value is doing accessibility work, not taste: at contrast(0.7)
   the brightest parts of the photograph clip to white, multiply returns the
   full red there, and white body copy over those patches measured 4.39:1 —
   under AA. Compressing the highlights holds the lightest pixel at 4.64:1
   with no loss of saturation. Re-measure the composite if this image changes. */
.swisscham-scrim-red .wp-block-cover__image-background {
	filter: grayscale(1) brightness(1.15) contrast(0.65);
}

.swisscham-scrim-red .wp-block-cover__background {
	opacity: 1;
	mix-blend-mode: multiply;
}

/* Media-text figure: a container, so it takes the container radius. */
.swisscham-media-text .wp-block-media-text__media {
	border-radius: 6px;
	overflow: hidden;
	min-height: 26rem;
}

.swisscham-media-text .wp-block-media-text__content {
	padding-left: 0;
	padding-right: 0;
}

/* Core stacks a media-text at 600px. That is too late here: at 601–781px the
   44% media column leaves the content roughly 350px, and the Cyrillic heading
   sets badly in it. Stack at 781px, the breakpoint the rest of this file uses.
   `!important` is core's own mechanism — the column ratio is an inline style,
   so nothing but this beats it. */
@media (max-width: 781px) {
	.swisscham-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
		/* The block's 3rem blockGap renders as column padding, not a grid gap,
		   so stacking leaves the image flush against the button. */
		row-gap: 3rem;
	}

	/* Content above media, inverting core's stacked order. The band follows a
	   full-bleed hero photograph; a second image before any text buries the
	   positioning statement and reads as two pictures in a row. */
	.swisscham-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 1;
	}

	.swisscham-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 2;
	}

	.swisscham-media-text .wp-block-media-text__media {
		min-height: 16rem;
	}
}

/* --------------------------------------------------------------- Focus rings */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* A red ring is invisible on a red button and on a red band. */
.wp-block-button__link.has-primary-background-color:focus-visible {
	outline-color: var(--wp--preset--color--foreground);
}

.wp-block-button__link.has-background-background-color:focus-visible,
.is-style-outline .wp-block-button__link:focus-visible,
.has-foreground-background-color a:focus-visible {
	outline-color: #ffffff;
}

/* ------------------------------------------------------------------ Buttons */

.wp-block-button__link {
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button__link.has-primary-background-color:hover {
	background-color: #b31c17;
}

/* Inverse button — white fill on a red band. */
.wp-block-button__link.has-background-background-color:hover {
	background-color: #efedec;
}

/* Outline button — resolves into the inverse button on hover. */
.is-style-outline .wp-block-button__link:hover {
	background-color: #ffffff;
	color: var(--wp--preset--color--primary);
}

/* Quiet button — a bound link inside a card, where a red fill would shout. */
.wp-block-button.is-style-quiet .wp-block-button__link {
	position: relative;
	background-color: transparent;
	color: var(--wp--preset--color--foreground);
	border: 0;
	border-bottom: 1px solid #e4e4e4;
	border-radius: 0;
	padding: 0.25rem 0;
	font-size: 0.875rem;
}

/* The quiet link renders 31px tall, and growing its padding would drag the
   underline away from the label and break the card's baseline. Expand the hit
   area instead: the target reaches 44px, the drawing does not move. */
.wp-block-button.is-style-quiet .wp-block-button__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}

.wp-block-button.is-style-quiet .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------- Navigation */

.wp-block-navigation .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* The header row wraps as a whole; keep nav + CTA right-aligned on their own row. */
/* Specificity is deliberate: core's flex layout sets `margin: 0` on every child. */
header .wp-block-group.swisscham-header-actions {
	margin-left: auto;
}

/* Core ships these at 24×24, below the touch-target minimum. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Core's `overlayMenu: mobile` collapses the navigation below 600px. Measured,
   the horizontal nav plus the membership CTA needs 801px of viewport: between
   600 and 801 the header row overflowed and the CTA was clipped off-screen,
   because the actions group is deliberately `nowrap`. Collapse at 860px
   instead — 801 plus room for the МК/EN switcher that lands with Polylang.
   Re-measure this number when that switcher is added.

   These two rules restore the sub-600px state, which is the base state; they
   only have to undo core's own two `min-width: 600px` overrides. */
@media (max-width: 859px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* A pointer that cannot hover is a finger: 32px nav rows are fine for a mouse
   and too small for a thumb. Mouse users keep the tighter desktop rhythm. */
@media (pointer: coarse) {
	.wp-block-navigation .wp-block-navigation-item__content {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* -------------------------------------------------------------- Card grids */

/* Equal-height cards, with a trailing link pinned to the card's baseline. */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}

.wp-block-post-template.is-layout-grid > li > .wp-block-group {
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Core's constrained layout puts `margin-inline: auto` on every child. Inside a
   column flex container that centres them and shrinks them to their content,
   which silently breaks left-aligned cards and zeroes out separators. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group > * {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wp-block-post-template.is-layout-grid > li > .wp-block-group > .wp-block-buttons:last-child {
	margin-top: auto;
}

/* Every grid on this page asks for a fixed column count and gets however many
   items exist. `auto-fit` collapses the empty tracks so a short row never leaves
   a hole, and the `max()` floors a track at one Nth of the row, which caps the
   column count without a second breakpoint. Below the stacking breakpoint the
   tracks take `1fr` and fill; above it the events grid pins its tracks to a
   third so two events read as two of three rather than two half-page slabs. */
.wp-block-post-template.swisscham-event-grid.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(max(18rem, (100% - 2 * 1.5rem) / 3), 1fr));
}

@media (min-width: 782px) {
	.wp-block-post-template.swisscham-event-grid.is-layout-grid {
		grid-template-columns: repeat(auto-fit, minmax(18rem, max(18rem, (100% - 2 * 1.5rem) / 3)));
	}
}

/* Partners are endorsement — few, weighty, three across. Members are an index —
   more of them, smaller, four across. Same card, different relationship. */
.wp-block-post-template.swisscham-partner-grid.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(max(16rem, (100% - 2 * 1.5rem) / 3), 1fr));
}

.wp-block-post-template.swisscham-member-grid.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(max(14rem, (100% - 3 * 1.5rem) / 4), 1fr));
}

/* The six core values are a list, not six objects. Boxing them made the band
   that states a disposition physically outweigh the band that states the offer. */
.wp-block-group.swisscham-value-grid {
	grid-template-columns: repeat(auto-fit, minmax(max(15rem, (100% - 2 * 1.5rem) / 3), 1fr));
}

/* Core floors every post-template grid at one column below 600px, with a
   four-times-repeated class that is deliberately hard to override. The values
   grid is a group rather than a post template, so it has to state the same
   floor or it would sit at two columns while every other grid on the page
   is at one. */
@media (max-width: 600px) {
	.wp-block-group.swisscham-value-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------- Directory filter */

.swisscham-directory-filter select,
.swisscham-directory-filter input[type="search"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--foreground);
	background-color: var(--wp--preset--color--background);
	border: 1px solid #e4e4e4;
	border-radius: 4px;
	padding: 0.625rem 0.875rem;
}

.swisscham-directory-filter select {
	flex: 0 1 16rem;
}

.swisscham-directory-filter input[type="search"] {
	flex: 1 1 16rem;
	min-width: 0;
}

.swisscham-directory-filter select:hover,
.swisscham-directory-filter input[type="search"]:hover {
	border-color: var(--wp--preset--color--foreground);
}

/* ------------------------------------------------------------------ Footer */

/* An address or a long URL must not push the ink band into a horizontal scroll. */
.has-foreground-background-color a {
	overflow-wrap: anywhere;
}

/* The footer is a tap list on a phone and a reading list on a desk. Core sets
   both at 24px; only the thumb needs the taller row. */
@media (pointer: coarse) {
	.has-foreground-background-color a,
	.swisscham-more a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Partner and member tiles hold a logo. Until the chamber supplies them the
   tile keeps its intended height rather than collapsing to a name and a link. */
.swisscham-logo-card {
	min-height: 13rem;
	justify-content: center;
}

/* A member tile carries the same content in a quieter register: four to a row
   rather than three, so it cannot hold a partner's height without becoming
   mostly empty. */
.swisscham-member-grid .swisscham-logo-card {
	min-height: 9rem;
}