/* Tektonic Ski Affiliate — front-end styling.
   Palette and card styling are matched to icanski.co.uk: dark green buy
   buttons, bold price display, generous white space, pink page headings. */

.tsa-page-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 20px 60px;
}

.tsa-page-title {
	color: var(--tsa-accent, #d81b8f);
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}

/* The affiliate disclosure, back under the title as of v2.19.4 — ASA/CAP
   Code guidance is specific that this needs to be clear to the reader
   before they reach the affiliate links themselves, so a bottom-of-page
   placement (tried briefly in v2.19.3) isn't good enough. Restyled here to
   blend into the page instead of standing out as a boxed grey banner: no
   border or background, small italic type in the page's own muted tone. */
.tsa-disclosure {
	max-width: 700px;
	margin: 0 auto 30px;
	color: #888;
	font-size: 13px;
	font-style: italic;
	text-align: center;
}

/* The written review — full width, above the product grid / Knowledge split */

.tsa-review-content {
	max-width: 900px;
	margin: 0 auto 50px;
	font-size: 16px;
	line-height: 1.7;
}

.tsa-review-content h2 {
	color: #333;
	margin-top: 1.4em;
}

.tsa-review-content h3 {
	color: var(--tsa-accent, #d81b8f);
	margin-top: 1.2em;
}

/* 50/50 split below the review — product grid left, Knowledge/Guides aside right */

.tsa-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: start;
}

.tsa-split-aside {
	position: sticky;
	top: 20px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

/* Stack to a single column on narrower screens — product grid first, aside below */
@media (max-width: 900px) {

	.tsa-split {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.tsa-split-aside {
		position: static;
		max-height: none;
		overflow-y: visible;
	}

}

.tsa-comparison {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* The grid layout used by the template's product column — image, price,
   Buy Now and the Ad badge stay visible on every card; everything else
   (title, rating, availability, matched Knowledge terms) sits behind the
   native <details>/<summary> "See more" toggle below, so it works with no
   JavaScript at all */

.tsa-comparison-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}

.tsa-comparison-grid .tsa-product-card {
	background: var(--tsa-product-card-bg, #fff);
	border: 1px solid var(--tsa-product-card-border, #e0e0e0);
	border-radius: 8px;
	padding: 20px;
}

.tsa-product-card {
	border-top: 1px solid var(--tsa-product-card-border, #e0e0e0);
	padding-top: 24px;
	text-align: center;
}

.tsa-product-card:first-child {
	border-top: none;
	padding-top: 0;
}

.tsa-comparison-grid .tsa-product-card:first-child {
	border: 1px solid var(--tsa-product-card-border, #e0e0e0);
	padding: 20px;
}

.tsa-product-card img {
	max-width: 100%;
	max-height: 260px;
	object-fit: contain;
	margin-bottom: 14px;
}

/* Belt-and-braces alongside the title fix above — a fixed height (rather
   than just the max-height cap already in place) means two images of
   different natural proportions still take up exactly the same space, so
   nothing beneath them can be thrown out of line by the image itself.
   Added in v2.19.4. */
.tsa-comparison-grid-single .tsa-product-card img {
	height: 260px;
}

/* The Grid card's own title, added in v2.18.0 — sits immediately under the
   image so a page with several products doesn't read as a wall of
   near-identical images until you click into each one */

.tsa-product-card-title {
	font-size: 15px;
	font-weight: bold;
	color: var(--tsa-product-title-colour, #222);
	margin: 0 0 4px;
	line-height: 1.3;
}

/* The same product title, repeated inside the Grid card's "See more" modal
   (see class-tsa-shortcode.php) — kept as its own class rather than reusing
   .tsa-product-card-title above so the modal's heading tag can be styled
   at whatever size fits there, while still sharing the same configurable
   colour. Font size deliberately left to the theme/browser default for
   whichever heading tag Settings has chosen, per Tim's instruction that
   font face and size stay under the theme's own control. */
.tsa-modal-title {
	color: var(--tsa-product-title-colour, #222);
	margin: 0 0 8px;
}

/* A short title sits on one line, a long one wraps to two — left as-is,
   every title would end at a different height and the price/Buy Now/See
   more underneath would go out of line with the next card along. Reserving
   room for two lines here, regardless of how many a given title actually
   needs, means every card's price starts from the same height. Capped at
   two lines (rather than left to grow further for a very long title) so a
   third line can never push things out of line the other way. Scoped to
   the Grid layout only — a Verbose row's title has no such issue, since it
   sits beside the AI text rather than stacked above other elements.
   Added in v2.19.4. */
.tsa-comparison-grid-single .tsa-product-card-title {
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tsa-price {
	font-size: 22px;
	font-weight: bold;
	color: var(--tsa-product-price-colour, #222);
	margin: 8px 0;
}

.tsa-buy-button {
	display: inline-block;
	margin: 6px 0 14px;
	padding: 10px 34px;
	background: var(--tsa-button-bg, #2f5233);
	color: var(--tsa-button-text, #fff);
	text-decoration: none;
	border-radius: 4px;
	font-weight: bold;
	font-size: 15px;
}

.tsa-buy-button:hover {
	background: var(--tsa-button-hover, #24401f);
	color: var(--tsa-button-text, #fff);
}

/* The "See more" disclosure — a native <details>/<summary>, so it works
   with no JavaScript at all. Image, price, Buy Now and the Ad badge stay
   outside it, always visible; everything else opens on click. */

.tsa-product-details {
	text-align: left;
	margin-top: 12px;
}

.tsa-product-details summary {
	cursor: pointer;
	color: var(--tsa-accent, #d81b8f);
	font-size: 13px;
	font-weight: bold;
	list-style: none;
	text-align: center;
}

.tsa-product-details summary::-webkit-details-marker {
	display: none;
}

.tsa-product-details summary::after {
	content: ' ▾';
}

.tsa-product-details[open] summary::after {
	content: ' ▴';
}

.tsa-product-details h4 {
	font-size: 15px;
	font-weight: normal;
	color: #555;
	margin: 10px 0 4px;
}

.tsa-rating,
.tsa-availability {
	margin: 2px 0;
	font-size: 13px;
	color: #777;
}

.tsa-product-terms {
	margin: 4px 0 0;
	font-size: 12px;
	color: #777;
}

.tsa-product-terms a {
	color: var(--tsa-accent, #d81b8f);
	text-decoration: none;
	border-bottom: 1px dotted var(--tsa-accent, #d81b8f);
}

.tsa-product-terms a:hover {
	color: var(--tsa-accent-hover, #a5136c);
	border-bottom-color: var(--tsa-accent-hover, #a5136c);
	border-bottom-style: solid;
}

.tsa-knowledge-entry:target {
	scroll-margin-top: 20px;
	background: #fff3cd;
	border-radius: 4px;
	padding: 10px;
	margin-left: -10px;
	margin-right: -10px;
}

.tsa-last-checked {
	font-size: 12px;
	color: #999;
	text-align: right;
	margin-top: 20px;
}

/* "The Knowledge" — a standout panel in the aside column, set apart from
   the Category Guides panel below it with its own tint and accent border */

.tsa-knowledge {
	background: #fdf1f8;
	border: 1px solid #f3c9e3;
	border-left: 4px solid var(--tsa-accent, #d81b8f);
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 30px;
}

.tsa-knowledge-title {
	color: #333;
	margin: 0 0 20px;
}

.tsa-knowledge-entry {
	margin-bottom: 24px;
}

.tsa-knowledge-entry:last-child {
	margin-bottom: 0;
}

.tsa-knowledge-term {
	color: var(--tsa-accent, #d81b8f);
	margin: 0 0 6px;
}

.tsa-knowledge-precis {
	font-size: 15px;
	line-height: 1.6;
	color: #333;
	margin: 0;
}

.tsa-knowledge-definition {
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}

/* "Category Guides" — a second aside panel below The Knowledge, in a
   neutral tint so the two stay visually distinct. Its own heading level
   per guide, since a review can pull in more than one (e.g. a Visor
   review showing both the helmet fitting guide and the lens type guide) */

.tsa-guides {
	background: #f7f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 24px;
}

.tsa-guide-entry {
	margin-bottom: 40px;
}

.tsa-guide-entry:last-child {
	margin-bottom: 0;
}

.tsa-guide-title {
	color: #333;
	margin: 0 0 14px;
}

.tsa-guide-precis {
	font-size: 15px;
	line-height: 1.6;
	color: #333;
	margin: 0;
}

.tsa-guide-content {
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}

/* The "Read more" button shared by The Knowledge and Category Guides
   precis text, and the native <dialog> modal it opens */

.tsa-read-more {
	display: inline;
	margin-left: 4px;
	padding: 0;
	border: none;
	background: none;
	color: var(--tsa-accent, #d81b8f);
	font-weight: bold;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.tsa-read-more:hover {
	color: var(--tsa-accent-hover, #a5136c);
}

/* The Grid product card's "See more" — a real button, not the plain
   underlined text link above, with its own configurable colour scheme
   (TEKpi → Settings → Appearance) so it reads as a distinct action from
   Buy Now rather than a caption. Added in v2.18.0. */

.tsa-see-more-button {
	display: inline-block;
	margin: 4px 0 0;
	padding: 8px 24px;
	border: none;
	border-radius: 4px;
	background: var(--tsa-see-more-bg, #3c434a);
	color: var(--tsa-see-more-text, #fff);
	font-weight: bold;
	font-size: 13px;
	cursor: pointer;
}

.tsa-see-more-button:hover {
	background: var(--tsa-see-more-hover, #23282d);
	color: var(--tsa-see-more-text, #fff);
}

/* The "inline" alternative to the modal popup — a native <details>, the
   same zero-JavaScript disclosure already used for the product cards'
   "See more", selected from TEKpi → Settings → Appearance */

.tsa-inline-expand {
	margin-top: 8px;
}

.tsa-inline-expand summary {
	cursor: pointer;
	color: var(--tsa-accent, #d81b8f);
	font-size: 13px;
	font-weight: bold;
	list-style: none;
}

.tsa-inline-expand summary::-webkit-details-marker {
	display: none;
}

.tsa-inline-expand summary::after {
	content: ' ▾';
}

.tsa-inline-expand[open] summary::after {
	content: ' ▴';
}

.tsa-inline-expand .tsa-knowledge-definition,
.tsa-inline-expand .tsa-guide-content {
	margin-top: 10px;
}

.tsa-modal {
	max-width: 640px;
	width: calc(100% - 40px);
	max-height: calc(100vh - 80px);
	border: none;
	border-radius: 8px;
	padding: 0;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.tsa-modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.tsa-modal-content {
	position: relative;
	padding: 30px;
	overflow-y: auto;
	max-height: calc(100vh - 80px);
}

.tsa-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	z-index: 1;
	border: none;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #777;
	cursor: pointer;
	padding: 4px;
}

.tsa-modal-close:hover {
	color: #333;
}

/* The theme's own logo (Appearance → Customize → Site Identity), shown
   centred at the top of every modal — purely cosmetic branding, so it's
   simply skipped (see render_modal_logo() in class-tsa-glossary.php) on
   any theme that has no custom logo set */

.tsa-modal-logo-wrap {
	text-align: center;
	margin-bottom: 16px;
}

.tsa-modal-logo {
	display: inline-block;
	max-height: 75px;
	width: auto;
}

.tsa-modal-body {
	font-size: 15px;
	line-height: 1.7;
	color: #333;
	margin-top: 10px;
}

/* The Grid card's own product image, repeated inside its "See more" modal —
   added in v2.19.0, sits centred above the title. */
.tsa-modal-product-image {
	display: block;
	max-width: 100%;
	max-height: 260px;
	margin: 0 auto 16px;
}

/* v2.13.0 — products are now their own post type (see
   class-tsa-product.php), and a Review allocates them to itself in order.
   The default template's main column becomes 60% (intro plus stacked
   product rows) with the aside at 40%, rather than the original 50/50
   grid+aside above — which stays completely unchanged, and is still what
   renders for any Review that pre-dates this change and has nothing
   allocated via "_tsa_product_ids". */

.tsa-split-60-40 {
	grid-template-columns: 60% 40%;
}

@media (max-width: 900px) {

	.tsa-split-60-40 {
		grid-template-columns: 1fr;
	}

}

.tsa-product-rows {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Grid display style, added in v2.19.0 — replaces the flex column above with
   a proper multi-column grid, "--tsa-grid-columns" set inline per Review by
   templates/single-tsa_review.php (the Review's own override, or the
   site-wide TEKpi -> Settings -> Appearance default). Falls back to 3
   columns if the custom property is ever missing for any reason. */
.tsa-product-rows-grid {
	display: grid;
	grid-template-columns: repeat( var( --tsa-grid-columns, 3 ), 1fr );
	gap: 24px;
}

@media ( max-width: 600px )
{
	.tsa-product-rows-grid {
		grid-template-columns: 1fr;
	}
}

/* One product's "Verbose" row — image/price/Buy Now in one column, that
   product's own AI-written text in the other. Which column holds which is
   decided by the row's own two classes below, not by CSS alone: the
   media/text markup itself is swapped server-side for the "right" side
   (see TSA_Shortcode::render_product_row()), so each class here only
   needs to describe "first column, second column". */

.tsa-product-row {
	display: grid;
	gap: 24px;
	align-items: start;
	background: var(--tsa-product-card-bg, #fff);
	border: 1px solid var(--tsa-product-card-border, #e0e0e0);
	border-radius: 8px;
	padding: 24px;
}

.tsa-product-row-image-left {
	grid-template-columns: 40% 60%;
}

.tsa-product-row-image-right {
	grid-template-columns: 60% 40%;
}

.tsa-product-row-media {
	text-align: center;
}

.tsa-product-row-media img {
	max-width: 100%;
	max-height: 260px;
	object-fit: contain;
	margin-bottom: 14px;
}

.tsa-product-row-text {
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}

.tsa-product-row-title {
	color: var(--tsa-product-title-colour, #333);
	margin: 0 0 10px;
}

@media (max-width: 700px) {

	.tsa-product-row-image-left,
	.tsa-product-row-image-right {
		grid-template-columns: 1fr;
	}

}

/* The "Grid" alternative to the Verbose row above — just the image, price
   and Buy Now, always visible, with a "See more" that opens a modal (the
   same native <dialog> mechanism as The Knowledge / Category Guides
   further up this file) holding the full product detail, that product's
   own AI-written text, and a second Buy Now button — rather than the
   original inline <details> "See more" the 50/50 grid above still uses. */

/* Grid cells stretch to the tallest card in their row by default (see
   .tsa-product-rows-grid above, which no longer overrides that), so both
   this wrapper and the card itself are made flex columns filling the full
   cell height — otherwise "stretch" would only affect this outer wrapper,
   leaving the card itself (and its Buy Now button) sized to its own
   content and out of line with its neighbours. The Buy Now button's
   top margin is then pushed to fill the remaining space, so Buy Now (and
   the See more button directly under it) land on the same horizontal line
   across every card in the row regardless of how much title/price text
   each one has. Added in v2.19.2. */
.tsa-comparison-grid-single {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-bottom: 0;
}

.tsa-comparison-grid-single .tsa-product-card {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	max-width: 100%;
	margin: 0;
}

.tsa-comparison-grid-single .tsa-buy-button {
	margin-top: auto;
}

.tsa-modal-features {
	margin: 10px 0;
	padding-left: 20px;
	font-size: 14px;
	color: #333;
}

/* The "Verdict" panel, added in v2.15.0 — the AI-generated "Best Buy" /
   Runner-up comparison across every product currently listed against a
   review (see class-tsa-template.php's render_verdict_panel()). Sits full
   width, below the product rows/grid and aside. */

.tsa-verdict {
	background: #fdf1f8;
	border: 1px solid #f3c9e3;
	border-left: 4px solid var(--tsa-accent, #d81b8f);
	border-radius: 8px;
	padding: 24px;
	margin-top: 30px;
}

.tsa-verdict h2 {
	color: #333;
	margin: 0 0 16px;
}

.tsa-verdict p {
	margin: 0 0 12px;
}

.tsa-verdict p:last-child {
	margin-bottom: 0;
}

/* Category's own front-end page — added v2.25.0. Deliberately full width
   (no aside), so .tsa-page-wrap's own max-width is left as the only
   constraint — no split/aside markup is rendered on this template at all. */

.tsa-category-intro {
	max-width: 760px;
	margin: 0 auto 30px;
	text-align: center;
	color: #444;
}

.tsa-category-intro p:last-child {
	margin-bottom: 0;
}

.tsa-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

.tsa-category-card {
	display: block;
	background: var(--tsa-product-card-bg, #fff);
	border: 1px solid var(--tsa-product-card-border, #e0e0e0);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tsa-category-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.tsa-category-card-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f7f7f7;
}

.tsa-category-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsa-category-card-title {
	margin: 14px 16px 6px;
	font-size: 17px;
	color: var(--tsa-product-title-colour, #222);
}

.tsa-category-card-excerpt {
	margin: 0 16px 16px;
	font-size: 14px;
	color: #555;
	line-height: 1.5;
}

.tsa-category-empty {
	text-align: center;
	color: #757575;
}