/**
 * PTA - responsive.css
 * Page-by-page responsive fixes (320 → 1920+). Loaded on every page after the page stylesheet.
 */

/* ---------- About ---------- */
/* Governance stats: "50% +1" / "2/3" never overlap on phones. */
@media (max-width: 480px) {
	.pta-stats .pta-stat { font-size: clamp(30px, 9.5vw, 48px); line-height: 1.1; white-space: nowrap; }
}
@media (max-width: 359px) {
	.pta-stats { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
}
/* Charter cards: number above the text on phones so the text gets the full width. */
@media (max-width: 480px) {
	.pta-numbered--cards > li { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; }
}
/* Secretariat cards: never wider than the screen (long e-mail / address). */
@media (max-width: 1024px) {
	.pta-anchor { grid-template-columns: minmax(0, 1fr); }
	.pta-anchor__cards { min-width: 0; }
}
.pta-anchor__card { min-width: 0; overflow-wrap: break-word; }
.pta-anchor__card a.pta-h4 { white-space: nowrap; }
@media (max-width: 480px) {
	.pta-anchor__card .pta-h3 { font-size: 26px; line-height: 32px; }
	.pta-anchor__card a.pta-h3 { font-size: 22px; line-height: 28px; }
	.pta-anchor__card a.pta-h4 { font-size: clamp(15px, 4.6vw, 20px); }
}
@media (max-width: 480px) {
	.pta-anchor__cards { grid-template-columns: minmax(0, 1fr); }
	.pta-anchor__card { padding: 24px; }
}
/* Small laptops / iPad landscape (900–1024): keep the desktop side-by-side layouts. */
@media (min-width: 900px) and (max-width: 1024px) {
	.pta-about-origin .pta-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
	.pta-anchor { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; }
	.pta-anchor__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.pta-anchor__card { padding: 22px; }
	.pta-anchor__card a.pta-h4 { font-size: 16px; }
}

/* ---------- Toolbars (Events, All Events, Sessions, Repository, Media, Members) ---------- */
/* Phones/tablets: search on its own row, Filters + Sort side by side, result count last. */
@media (max-width: 900px) {
	.pta-toolbar > .pta-toolbar__status { order: 10; flex-basis: 100%; }
	.pta-toolbar > .pta-search { flex: 1 1 100%; }
}
@media (max-width: 480px) {
	.pta-toolbar > .pta-btn, .pta-toolbar > .pta-sort { flex: 1 1 0; min-width: 0; justify-content: center; }
	.pta-toolbar > .pta-sort .pta-sort__btn { width: 100%; justify-content: center; }
}

/* ---------- Events ---------- */
/* Featured event: image beside the details on small laptops / iPad landscape. */
@media (min-width: 900px) and (max-width: 1024px) {
	.pta-featured-event { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.pta-featured-event__media { min-height: 100%; }
	.pta-featured-event__media img { height: 100%; object-fit: cover; }
}

/* All Events + All Sessions directories: 3 cards per row on 900–1024 (2 + big gaps before). */
@media (min-width: 900px) and (max-width: 1024px) {
	.pta-evx__list.pta-evx__grid, .pta-sx-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
/* ---------- Event & session single ---------- */
@media (min-width: 900px) and (max-width: 1024px) { .pta-evx-single { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; } .pta-evx-glance { position: sticky; top: 120px; order: 0; } .pta-sx-single .pta-session { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; } .pta-sx-single .pta-session__aside { position: sticky; top: calc(var(--pta-header-h, 80px) + 24px); order: 0; } }
@media (min-width: 560px) and (max-width: 899px) { .pta-evx-glance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .pta-evx-glance__list li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* ---------- Reserve modal ---------- */
@media (max-width: 480px) { .pta-reserve__sum-text { white-space: normal; text-overflow: clip; } }
/* ---------- Initiatives ---------- */
@media (max-width: 480px) { .pta-init-model .pta-info-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px; align-items: start; } .pta-init-model .pta-info-card__head { grid-row: auto; } .pta-tabpanel__title { flex-direction: column; align-items: flex-start; gap: 4px; } }
@media (min-width: 768px) and (max-width: 1024px) { .pta-steps.pta-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- Members ---------- */
@media (min-width: 900px) and (max-width: 1024px) { .pta-grid:has(> .pta-member) { --pta-cols: 3; gap: 20px; } }
@media (max-width: 480px) { .pta-elig__card { padding: 24px 20px; } }
/* ---------- Join now ---------- */
@media (max-width: 480px) { .pta-upload { flex-direction: column; align-items: stretch; gap: 12px; } .pta-upload__preview { align-self: flex-start; } .pta-upload__info { flex: none; } }
@media (max-width: 380px) { .pta-progress { gap: 2px; } .pta-progress__label > strong { font-size: 12px !important; letter-spacing: -0.01em; } .pta-apply .pta-form-card { padding: 18px; } }
@media (max-width: 400px) { .pta-hs__foot { flex-direction: column-reverse; align-items: stretch; } .pta-hs__foot .pta-hs__btn { flex: none; width: 100%; } }
/* ---------- Media gallery ---------- */
@media (max-width: 767px) { .pta-assets__head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .pta-assets__aside .pta-btn { white-space: normal; text-align: center; width: 100%; justify-content: center; } }
@media (max-width: 480px) { .pta-comm__grid .pta-comm__item strong { font-size: 15px !important; } }
@media (min-width: 901px) and (max-width: 1024px) { .pta-comm__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* ==== Tablet + mobile padding (all pages). Desktop (>1024px) unchanged. ==== */
@media (max-width: 1024px) {
	.pta-hero--home { padding-top: 64px; padding-bottom: 64px; }
	.pta-hero--page { padding-top: 64px; padding-bottom: 64px; }
	.pta-cta { padding: 56px 32px; }
	.pta-footer { padding-top: 64px; }
	.pta-content-article { padding-top: 40px; padding-bottom: 64px; }
	.pta-comm__grid .pta-comm__left { padding: 32px; }
	.pta-featured-event__body.pta-feature { padding: 32px; }
}
@media (max-width: 767px) {
	.pta-hero--home { padding-top: 48px; padding-bottom: 48px; }
	.pta-hero--page { padding-top: 48px; padding-bottom: 56px; }
	.pta-cta { padding: 40px 20px; }
	.pta-footer { padding-top: 48px; }
	.pta-content-article { padding-top: 32px; padding-bottom: 48px; }
	.pta-featured-event__body.pta-feature { padding: 24px; }
	.pta-pdf-box { padding: 24px 20px; }
}
@media (max-width: 400px) { .pta-comm__grid .pta-comm__left { padding: 24px 16px; } .pta-comm__grid .pta-comm__left .pta-h3 { font-size: 26px; line-height: 32px; } .pta-comm__grid .pta-comm__item { padding: 14px; gap: 12px; } .pta-comm__grid .pta-comm__item strong { font-size: 14px !important; overflow-wrap: anywhere !important; } .pta-comm__right .pta-btn { white-space: normal; height: auto; min-height: 44px; padding: 10px 16px; text-align: center; } }
/* ---------- Album single ---------- */
@media (min-width: 900px) and (max-width: 1024px) { .pta-media-masonry { columns: 3; } }
@media (min-width: 768px) and (max-width: 1024px) { .pta-media-more__grid.pta-grid { --pta-cols: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* ---------- Repository ---------- */
@media (min-width: 900px) and (max-width: 1024px) { .pta-content-pubs__grid.pta-grid { --pta-cols: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* ---------- Search / archive ---------- */
@media (min-width: 900px) and (max-width: 1024px) { .pta-globalqa-search__grid.pta-grid { --pta-cols: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* ---------- FAQs ---------- */
@media (min-width: 900px) and (max-width: 1024px) { .pta-faq-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; } .pta-faq-layout__nav { position: sticky; top: calc(var(--pta-header-h, 80px) + 24px); } }
@media (min-width: 560px) and (max-width: 899px) { .pta-faq-layout__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; } }
/* ---------- Forms (small phones) ---------- */
@media (max-width: 400px) { .pta-field:not(:has(textarea)) > label { right: 12px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pta-field.pta-field--select > label { right: 44px; } .pta-contact-stack .pta-form-nav .pta-btn { width: 100%; justify-content: center; } }
/* ---------- Legal pages ---------- */
@media (min-width: 900px) and (max-width: 1024px) { .pta-legal { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; } .pta-legal__toc { position: sticky; top: calc(var(--pta-header-h, 80px) + 24px); } }
@media (min-width: 560px) and (max-width: 899px) { .pta-legal__toc nav > ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; } }

/* Mobile menu: lock scrolling on <html> only. Also hiding overflow on <body> turned it into
 * a scroll container, so the sticky header (and its menu panel) scrolled out of view when the
 * menu was opened on a scrolled page, leaving only the dimmed overlay. */
html.pta-nav-open body { overflow: visible; }

/* ==========================================================================
   Mobile & tablet QA fixes (Oct 2026 - "Mobile and Tablet Testing Issues")
   ========================================================================== */

/* Global type scale: slightly smaller headings on tablet and mobile. */
@media (max-width: 1024px) {
	:root {
		--pta-fs-display: 50px; --pta-lh-display: 56px;
		--pta-fs-h1: 40px; --pta-lh-h1: 48px;
		--pta-fs-h2: 31px; --pta-lh-h2: 39px;
		--pta-fs-h3: 24px; --pta-lh-h3: 32px;
		--pta-fs-h4: 20px; --pta-lh-h4: 28px;
		--pta-fs-lead: 18px; --pta-lh-lead: 28px;
	}
}
@media (max-width: 767px) {
	:root {
		--pta-gutter: 20px;
		--pta-fs-display: 40px; --pta-lh-display: 46px;
		--pta-fs-h1: 31px; --pta-lh-h1: 38px;
		--pta-fs-h2: 26px; --pta-lh-h2: 33px;
		--pta-fs-h3: 22px; --pta-lh-h3: 29px;
		--pta-fs-h4: 18px; --pta-lh-h4: 26px;
		--pta-fs-stat: 32px; --pta-lh-stat: 36px;
		--pta-fs-lead: 16px; --pta-lh-lead: 26px;
		--pta-fs-hero: 34px; --pta-lh-hero: 41px;
	}
}
/* Same 20px side padding on every page (About used 16px, Home 20px). */
@media (max-width: 400px) {
	:root {
		--pta-gutter: 20px;
		--pta-fs-display: 33px; --pta-lh-display: 40px;
		--pta-fs-hero: 32px; --pta-lh-hero: 38px;
		--pta-fs-h1: 29px; --pta-lh-h1: 36px;
		--pta-fs-h2: 24px; --pta-lh-h2: 31px;
	}
}
@media (max-width: 359px) {
	:root { --pta-gutter: 16px; }
}

/* Hero + section pills stay on one line on phones. */
@media (max-width: 767px) {
	.pta-hero .pta-pill,
	.pta-section-head .pta-pill {
		max-width: 100%;
		font-size: clamp(9px, 2.65vw, 12px);
		letter-spacing: 0.03em;
		white-space: nowrap;
	}
}
/* Section headings under the pills: a step smaller on phones. */
@media (max-width: 767px) {
	.pta-section-head .pta-h2 { font-size: 26px; line-height: 33px; }
}
@media (max-width: 400px) {
	.pta-section-head .pta-h2 { font-size: 24px; line-height: 31px; }
}
@media (max-width: 339px) {
	.pta-hero .pta-pill,
	.pta-section-head .pta-pill { white-space: normal; }
}

/* CTA button pairs: equal widths on every device (stacked on phones). */
:is(.pta-hero .pta-btn-row, .pta-btn-row--center):has(> .pta-btn + .pta-btn):not(:has(> :not(.pta-btn))) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}
:is(.pta-hero .pta-btn-row, .pta-btn-row--center):has(> .pta-btn + .pta-btn):not(:has(> :not(.pta-btn))) > .pta-btn {
	justify-content: center;
}
@media (max-width: 575px) {
	:is(.pta-hero .pta-btn-row, .pta-btn-row--center):has(> .pta-btn + .pta-btn):not(:has(> :not(.pta-btn))) {
		grid-auto-flow: row;
	}
}

/* ---------- Home ---------- */
/* Stacked initiative tabs: title vertically centred with number and arrow. */
@media (max-width: 800px) {
	.pta-pillar__toggle .pta-pillar__label { margin-top: 0; margin-bottom: 0; }
}
/* Eligibility / exclusions (tablet): smaller type, rows aligned across both cards. */
@media (min-width: 768px) and (max-width: 1024px) {
	.pta-elig { row-gap: 0; }
	.pta-elig__card { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; padding: 28px 24px; }
	.pta-elig__list { display: contents; }
	.pta-elig__card .pta-h3 { font-size: 22px; line-height: 30px; margin-bottom: 12px; }
	.pta-elig__list li { padding: 16px 0; }
	.pta-elig__text strong { font-size: 15px; line-height: 22px; }
	.pta-elig__num { font-size: 18px; }
}

/* ---------- About ---------- */
/* Vision / Mission cards: smaller quote text, equal heights. */
@media (max-width: 1024px) {
	.pta-about-vm .pta-info-cards { grid-auto-rows: 1fr; }
	.pta-about-vm .pta-info-card--quote .pta-info-card__text { font-size: 17px; line-height: 28px; }
	/* Charter pillar cards: equal heights. */
	.pta-numbered--cards { grid-auto-rows: 1fr; }
}
@media (max-width: 767px) {
	.pta-about-vm .pta-info-card--quote .pta-info-card__text { font-size: 16px; line-height: 26px; }
}

/* ---------- Events ---------- */
@media (max-width: 1024px) {
	.pta-featured-event__body .pta-h3 { font-size: 26px; line-height: 34px; }
}
@media (max-width: 767px) {
	.pta-featured-event__body .pta-h3 { font-size: 22px; line-height: 30px; }
	.pta-featured-event__foot { justify-content: flex-start; }
	.pta-featured-event__foot .pta-badge-lock { max-width: 100%; padding: 8px 12px; font-size: clamp(10px, 3.1vw, 13px); letter-spacing: 0; white-space: nowrap; }
	.pta-featured-event__foot .pta-evqa-feat__more { margin-left: 0; }
	.pta-sx-card__link { margin-top: 16px; }
	.pta-section.pta-events-past { padding-bottom: 24px; }
}

/* ---------- Initiatives ---------- */
@media (max-width: 1024px) {
	.pta-init-steps .pta-step__num { font-size: 56px; line-height: 56px; }
}
@media (max-width: 767px) {
	.pta-init-steps .pta-step__num { font-size: 44px; line-height: 44px; }
	.pta-section.pta-init-model { padding-top: 40px; }
}

/* ---------- Members ---------- */
@media (max-width: 1024px) {
	.pta-member__company { gap: 10px; }
	.pta-member__company > div { min-width: 0; }
	.pta-member__company .pta-tag { padding: 4px 8px; font-size: 11px; }
	.pta-member__company .pta-member__company-name { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Media gallery ---------- */
@media (max-width: 767px) {
	.pta-reel__card .pta-pillar__title { font-size: 17px; line-height: 23px; }
	.pta-comm .pta-comm__left .pta-h3 { font-size: 22px; line-height: 28px; }
	.pta-comm .pta-comm__text { font-size: 16px; line-height: 26px; }
	.pta-comm__grid a.pta-btn[href^="mailto"] { padding-inline: 12px; font-size: 14px !important; white-space: nowrap; }
}

/* ---------- Footer ---------- */
@media (max-width: 767px) {
	.pta-footer__links--2col { grid-template-rows: repeat(3, auto); }
}
@media (max-width: 1024px) {
	.pta-footer__bottom { flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; }
}

/* Member cards: tags and buttons on one line (Figma). Long category names truncate with an ellipsis. */
.pta-member__tags { flex-flow: row nowrap; align-items: center; gap: 6px; }
.pta-member__tags .pta-tag { flex: 0 1 auto; padding: 4px 8px; font-size: 11px; }
.pta-member__tags .pta-tag:last-child { flex-shrink: 0; }
.pta-member .pta-btn-row { flex-wrap: nowrap; gap: 8px; }
.pta-member .pta-btn-row .pta-btn--sm { flex: 1 1 auto; min-width: 0; gap: 6px; padding-inline: 12px; font-size: 13px; white-space: nowrap; }

/* Eligibility / exclusions (mobile): smaller list text. */
@media (max-width: 767px) {
	.pta-elig__text strong { font-size: 15px; line-height: 22px; }
	.pta-elig__num { font-size: 18px; }
}

/* Vision / Mission (mobile): less side padding, cards only as tall as their content. */
@media (max-width: 767px) {
	.pta-about-vm .pta-info-cards { grid-auto-rows: auto; }
	.pta-about-vm .pta-info-cards .pta-info-card { height: auto; min-height: 0; padding: 24px 18px; }
}

/* CTA heading (mobile, all pages): 26px. */
@media (max-width: 767px) {
	.pta-cta .pta-h2 { font-size: 26px; line-height: 33px; }
}

/* Secretariat cards (mobile): smaller values, tighter label-to-value gap. */
@media (max-width: 767px) {
	.pta-anchor__cards { gap: 16px; }
	.pta-anchor__card { gap: 12px; }
	.pta-anchor__card p.pta-h3 { margin-top: 0; font-size: 20px; line-height: 27px; }
	.pta-anchor__card a.pta-h3 { font-size: 20px; line-height: 27px; }
}


/* Mobile card side padding (site-wide) */
@media (max-width: 767px) {
.pta-post-card .pta-card__body, .pta-event-card .pta-card__body, .pta-content-card .pta-card__body, .pta-media-card .pta-card__body, .pta-album .pta-card__body { padding-left: 20px; padding-right: 20px; }
.pta-sx-card__body { padding-left: 20px; padding-right: 20px; }
}


/* Audit 08 H4 (Nov 2026): mobile text minimum 12px for eyebrow labels, pills, tags, badges and form hints.
   "html body" raises specificity above the page-level rules that set 9.8px to 11.5px. */
@media (max-width: 767px) {
	html body .pta-pill,
	html body .pta-overline,
	html body .pta-kicker,
	html body .pta-card__pill,
	html body .pta-tag,
	html body .pta-tag__text,
	html body .pta-evx-badge,
	html body .pta-badge-lock,
	html body .pta-hint,
	html body .pta-req,
	html body .pta-sx-card__meta dt,
	html body [data-pta-toc] a span,
	html body .pta-hero .pta-pill,
	html body .pta-section-head .pta-pill,
	html body .pta-reel__chip.pta-pill,
	html body .pta-elig__card .pta-overline,
	html body .pta-info-card__foot .pta-overline,
	html body .pta-evx-glance__list .pta-overline,
	html body .pta-faq-layout__nav .pta-overline,
	html body .pta-step .pta-overline,
	html body .pta-comm .pta-kicker,
	html body .pta-comm__right .pta-overline,
	html body .pta-comm__item .pta-overline,
	html body .pta-member__company .pta-overline,
	html body .pta-member__company .pta-tag,
	html body .pta-upload__info .pta-overline span,
	html body .pta-apply .pta-ms .pta-hint,
	html body .pta-featured-event__foot .pta-badge-lock,
	html body .pta-field.pta-field--tel > label,
	html body .pta-field:not(:has(textarea)) > label,
	html body .pta-progress__label > strong,
	html body .pta-table thead th {
		font-size: 12px;
	}
}

/* At 12px the longest eyebrow pills no longer fit one line on small phones, so let them wrap inside the pill. */
@media (max-width: 767px) {
	html body .pta-section-head .pta-pill,
	html body .pta-hero .pta-pill {
		max-width: 100%;
		white-space: normal;
		line-height: 1.35;
	}
}

/* Media gallery reel chips: page CSS forces 11px with !important, so the mobile minimum has to match it. */
@media (max-width: 767px) {
	html body .pta-reel__chip.pta-pill { font-size: 12px !important; }
}

/* Audit 08 H5 (Nov 2026): footer links get a full-height (26px) tap target instead of a 20px text box. */
.pta-footer__links a {
	display: inline-block;
}