/*
 * Homepage sections. Enqueued only on the front page.
 * Dark editorial hero/explore + light retail lower sections.
 */

/* Shared section furniture (.tg-section-head, .tg-chip, .tg-badge, etc.) now lives in components.css. */

/* ===== Hero ===== */
.tg-hero {
	position: relative; background: var(--tg-black); color: #fff;
	background-image: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%), var(--tg-hero-img, none);
	background-size: cover; background-position: center;
}
.tg-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-6); padding-block: var(--tg-sp-8); }
.tg-hero__title { font-size: clamp(2.75rem, 8vw, 5rem); line-height: .95; margin: 0 0 var(--tg-sp-4); text-transform: uppercase; }
.tg-hero__accent { color: var(--tg-green); }
.tg-hero__lead { max-width: 42ch; font-size: var(--tg-fs-md); color: var(--tg-n-200); }
.tg-hero__cta { display: flex; gap: var(--tg-sp-3); flex-wrap: wrap; margin-top: var(--tg-sp-5); }
.tg-hero__cta .tg-btn--outline { color: #fff; }

.tg-hero__aside { display: grid; gap: var(--tg-sp-4); align-content: start; }
.tg-hero__breaking {
	display: block; background: rgba(20,20,20,.82); border: var(--tg-bw) solid var(--tg-n-800);
	border-radius: var(--tg-radius-lg); padding: var(--tg-sp-5); color: #fff;
}
.tg-hero__breaking:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-hero__breaking h2 { font-size: var(--tg-fs-lg); margin: var(--tg-sp-3) 0; }
.tg-hero__breaking-meta { color: var(--tg-n-400); font-size: var(--tg-fs-sm); margin: 0 0 var(--tg-sp-4); }
.tg-hero__breaking-cta { pointer-events: none; }
.tg-hero__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tg-sp-3); }
.tg-hero__tile { display: flex; flex-direction: column; gap: var(--tg-sp-2); background: rgba(20,20,20,.82); border: var(--tg-bw) solid var(--tg-n-800); border-radius: var(--tg-radius); padding: var(--tg-sp-4); color: #fff; }
.tg-hero__tile:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-hero__tile-title { font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); line-height: 1.3; }
.tg-hero__tile-meta { color: var(--tg-n-500); font-size: var(--tg-fs-xs); margin-top: auto; }

@media (min-width: 900px) {
	.tg-hero__inner { grid-template-columns: 1.15fr .85fr; align-items: center; padding-block: var(--tg-sp-9); }
}

/* ===== Trust strip ===== */
.tg-trust { background: var(--tg-n-900); border-block: var(--tg-bw) solid var(--tg-n-800); }
.tg-trust__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tg-sp-4); padding-block: var(--tg-sp-5); }
.tg-trust__item { display: flex; align-items: center; gap: var(--tg-sp-3); color: #fff; }
.tg-trust__icon { width: 26px; height: 26px; color: var(--tg-green); flex: 0 0 auto; }
.tg-trust__item strong { display: block; font-size: var(--tg-fs-sm); }
.tg-trust__item span { display: block; font-size: var(--tg-fs-xs); color: var(--tg-n-400); }
@media (min-width: 768px) { .tg-trust__row { grid-template-columns: repeat(5, 1fr); } }

/* ===== Explore tiles ===== */
.tg-explore__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tg-sp-4); }
.tg-explore__tile {
	position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--tg-sp-6);
	min-height: 180px; padding: var(--tg-sp-4);
	border-radius: var(--tg-radius-lg); overflow: hidden; color: #fff;
	background: linear-gradient(155deg, var(--tg-n-800) 0%, var(--tg-black) 70%);
	border: var(--tg-bw) solid var(--tg-n-800);
	transition: border-color var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease), background var(--tg-dur) var(--tg-ease);
}
.tg-explore__tile:hover { text-decoration: none; border-color: var(--tg-green); transform: translateY(-3px); background: linear-gradient(155deg, var(--tg-n-700) 0%, var(--tg-black) 70%); }
.tg-explore__tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--tg-radius); background: rgba(120,200,40,.12); color: var(--tg-green); }
.tg-explore__tile-body { width: 100%; }
.tg-explore__tile-title { display: block; font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: var(--tg-fs-lg); }
.tg-explore__tile-sub { display: block; font-size: var(--tg-fs-sm); color: var(--tg-n-300); }
.tg-explore__tile-arrow { position: absolute; top: var(--tg-sp-4); right: var(--tg-sp-4); color: var(--tg-n-500); transform: rotate(-90deg); transition: color var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease); }
.tg-explore__tile:hover .tg-explore__tile-arrow { color: var(--tg-green); transform: rotate(-90deg) translateX(3px); }
@media (min-width: 700px) { .tg-explore__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tg-explore__grid { grid-template-columns: repeat(6, 1fr); } }

/* ===== Latest from the pitch ===== */
.tg-latest { background: var(--tg-bg); color: var(--tg-text); }
.tg-latest__tabs { display: flex; gap: var(--tg-sp-3); overflow-x: auto; padding-bottom: var(--tg-sp-4); scrollbar-width: none; }
.tg-latest__tabs::-webkit-scrollbar { display: none; }
.tg-latest__grid { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-5); }
@media (min-width: 640px) { .tg-latest__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tg-latest__grid { grid-template-columns: repeat(4, 1fr); } }

/* .tg-post-card now lives in components.css (used across news pages too). */

/* ===== Kit + Club Shop ===== */
.tg-kit__grid { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-5); }
.tg-kit__panel { border-radius: var(--tg-radius-lg); padding: var(--tg-sp-7); }
.tg-kit__panel--teamwear { background: linear-gradient(135deg, #143a12, #0e0e0e); color: #fff; }
.tg-kit__panel--clubshop { background: var(--tg-paper); color: var(--tg-ink); border: var(--tg-bw) solid var(--tg-border); }
.tg-kit__eyebrow { text-transform: uppercase; letter-spacing: .06em; color: var(--tg-green); font-weight: var(--tg-fw-bold); margin: 0; }
.tg-kit__title { font-size: var(--tg-fs-2xl); margin: var(--tg-sp-2) 0 var(--tg-sp-4); text-transform: uppercase; }
.tg-kit__list { list-style: none; padding: 0; margin: 0 0 var(--tg-sp-5); display: grid; gap: var(--tg-sp-2); }
.tg-kit__list li { display: flex; align-items: center; gap: var(--tg-sp-2); }
.tg-kit__list svg { color: var(--tg-green); flex: 0 0 auto; }
.tg-kit__lead { font-size: var(--tg-fs-md); max-width: 34ch; margin-bottom: var(--tg-sp-5); }
@media (min-width: 900px) { .tg-kit__grid { grid-template-columns: 1.4fr 1fr; } }

/* ===== Brands ===== */
.tg-brands__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tg-sp-4); align-items: center; }
.tg-brands__item { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: var(--tg-sp-3); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); color: var(--tg-text); }
.tg-brands__item:hover { text-decoration: none; border-color: var(--tg-border-strong); }
.tg-brands__logo { max-height: 40px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter var(--tg-dur), opacity var(--tg-dur); }
.tg-brands__item:hover .tg-brands__logo { filter: none; opacity: 1; }
.tg-brands__name { font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: var(--tg-fs-lg); text-transform: uppercase; }
@media (min-width: 700px) { .tg-brands__row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .tg-brands__row { grid-template-columns: repeat(8, 1fr); } }

/* ===== Best sellers / product grid ===== */
.tg-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tg-sp-5); }
@media (min-width: 700px) { .tg-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tg-product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tg-product-card { display: flex; flex-direction: column; }
.tg-product-card__media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--tg-radius); overflow: hidden; background: var(--tg-paper); }
.tg-product-card__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tg-product-card__brand { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); text-transform: uppercase; letter-spacing: .04em; margin: var(--tg-sp-3) 0 2px; }
.tg-product-card__title { font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); margin: 0 0 var(--tg-sp-2); line-height: 1.3; }
.tg-product-card__title a { color: inherit; }
.tg-product-card__price { font-weight: var(--tg-fw-bold); margin: 0; }

/* ===== Shop landing ===== */
/* Black product-navigation strip */
.tg-prodnav { background: var(--tg-black); }
.tg-prodnav__row { display: flex; gap: var(--tg-sp-5); overflow-x: auto; padding-block: var(--tg-sp-3); scrollbar-width: none; }
.tg-prodnav__row::-webkit-scrollbar { display: none; }
.tg-prodnav__row a { color: #fff; font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.tg-prodnav__row a:hover { color: var(--tg-green); text-decoration: none; }
.tg-prodnav__all { color: var(--tg-green) !important; }

/* Shop by Need */
.tg-shopneed { background: var(--tg-white); color: var(--tg-ink); }
.tg-shopneed__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--tg-sp-4); }
@media (min-width: 700px) { .tg-shopneed__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1000px) { .tg-shopneed__grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.tg-shopneed__card { display: flex; flex-direction: column; gap: 2px; padding: var(--tg-sp-4); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); color: var(--tg-ink); }
.tg-shopneed__card:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-shopneed__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--tg-radius); background: var(--tg-green-soft); color: var(--tg-green-strong); margin-bottom: var(--tg-sp-2); }
.tg-shopneed__label { font-weight: var(--tg-fw-bold); font-size: var(--tg-fs-sm); }
.tg-shopneed__sub { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

/* Product feed carousels (two-card horizontal on mobile) */
.tg-feed { background: var(--tg-white); color: var(--tg-ink); }
.tg-feed__track { display: grid; grid-auto-flow: column; grid-auto-columns: 45%; gap: var(--tg-sp-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--tg-sp-3); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tg-feed__track::-webkit-scrollbar { display: none; }
.tg-feed__item { scroll-snap-align: start; }
@media (min-width: 620px) { .tg-feed__track { grid-auto-columns: 30%; } }
@media (min-width: 1000px) { .tg-feed__track { grid-auto-columns: 18%; } }

/* Shop routes */
.tg-shoproutes { background: var(--tg-paper); color: var(--tg-ink); }
.tg-shoproutes__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--tg-sp-4); }
@media (min-width: 800px) { .tg-shoproutes__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tg-shoproute { display: flex; align-items: center; gap: var(--tg-sp-3); padding: var(--tg-sp-4); background: var(--tg-white); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); color: var(--tg-ink); }
.tg-shoproute:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-shoproute svg { color: var(--tg-green); flex: 0 0 auto; }
.tg-shoproute strong { display: block; }
.tg-shoproute span { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }
.tg-shoproute span strong { font-size: var(--tg-fs-sm); color: var(--tg-ink); }

.tg-shop-hero__inner { padding-block: var(--tg-sp-8); max-width: var(--tg-maxw-text); }
.tg-shop-hero__search { margin: var(--tg-sp-5) 0; }
.tg-shop-hero__search .tg-search { background: #fff; border-radius: var(--tg-radius-pill); }
.tg-shop-hero__search { max-width: 560px; }
.tg-shop-hero__search .tg-search { padding-right: var(--tg-sp-2); }
.tg-shop-hero__search .tg-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--tg-ink); }
.tg-shop-hero__search .tg-search__submit { color: var(--tg-ink); }

/* Shop hero photography (art-directed <picture>: 1920x800 desktop, 1080x1350 mobile).
   Desktop: subject right, copy on a left-weighted scrim. Mobile: subject up top,
   copy on a bottom scrim (approved mobile shop journey). */
.tg-shop-hero--photo { overflow: hidden; background-image: none; isolation: isolate; }
.tg-shop-hero__media { position: absolute; inset: 0; z-index: -2; display: block; }
.tg-shop-hero__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 30%; }
.tg-shop-hero--photo::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.15) 62%, rgba(0,0,0,.05) 100%),
		linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%);
}
.tg-shop-hero--photo .tg-shop-hero__inner { position: relative; max-width: var(--tg-maxw); min-height: clamp(420px, 41.7vw, 600px); display: flex; flex-direction: column; justify-content: center; }
.tg-shop-hero--photo .tg-shop-hero__inner > * { max-width: 600px; }
.tg-shop-hero .tg-hero__accent { display: block; } /* approved copy: accent line sits on its own row */
@media (max-width: 767px) {
	.tg-shop-hero--photo .tg-shop-hero__inner { min-height: 0; padding-top: min(78vw, 360px); padding-bottom: var(--tg-sp-6); }
	/* Image keeps its 4:5 crop at the top; it fades into the black section behind the copy. */
	.tg-shop-hero__media { display: block; inset: 0 0 auto 0; aspect-ratio: 4 / 5; }
	.tg-shop-hero__media img { object-position: 50% 0; }
	.tg-shop-hero--photo::before { display: none; }
	.tg-shop-hero__media::after {
		content: ""; position: absolute; inset: 0;
		background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.2) 45%, rgba(14,14,14,.85) 72%, var(--tg-black) 100%);
	}
}
.tg-shopcats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tg-sp-4); }
@media (min-width: 700px) { .tg-shopcats__grid { grid-template-columns: repeat(4, 1fr); } }
.tg-shopcat {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 150px; padding: var(--tg-sp-4); border-radius: var(--tg-radius-lg); overflow: hidden;
	color: #fff; background: linear-gradient(160deg, var(--tg-n-700), var(--tg-black)), var(--tg-tile-img, none);
	background-size: cover; background-position: center; background-blend-mode: overlay;
}
.tg-shopcat:hover { text-decoration: none; box-shadow: var(--tg-shadow-lg); }
.tg-shopcat__label { font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: var(--tg-fs-lg); text-transform: uppercase; }
.tg-shopcat__count { font-size: var(--tg-fs-xs); color: var(--tg-n-300); }
.tg-shopcats, .tg-feed, .tg-shop-hero + .tg-trust { background: var(--tg-white); color: var(--tg-ink); }
/* Light trust strip under the shop hero: its item text is white by default (dark homepage strip). */
.tg-shop-hero + .tg-trust .tg-trust__item { color: var(--tg-ink); }
.tg-shop-hero + .tg-trust .tg-trust__item span { color: var(--tg-text-muted); }

/* Lower retail sections sit on a light surface even though body is dark. */
.tg-latest, .tg-kit, .tg-brands, .tg-bestsellers { background: var(--tg-white); color: var(--tg-ink); }
.tg-latest .tg-viewall, .tg-kit .tg-viewall, .tg-brands .tg-viewall, .tg-bestsellers .tg-viewall { color: var(--tg-green-strong); }