/*
 * Hub pages: hero + shared content components (cards, accordion, steps,
 * notice, support). Styled against the semantic tokens so they adapt to the
 * dark editorial body used on hub pages.
 */

/* ===== Hub hero ===== */
.tg-hub-hero {
	background: linear-gradient(160deg, var(--tg-n-900), var(--tg-black));
	border-bottom: var(--tg-bw) solid var(--tg-border);
	padding-block: var(--tg-band-y-loose);
}
.tg-hub-hero__title { font-size: clamp(var(--tg-fs-2xl), 5vw, var(--tg-fs-3xl)); text-transform: uppercase; margin: 0 0 var(--tg-sp-4); }
.tg-hub-hero__intro { max-width: 60ch; font-size: var(--tg-fs-md); color: var(--tg-text-muted); margin: 0; }
.tg-hub-hero__search { max-width: 560px; margin-top: var(--tg-sp-5); }

/* ===== Content prose ===== */
/* Cap at the site container width (the element also carries .tg-container). Without
   this the content bled to full-viewport on wide screens while the hero/header/
   footer stayed at --tg-maxw, so the hub content looked far too wide. */
.tg-hub-content { max-width: var(--tg-maxw); }
.tg-hub-content > h2 { font-size: var(--tg-fs-xl); margin-top: var(--tg-sp-7); }
.tg-hub-content > h2:first-child { margin-top: 0; }

/* ===== Resource cards ===== */
.tg-hub-cards { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-4); margin: var(--tg-sp-5) 0 var(--tg-sp-6); }
@media (min-width: 560px) { .tg-hub-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tg-hub-cards { grid-template-columns: repeat(3, 1fr); } }
.tg-hub-card {
	display: flex; flex-direction: column; gap: var(--tg-sp-2);
	padding: var(--tg-sp-5); border: var(--tg-bw) solid var(--tg-border);
	border-radius: var(--tg-radius-lg); background: var(--tg-bg-muted); color: var(--tg-text);
}
a.tg-hub-card:hover { text-decoration: none; border-color: var(--tg-green); transform: translateY(-2px); transition: transform var(--tg-dur), border-color var(--tg-dur); }

/* A card with nowhere to go.

   "Free club badge", "In-house decoration" and "Competitive pricing" are
   reasons to buy, not destinations, and dressing them in the same bordered
   panel as the three links above them promises a click that never comes. They
   lose the panel and the border and become a plain benefits row: the icon sits
   beside the heading rather than above it, so the shape differs at a glance and
   not only on hover. */
.tg-hub-card--static {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon title" ".... desc";
	column-gap: var(--tg-sp-3);
	row-gap: var(--tg-sp-1, .25rem);
	align-items: center;
	padding: var(--tg-sp-3) 0;
	border: 0;
	background: none;
	border-radius: 0;
}
.tg-hub-card--static .tg-hub-card__icon {
	grid-area: icon;
	width: 36px;
	height: 36px;
}
.tg-hub-card--static .tg-hub-card__icon svg { width: 20px; height: 20px; }
.tg-hub-card--static .tg-hub-card__title { grid-area: title; font-size: var(--tg-fs-sm); }
.tg-hub-card--static .tg-hub-card__desc  { grid-area: desc; }
/* The description is editor content, so it arrives wrapped in a <p> carrying its
   own margins, which stacked on top of the grid's row-gap and left the text
   floating well clear of its heading. */
.tg-hub-card--static .tg-hub-card__desc > :first-child { margin-top: 0; }
.tg-hub-card--static .tg-hub-card__desc > :last-child  { margin-bottom: 0; }

/* A rule above the group, so the benefits read as a footnote to the choices
   rather than a second set of options. */
.tg-hub-cards:has(> .tg-hub-card--static) {
	border-top: var(--tg-bw) solid var(--tg-border);
	padding-top: var(--tg-sp-4);
}
.tg-hub-card__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--tg-radius); background: var(--tg-green-soft); color: var(--tg-green-strong); }
.tg-hub-card__title { font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: var(--tg-fs-md); }
.tg-hub-card__desc { font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }

/* ===== Accordion (details/summary) ===== */
.tg-accordion { border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); overflow: hidden; margin: var(--tg-sp-5) 0; }
.tg-accordion__item { border-bottom: var(--tg-bw) solid var(--tg-border); }
.tg-accordion__item:last-child { border-bottom: 0; }
.tg-accordion__summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--tg-sp-3);
	min-height: var(--tg-tap); padding: var(--tg-sp-4) var(--tg-sp-5);
	font-weight: var(--tg-fw-semi); cursor: pointer; list-style: none;
}
.tg-accordion__summary::-webkit-details-marker { display: none; }
.tg-accordion__chev { transition: transform var(--tg-dur) var(--tg-ease); flex: 0 0 auto; }
.tg-accordion__item[open] .tg-accordion__chev { transform: rotate(90deg); }
.tg-accordion__body { padding: 0 var(--tg-sp-5) var(--tg-sp-5); color: var(--tg-text-muted); }

/* ===== Steps ===== */
.tg-steps { list-style: none; counter-reset: tg-step; margin: var(--tg-sp-5) 0; padding: 0; display: grid; gap: var(--tg-sp-4); }
.tg-steps__item { display: flex; gap: var(--tg-sp-4); align-items: flex-start; }
.tg-steps__num { counter-increment: tg-step; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--tg-radius-pill); background: var(--tg-green); color: #fff; font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); }
.tg-steps__num::before { content: counter(tg-step); }
.tg-steps__title { display: block; font-size: var(--tg-fs-md); margin-bottom: 2px; }

/* ===== Notice ===== */
.tg-notice { display: flex; gap: var(--tg-sp-3); padding: var(--tg-sp-4) var(--tg-sp-5); border-radius: var(--tg-radius); border: var(--tg-bw) solid var(--tg-border); margin: var(--tg-sp-4) 0; }
.tg-notice__icon { flex: 0 0 auto; }
.tg-notice__title { display: block; margin-bottom: 2px; }
.tg-notice--emergency { background: rgba(207,59,46,.12); border-color: var(--tg-error); }
.tg-notice--emergency .tg-notice__icon { color: var(--tg-error); }
.tg-notice--success { background: var(--tg-green-soft); border-color: var(--tg-green-line); color: var(--tg-ink); }
.tg-notice--success .tg-notice__icon { color: var(--tg-green-strong); }
.tg-notice--info .tg-notice__icon { color: var(--tg-green); }

/* ===== Support module ===== */
.tg-support { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tg-sp-4); padding: var(--tg-sp-6); border-radius: var(--tg-radius-lg); background: linear-gradient(135deg, #143a12, #0e0e0e); color: #fff; }
/* Same role and size as the conversations and equip bands, so the same
   treatment: every other band title on the site is uppercase. */
.tg-support__body h2 { margin: 0 0 var(--tg-sp-2); font-size: var(--tg-fs-xl); text-transform: uppercase; }
.tg-support__body p { margin: 0; color: var(--tg-n-300); max-width: 52ch; }

/* Photo-led hub hero (approved hubs p10/p11/p14). */
.tg-hub-hero--photo {
	background-image: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.35) 100%), var(--tg-hero-img, none);
	background-size: cover; background-position: center;
}
.tg-hub-hero--photo .tg-container { min-height: 320px; display: flex; flex-direction: column; justify-content: center; }
.tg-hub-hero__cta { display: flex; flex-wrap: wrap; gap: var(--tg-sp-3); margin-top: var(--tg-sp-5); }

/* ===== Art-directed hub hero =====
   One hero, three screen sizes, each with its own image, framing and layout -
   all of it set in the block's sidebar.

   NO LAYOUT DECISIONS LIVE HERE. tg_hub_hero_breakpoint_style() resolves each
   breakpoint's choices into custom properties and these three media queries just
   apply them, so a new layout option never needs another CSS branch and the
   editor cannot ask for an arrangement the stylesheet does not implement. In
   particular the space that clears the picture in a "copy below" layout is
   computed from the crop's MEASURED ratio, not from a number written in here:
   hard-coding it meant re-cutting a crop silently broke the layout.

   The fallback chain runs mobile -> tablet -> desktop, so supplying only one
   narrow crop still works, and a hero with no narrow crop at all never gets
   .tg-hub-hero--art and behaves exactly as it always has. */
.tg-hub-hero--art {
	padding-block: 0;
	background-repeat: no-repeat;
	background-color: #0c0c0c;
}
.tg-hub-hero--art .tg-container {
	display: flex;
	flex-direction: column;
	/* STRETCH, never flex-start: on a flex column, flex-start collapses every
	   child to its content width and silently undoes any max-width it was
	   given. Horizontal alignment is done with the child margins below. */
	align-items: stretch;
	padding-bottom: var(--tg-band-y-loose);
}
@media (min-width: 1025px) {
	.tg-hub-hero--art {
		background-image: var(--tg-hh-d-bg, none);
		background-size: var(--tg-hh-d-size, cover);
		background-position: var(--tg-hh-d-pos, center);
	}
	.tg-hub-hero--art .tg-container {
		min-height: var(--tg-hh-d-minh, 320px);
		padding-top: var(--tg-hh-d-padtop, var(--tg-band-y-loose));
		justify-content: var(--tg-hh-d-justify, center);
		text-align: var(--tg-hh-d-text, left);
	}
	.tg-hub-hero--art .tg-container > * {
		margin-left: var(--tg-hh-d-childml, 0);
		margin-right: var(--tg-hh-d-childmr, 0);
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.tg-hub-hero--art {
		background-image: var(--tg-hh-t-bg, var(--tg-hh-d-bg, none));
		background-size: var(--tg-hh-t-size, var(--tg-hh-d-size, cover));
		background-position: var(--tg-hh-t-pos, var(--tg-hh-d-pos, center));
	}
	.tg-hub-hero--art .tg-container {
		min-height: var(--tg-hh-t-minh, var(--tg-hh-d-minh, 320px));
		padding-top: var(--tg-hh-t-padtop, var(--tg-hh-d-padtop, var(--tg-band-y-loose)));
		justify-content: var(--tg-hh-t-justify, var(--tg-hh-d-justify, center));
		text-align: var(--tg-hh-t-text, var(--tg-hh-d-text, left));
	}
	.tg-hub-hero--art .tg-container > * {
		margin-left: var(--tg-hh-t-childml, var(--tg-hh-d-childml, 0));
		margin-right: var(--tg-hh-t-childmr, var(--tg-hh-d-childmr, 0));
	}
}

@media (max-width: 600px) {
	.tg-hub-hero--art {
		background-image: var(--tg-hh-m-bg, var(--tg-hh-t-bg, var(--tg-hh-d-bg, none)));
		background-size: var(--tg-hh-m-size, var(--tg-hh-t-size, var(--tg-hh-d-size, cover)));
		background-position: var(--tg-hh-m-pos, var(--tg-hh-t-pos, var(--tg-hh-d-pos, center)));
	}
	.tg-hub-hero--art .tg-container {
		min-height: var(--tg-hh-m-minh, var(--tg-hh-t-minh, var(--tg-hh-d-minh, 320px)));
		padding-top: var(--tg-hh-m-padtop, var(--tg-hh-t-padtop, var(--tg-hh-d-padtop, var(--tg-band-y-loose))));
		justify-content: var(--tg-hh-m-justify, var(--tg-hh-t-justify, var(--tg-hh-d-justify, center)));
		text-align: var(--tg-hh-m-text, var(--tg-hh-t-text, var(--tg-hh-d-text, left)));
	}
	.tg-hub-hero--art .tg-container > * {
		margin-left: var(--tg-hh-m-childml, var(--tg-hh-t-childml, var(--tg-hh-d-childml, 0)));
		margin-right: var(--tg-hh-m-childmr, var(--tg-hh-t-childmr, var(--tg-hh-d-childmr, 0)));
	}
}

/* ===== Split band (tg/split) =====
   Copy one side, photograph the other, the photograph bleeding to the outer
   edge as it does in the approved Our Work layout. The band is full-bleed and
   the COPY stays in the container's gutter, which is why the grid itself
   carries .tg-container rather than wrapping it. */
.tg-split { background: var(--tg-white); color: var(--tg-ink); padding-block: 0; }
.tg-split--dark { background: var(--tg-black); color: #fff; }
.tg-split__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: center; }
.tg-split__body { padding-block: var(--tg-band-y-loose); }
.tg-split__title { font-size: clamp(1.75rem, 4.2vw, 2.75rem); line-height: 1.05; margin: 0 0 var(--tg-sp-4); text-transform: none; }
.tg-split__accent { display: block; color: var(--tg-green-strong); }
.tg-split--dark .tg-split__accent { color: var(--tg-green); }
.tg-split__text { margin: 0 0 var(--tg-sp-3); max-width: 52ch; }
.tg-split--dark .tg-split__text { color: var(--tg-n-300); }
.tg-split__cta { display: flex; flex-wrap: wrap; gap: var(--tg-sp-3); margin-top: var(--tg-sp-5); }
.tg-split__media { position: relative; }
/* Breaks the picture out of the container to the viewport edge, which is how
   the approved layout has it. The side it escapes to follows the flip. */
/* Sized from its OWN width via aspect-ratio, never `height: 100%`. Tied to the
   row height it collapsed on any band whose copy is short - the closing bands
   have one paragraph each and their photograph disappeared entirely, leaving
   half a band of white. */
.tg-split__media img {
	display: block; width: 100%; height: auto; max-width: none;
	object-fit: cover; aspect-ratio: 3 / 2;
}
@media (min-width: 860px) {
	.tg-split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tg-sp-7); }
	.tg-split__media { margin-right: calc((100vw - min(100vw, var(--tg-maxw))) / -2 - var(--tg-gutter, 0px)); }
	.tg-split__media img { aspect-ratio: 4 / 3; }
	.tg-split--flip .tg-split__body { order: 2; }
	.tg-split--flip .tg-split__media {
		order: 1;
		margin-right: 0;
		margin-left: calc((100vw - min(100vw, var(--tg-maxw))) / -2 - var(--tg-gutter, 0px));
	}
	.tg-split--nomedia .tg-split__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Project cards (tg/projects) ===== */
.tg-projects { background: var(--tg-white); color: var(--tg-ink); }
.tg-projects--dark { background: var(--tg-black); color: #fff; }
.tg-projects__head { font-size: clamp(1.75rem, 4.2vw, 2.75rem); line-height: 1.05; margin: 0 0 var(--tg-sp-6); text-transform: none; }
.tg-projects__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tg-sp-6); }
@media (min-width: 700px)  { .tg-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tg-projects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tg-project { display: flex; flex-direction: column; gap: var(--tg-sp-3); color: inherit; }
a.tg-project:hover { text-decoration: none; }
/* The slot is ALWAYS there, with or without a photograph: two of the five
   campaigns have no image yet, and letting those cards collapse to text put the
   grid out of alignment - rows of different heights with the pictures landing at
   different levels. An empty slot holds the shape and reads as "photograph to
   come" rather than as a mistake. */
.tg-project__media { display: block; overflow: hidden; border-radius: var(--tg-radius); aspect-ratio: 16 / 10; }
.tg-project__media--empty { background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
.tg-projects:not(.tg-projects--dark) .tg-project__media--empty { background: var(--tg-paper); border: var(--tg-bw) solid var(--tg-border); }
.tg-project { height: 100%; }
.tg-project__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--tg-dur) var(--tg-ease); }
/* LIFT, never a drop shadow (house rule). */
a.tg-project:hover .tg-project__media img { transform: scale(1.03); }
.tg-project__body { display: flex; flex-direction: column; gap: 6px; }
.tg-project__partner { color: var(--tg-green); font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold); text-transform: uppercase; letter-spacing: .05em; }
.tg-project__title { font-size: var(--tg-fs-lg); font-weight: var(--tg-fw-bold); line-height: 1.15; }
.tg-project__desc p { margin: 0; color: var(--tg-n-300); }
.tg-projects:not(.tg-projects--dark) .tg-project__desc p { color: var(--tg-text-muted); }
.tg-project__stat { font-weight: var(--tg-fw-bold); }
.tg-project__cta { color: var(--tg-green); font-weight: var(--tg-fw-semi); margin-top: 2px; }
a.tg-project:hover .tg-project__cta { text-decoration: underline; }

/* An accented word inside a hub hero heading (tg_rt_accent). The shop hero's
   equivalent lives in home.css, which a hub page does not load, so the rule is
   repeated here rather than reached for across stylesheets. On this dark ground
   the brighter green reads; --tg-green-strong is for light grounds. */
.tg-hub-hero__title .tg-accent { color: var(--tg-green); }
.tg-projects__lead { margin: calc(var(--tg-sp-6) * -1 + var(--tg-sp-2)) 0 var(--tg-sp-6); max-width: 60ch; color: var(--tg-n-300); }
.tg-projects:not(.tg-projects--dark) .tg-projects__lead { color: var(--tg-text-muted); }
/* An explicit column count, for a band whose item count does not sit well in
   the default 3-up (four booklets leave one stranded on its own row). */
@media (min-width: 700px) {
	.tg-projects__grid.tg-projects--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.tg-projects__grid.tg-projects--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tg-projects__grid.tg-projects--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}