/*
 * PCCIL mobile optimisation layer.
 *
 * Enqueued last so it wins the cascade at mobile breakpoints.
 * Targets the concrete problems observed in baseline v12 screenshots:
 *
 *   1. Homepage six spaces stack in one column with huge card heights
 *      -> switch to a compact two-column grid.
 *   2. Exhibition theme cards stack full-width with oversized images
 *      -> switch to two-column with tighter aspect ratio.
 *   3. Marketplace / research theme / pathway grids waste space when
 *      each card sits alone in a row -> two-column at mobile.
 *   4. Section headings, hero padding, and body typography scale down.
 *   5. Any horizontal overflow gets clipped defensively.
 *
 * Kept single-column at mobile: feeds, forms, article / research /
 * webinar detail bodies, long proposal content. Grids there stay 1fr.
 */

/* ==========================================================
 * Responsive media guarantee. NOT a blanket overflow hider - if the
 * page overflows we want to see it in QA and fix the offending
 * element, not paper over it.
 * ========================================================== */
@media (max-width: 640px) {
	img, video, iframe { max-width: 100%; height: auto; }
	table { max-width: 100%; }
}

/* ==========================================================
 * Homepage - two-column six-spaces + tighter hero.
 * ========================================================== */
@media (max-width: 640px) {
	.pccc-home__hero { min-height: 200px !important; }
	.pccc-home__hero-inner { padding: 24px 0 !important; }
	.pccc-home__hero-title { font-size: 1.5rem !important; line-height: 1.2 !important; }
	.pccc-home__hero-lead { font-size: 0.9rem !important; }

	.pccc-home__spaces { padding-block: 16px 24px !important; }

	/* Force the pathway grid into a compact 2-col layout. */
	.pccc-home__pathway-grid,
	.pccc-home__spaces .pccc-grid,
	.pccc-home__spaces .pccc-grid--3 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	.pccc-home__pathway-card {
		min-width: 0 !important;
	}
	.pccc-home__pathway-card .pccc-content-card__media {
		aspect-ratio: 4 / 3 !important;
	}
	.pccc-home__pathway-card .pccc-content-card__body {
		padding: 10px 12px 12px !important;
		gap: 4px !important;
	}
	.pccc-home__pathway-card .pccc-card__title {
		font-size: 0.9rem !important;
		line-height: 1.2 !important;
	}
	.pccc-home__pathway-card .pccc-card__body {
		font-size: 0.78rem !important;
		line-height: 1.35 !important;
	}
	.pccc-home__pathway-card .pccc-link--arrow { font-size: 0.78rem !important; }

	.pccc-home__join { padding-block: 24px !important; }
	.pccc-home__join .pccc-heading--2 { font-size: 1.35rem !important; }
	.pccc-home__ctas .pccc-btn { padding: 8px 14px !important; font-size: 0.85rem !important; }
}

/* ==========================================================
 * Exhibition theme cards - two-column at mobile.
 * ========================================================== */
@media (max-width: 640px) {
	/* Exhibition + theme landing grids force 2 columns. */
	.pccc-exhibition__theme-grid,
	.pccc-theme-grid,
	.pccc-landing .pccc-grid--3.pccc-grid--loose,
	.pccc-landing .pccc-grid.pccc-grid--3 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	.pccc-exhibition__theme-grid .pccc-card,
	.pccc-theme-grid .pccc-card,
	.pccc-landing .pccc-card {
		min-width: 0 !important;
	}
	.pccc-landing .pccc-content-card__media { aspect-ratio: 4 / 3 !important; }
	.pccc-landing .pccc-content-card__body { padding: 10px 12px 12px !important; gap: 4px !important; }
	.pccc-landing .pccc-card__title { font-size: 0.9rem !important; line-height: 1.2 !important; }
	.pccc-landing .pccc-card__body { font-size: 0.78rem !important; line-height: 1.35 !important; }
	.pccc-landing .pccc-link--arrow { font-size: 0.78rem !important; }

	/* Exhibition theme card - image-with-text-over-lay variant. */
	.pccc-theme-card,
	.pccc-theme-grid .pccc-card {
		min-height: 140px !important;
	}
}

/* ==========================================================
 * Marketplace tabs - keep single-column card list, but tighten.
 * Tab row already scrolls horizontally.
 * ========================================================== */
@media (max-width: 640px) {
	.pccc-marketplace__tabs { padding: 4px !important; }
	.pccc-marketplace__tab { padding: 6px 10px !important; font-size: 0.78rem !important; }
	.pccc-marketplace__toolbar { gap: 8px !important; margin-bottom: 8px !important; }
	.pccc-marketplace__search { padding: 4px 8px 4px 28px !important; }
	.pccc-marketplace__intro { padding: 12px 14px !important; }
	.pccc-marketplace__intro-copy p { font-size: 0.82rem !important; }
	.pccc-marketplace__grid { gap: 10px !important; }
}

/* ==========================================================
 * Research Lab / Ways to Engage / Research themes.
 * ========================================================== */
@media (max-width: 640px) {
	/* 3 Ways to Engage pathway cards - 2 cols on mobile. */
	.pccc-research-lab__pathways {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	.pccc-pathway-card { min-width: 0 !important; }
	.pccc-pathway-card__media { aspect-ratio: 4 / 3 !important; }
	.pccc-pathway-card__body { padding: 10px 12px 12px !important; }
	.pccc-pathway-card__body .pccc-card__title { font-size: 0.92rem !important; line-height: 1.2 !important; }
	.pccc-pathway-card__body .pccc-card__body { font-size: 0.78rem !important; line-height: 1.35 !important; }

	/* External research destinations - 2 cols. */
	.pccc-platform-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	.pccc-platform-card { padding: 12px !important; }
	.pccc-platform-card .pccc-card__title { font-size: 0.92rem !important; }
	.pccc-platform-card .pccc-card__body { font-size: 0.76rem !important; }
	.pccc-platform-card__host { font-size: 0.7rem !important; }

	/* Research paper / research theme detail body stays single-col
	   (it uses pccc-container--narrow). No changes needed there. */
}

/* ==========================================================
 * Events - webinar grid 1 col on mobile (already handled), tighten.
 * Meeting rooms grid - 2 columns on mobile.
 * ========================================================== */
@media (max-width: 640px) {
	.pccc-webinars--hub .pccc-section-heading__title { font-size: 1.1rem !important; }

	/* Rooms grid on Events - keep 2-col mobile. */
	.pccc-webinars--hub .pccc-grid.pccc-grid--3:not(.pccc-webinar-grid):not(.pccc-platform-grid) {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
}

/* ==========================================================
 * Innovation Blog - one column stays; tighten card + typography.
 * ========================================================== */
@media (max-width: 640px) {
	.pccc-articles-archive .pccc-article-grid .pccc-content-card__media { aspect-ratio: 16 / 10 !important; }
	.pccc-articles-archive .pccc-article-grid .pccc-card__title { font-size: 0.95rem !important; }
	.pccc-articles-archive .pccc-article-grid .pccc-card__body { font-size: 0.82rem !important; }
}

/* ==========================================================
 * Community landing.
 * ========================================================== */
@media (max-width: 640px) {
	/* Pathway strip - 1 col on mobile (they're wordy). */
	.pccc-community__pathways { grid-template-columns: 1fr !important; gap: 8px !important; }
	.pccc-community__pathway { padding: 10px 12px !important; }
	.pccc-community__pathway-title { font-size: 0.98rem !important; }
	.pccc-community__pathway-body { font-size: 0.82rem !important; }

	/* Community group cards - 1 col on mobile (they carry a description). */
	.pccc-community__group-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

	/* Small member tiles at the bottom of /community/ - dense tiny
	   directory tiles, 3 cols is intentional (they only carry an
	   avatar + short name). */
	.pccc-community__member-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
	.pccc-member-card { padding: 8px 6px !important; }
	.pccc-member-card__avatar { width: 40px !important; height: 40px !important; }
	.pccc-member-card__name { font-size: 0.72rem !important; }
	.pccc-member-card__meta { font-size: 0.68rem !important; }
}

/* ==========================================================
 * Individual BuddyBoss group Members list at mobile - 2 cols max.
 * These carry a name + activity meta + action row so 3 cols is too
 * dense to read. Group-single.css uses 2/3/4/5 cols per width;
 * force 2 at <=640 and 1 at <=360 for legibility.
 * ========================================================== */
@media (max-width: 640px) {
	body.groups.single-item #members-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 360px) {
	body.groups.single-item #members-list {
		grid-template-columns: 1fr !important;
	}

	/* Innovation Chat card list. */
	.pccc-community__chat-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================
 * Requests - two-column form stays stacked; tighten.
 * ========================================================== */
@media (max-width: 640px) {
	.pccc-requests__layout { gap: 20px !important; }
	.pccc-requests__form { padding: 16px !important; }
	.pccc-requests__types { padding: 12px !important; }
	.pccc-requests__types-list { grid-template-columns: 1fr !important; font-size: 0.8rem !important; }
	.pccc-requests__row-2 { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ==========================================================
 * PIFCE + landing template - tighten.
 * ========================================================== */
@media (max-width: 640px) {
	.pccc-pifce-page .pccc-content h2 { font-size: 1.05rem !important; }
	.pccc-pifce-page .pccc-content h3 { font-size: 0.95rem !important; }
	.pccc-pifce-page .pccc-content p,
	.pccc-pifce-page .pccc-content li { font-size: 0.88rem !important; line-height: 1.5 !important; }
}

/* ==========================================================
 * Global scaling - hero areas, section rhythm, heading sizes.
 * ========================================================== */
@media (max-width: 640px) {
	.pccc-section,
	.pccc-section--compact { padding-block: 20px !important; }
	.pccc-section--sunken { padding-block: 24px !important; }

	.pccc-heading--1 { font-size: 1.55rem !important; line-height: 1.15 !important; }
	.pccc-heading--2 { font-size: 1.25rem !important; }
	.pccc-heading--3 { font-size: 1.05rem !important; }

	.pccc-lead { font-size: 0.9rem !important; }

	.pccc-section-heading { margin-bottom: 12px !important; }
	.pccc-section-heading__title { font-size: 1.1rem !important; }
	.pccc-eyebrow { font-size: 0.68rem !important; }

	.pccc-btn,
	.pccc-btn--primary,
	.pccc-btn--secondary { padding: 8px 14px !important; font-size: 0.85rem !important; }

	.pccc-card__title { font-size: 0.98rem !important; }
	.pccc-notice { padding: 12px 14px !important; }
	.pccc-notice__title { font-size: 0.9rem !important; }
}

/* ==========================================================
 * PCCIL Control Centre - responsive tighten.
 * ========================================================== */
@media (max-width: 640px) {
	.pccil-admin__sidebar { padding: 12px !important; }
	.pccil-admin__main { padding: 16px !important; }
	.pccil-admin__header h1 { font-size: 1.15rem !important; }
	.pccil-admin__stat { padding: 10px !important; }
	.pccil-admin__stat-value { font-size: 1.4rem !important; }
	.pccil-admin__stat-label { font-size: 0.72rem !important; }
	.pccil-admin__toolbar { gap: 6px !important; flex-wrap: wrap !important; }
	.pccil-admin__btn { padding: 6px 10px !important; font-size: 0.78rem !important; }
	.pccil-admin__form input[type="text"],
	.pccil-admin__form input[type="url"],
	.pccil-admin__form input[type="email"],
	.pccil-admin__form input[type="search"],
	.pccil-admin__form select,
	.pccil-admin__form textarea { font-size: 0.9rem !important; padding: 8px 10px !important; }
	.pccil-admin__table { font-size: 0.8rem !important; }
	.pccil-admin__table th, .pccil-admin__table td { padding: 6px 8px !important; }
}

/* ==========================================================
 * Ultra-small phones (<=390) - one extra tightening step.
 * ========================================================== */
@media (max-width: 390px) {
	.pccc-container { padding-left: 12px !important; padding-right: 12px !important; }
	.pccc-heading--1 { font-size: 1.4rem !important; }
	.pccc-heading--2 { font-size: 1.15rem !important; }
	.pccc-home__pathway-card .pccc-card__title,
	.pccc-landing .pccc-card__title,
	.pccc-pathway-card__body .pccc-card__title { font-size: 0.85rem !important; }
	.pccc-home__pathway-card .pccc-card__body,
	.pccc-landing .pccc-card__body,
	.pccc-pathway-card__body .pccc-card__body { font-size: 0.72rem !important; }
}