/*
 * PDP documents section.
 * Loaded on single product pages only, after style.css and responsive-fixes.css.
 *
 * Built to the V5 wireframe's "All documents" band: a heading row with the
 * language switch on the right, the primary document types as tiles, then the
 * remaining documents in a two-column list.
 */

/*
 * Shares the theme's tokens. See css/product-detail.css for why gold text on
 * white uses --color-primary-dark, and :root in style.css for --pdp-radius,
 * the one switch that rounds or squares the site.
 *
 * The radius fallbacks below are no longer reached. They were there because
 * --pdp-radius used to be defined in css/product-detail.css, which only loads
 * on products using the V5 layout, so this section stayed square on the old
 * product template. The token is global now, so the old template follows the
 * switch with everything else. Kept as a belt on a file that renders on every
 * product.
 */
:root {
	--pdp-doc-line: #d5d0c8;
	--pdp-doc-muted: #f5f3ef;
	--pdp-doc-ink: #262524;
	--pdp-doc-ink-2: #262524;   /* one text colour across the page, per review */
	--pdp-doc-gray: #6b6661; /* #156: was #7c7770, 4.4:1 on white */
	--pdp-doc-display: "Erbaum", sans-serif;
}

.treg-pdp-docs {
	margin: 48px 0;
}

/*
 * The language switch hides documents with the `hidden` property. The browser's
 * own `[hidden] { display: none }` lives in the user-agent stylesheet, so ANY
 * author-level display declaration outranks it — including `display: flex` on
 * the tiles below, and the theme's own rules on list items. Without this, the
 * filter sets the property correctly and nothing moves on screen.
 */
.treg-pdp-docs [hidden] {
	display: none !important;
}

.treg-pdp-docs__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

/* Eyebrow and heading travel together as one flex child, so the language
   switch still sits opposite the title rather than opposite the eyebrow. */
.treg-pdp-docs__heading {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.treg-pdp-docs__eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.treg-pdp-docs__title {
	margin: 0;
}

/*
 * V5 only: the band heading V7 gives this section, matching the content and
 * where-to-buy bands below it. Scoped, because --pdp-doc-display resolves to
 * Oswald and the webfont is declared in css/product-detail.css, which only
 * loads on products using the V5 layout. Everywhere else this would set a face
 * the page has not downloaded and fall through to Erbaum at V7's sizes.
 */
.pdp-docs-band .treg-pdp-docs__eyebrow {
	font-family: var(--pdp-doc-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
}

.pdp-docs-band .treg-pdp-docs__title {
	font-family: var(--pdp-doc-display);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.2px;
	/* Headlines in caps (#138). */
	text-transform: uppercase;
}

/* ---------------------------------------------------------- Language switch */

.treg-pdp-docs__lang {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/*
 * One bordered group with hairlines between the buttons, rather than three
 * loose ones. overflow: hidden is what clips the buttons to the rounded
 * corners, so the fill of the selected end button follows the frame.
 */
.treg-pdp-docs__lang-switch {
	display: inline-flex;
	gap: 0;
	border: 1px solid var(--pdp-doc-line);
	border-radius: var(--pdp-radius-sm, 0);
	overflow: hidden;
}

.treg-pdp-docs__lang-btn {
	width: 51px;
	height: 42px;
	min-height: 0;
	/* style.css puts margin-left on any button following another button. */
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--pdp-doc-ink);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.treg-pdp-docs__lang-btn + .treg-pdp-docs__lang-btn {
	border-left: 1px solid var(--pdp-doc-line);
}

/*
 * The background has to be set, not just the colour: style.css gives every
 * button a gold background on hover, and `button:hover` outranks this class,
 * so an unstyled hover filled the button with brand gold. Same treatment as
 * the tab strip.
 */
.treg-pdp-docs__lang-btn:hover {
	background: #f4f4f4;
	color: var(--color-primary-dark);
}

/*
 * The darker gold, not brand gold: this carries white text, and white on brand
 * gold is 3.6:1 where on --color-primary-dark it is 6.2:1. The comment here
 * previously said exactly this while the rule underneath set brand gold with
 * dark text; V7 draws it as the dark gold with white, so the rule now matches
 * both the note and the wireframe.
 */
.treg-pdp-docs__lang-btn.is-active,
.treg-pdp-docs__lang-btn.is-active:hover {
	background: var(--color-primary-dark);
	color: #fff;
}

.treg-pdp-docs__lang-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

/* ------------------------------------------------------------- Tile grid */

/*
 * Three fixed tracks, as V7 has it, rather than auto-fit. auto-fit stretches
 * whatever is there to fill the row, so a product with two documents got two
 * half-page tiles; fixed tracks keep a tile the same size whatever the count.
 */
.treg-pdp-docs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

@media (max-width: 860px) {
	.treg-pdp-docs__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.treg-pdp-docs__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Built like the utility tiles on the product page: an icon block flush to the
 * left and the text set in from it.
 *
 * This file loads on every product, not only the ones using the V5 layout, so
 * the default here stays what the old product template was designed against: a
 * white page, so the card takes the tint to read as a card and the icon block
 * is white. The V5 band inverts it below, where the background is tinted.
 */
.treg-pdp-docs__tile,
.treg-pdp-docs__tile:visited {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 8px;
	border: 0;
	border-radius: var(--pdp-radius-sm, 0);
	background: var(--pdp-doc-muted);
	color: var(--pdp-doc-ink);
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.treg-pdp-docs__tile:hover,
.treg-pdp-docs__tile:focus-visible {
	background: #eceae5;
	text-decoration: none;
}

.treg-pdp-docs__tile-icon {
	position: relative;
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: var(--pdp-radius-sm, 0);
	background: #fff;
	transition: background 0.15s;
}

.treg-pdp-docs__tile:hover .treg-pdp-docs__tile-icon {
	background: var(--color-primary);
}

/*
 * V5 only: a white card with an edge and a tinted icon chip, per V7. The band
 * behind it is tinted there, so the surfaces swap round from the default above.
 */
.pdp-docs-band .treg-pdp-docs__tile,
.pdp-docs-band .treg-pdp-docs__tile:visited {
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--pdp-doc-line);
	background: #fff;
}

.pdp-docs-band .treg-pdp-docs__tile:hover,
.pdp-docs-band .treg-pdp-docs__tile:focus-visible {
	border-color: #d6d4cc;
	background: var(--pdp-doc-muted);
}

.pdp-docs-band .treg-pdp-docs__tile-icon {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	background: var(--pdp-doc-muted);
}

/* The glyph is a CSS mask rather than an inline SVG, so the tile markup stays
   readable and every tile picks up its colour from one place. */
.treg-pdp-docs__tile-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 26px;
	height: 26px;
	background: var(--color-primary-dark);
	mask: var(--pdp-doc-icon) center / contain no-repeat;
	-webkit-mask: var(--pdp-doc-icon) center / contain no-repeat;
	--pdp-doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
}

.treg-pdp-docs__tile:hover .treg-pdp-docs__tile-icon::before {
	background: #fff;
}

.treg-pdp-docs__tile-body {
	padding: 0 18px;
}

.pdp-docs-band .treg-pdp-docs__tile-body {
	padding: 0;
}

.pdp-docs-band .treg-pdp-docs__tile-icon::before {
	width: 22px;
	height: 22px;
}

.treg-pdp-docs__tile-body b {
	display: block;
	font-size: 15px;
	line-height: 1.3;
}

.treg-pdp-docs__tile-body span {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--pdp-doc-gray);
}

/* --------------------------------------------------------- More documents */

.treg-pdp-docs__more {
	margin-top: 28px;
}

/* The eyebrow treatment again, one step down, labelling the list below it. */
.treg-pdp-docs__more-label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.pdp-docs-band .treg-pdp-docs__more-label {
	font-family: var(--pdp-doc-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
}

/*
 * A grid rather than CSS columns: columns balance their content, so three of
 * them only stay equal when the item count divides by three. A grid gives three
 * tracks of the same width whatever the count, and reads left to right rather
 * than down one column and back up.
 */
.treg-pdp-docs__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.treg-pdp-docs__list li {
	margin: 0;
}

.treg-pdp-docs__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pdp-doc-line);
	color: var(--pdp-doc-ink);
	font-size: 14.5px;
	text-decoration: none;
}

.treg-pdp-docs__list a:hover,
.treg-pdp-docs__list a:focus-visible {
	color: var(--color-primary-dark);
}

.treg-pdp-docs__meta {
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pdp-doc-gray);
}

.treg-pdp-docs__empty {
	margin-top: 18px;
	color: var(--pdp-doc-gray);
}

@media (max-width: 700px) {
	.treg-pdp-docs__list {
		grid-template-columns: 1fr;
	}

	.treg-pdp-docs__head {
		align-items: flex-start;
	}
}