/*
 * Porsche Club Lietuva — main stylesheet.
 * Built on Porsche Design System v4 tokens (see tokens.css).
 * Web components <p-*> are styled by the PDS itself; rules here only handle
 * layout and theme-side compositions.
 */

/* Prevent flash of un-upgraded custom elements (PDS recommendation). */
:not(:defined) { visibility: hidden; }

/* Hide the WP/Blocksy-rendered page title on the homepage — the hero
   serves as the page title there. */
body.home .entry-title,
body.home .page-title,
body.home header.entry-header,
body.home .hero-section { display: none !important; }

html, body {
	font-family: var(--pds-font-family);
	color: var(--pds-color-primary);
	background: var(--pds-color-background-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Force Porsche Next over Blocksy / WooCommerce body styles. The parent
   theme's typography customizer ships its own body font-family with
   higher selector specificity than `body`, so we win it back here. */
html body,
html body p,
html body span,
html body li,
html body td, html body th,
html body label,
html body button,
html body input,
html body textarea,
html body select,
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .ct-container,
html body .entry-content {
	font-family: var(--pds-font-family) !important;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.pclub-container {
	width: 100%;
	max-width: var(--pclub-container-base);
	margin-inline: auto;
	padding-inline: var(--pds-spacing-fluid-md);
}
.pclub-container--narrow { max-width: var(--pclub-container-narrow); }
.pclub-container--wide   { max-width: var(--pclub-container-wide); }

.pclub-stack > * + * { margin-block-start: var(--pds-spacing-fluid-md); }
.pclub-stack-sm > * + * { margin-block-start: var(--pds-spacing-fluid-sm); }
.pclub-stack-lg > * + * { margin-block-start: var(--pds-spacing-fluid-lg); }

.pclub-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pds-spacing-fluid-sm);
	align-items: center;
}

/* Hero / event grid styles now live in design.css (.pc-hero, .pc-event-card). */

/* ===== Member cards ===== */
.pclub-member-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: var(--pds-spacing-fluid-md);
}
.pclub-member-card {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-static-sm);
	padding: var(--pds-spacing-fluid-sm);
	background: var(--pds-color-background-surface);
	border-radius: var(--pds-radius-lg);
}
.pclub-member-card__photo {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--pds-radius-md);
}

/* ===== Standings ===== */
.pclub-standings { margin-block: var(--pds-spacing-fluid-lg); }

/* ===== Member dashboard ===== */
.pclub-dashboard {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-fluid-lg);
}
.pclub-dashboard__profile,
.pclub-dashboard__results,
.pclub-dashboard__events {
	padding: var(--pds-spacing-fluid-md);
	background: var(--pds-color-background-surface);
	border-radius: var(--pds-radius-lg);
}
.pclub-dashboard__club-number {
	color: var(--pds-color-contrast-medium);
}

/* ===== Tables (fallback for non-PDS table usage) ===== */
.pclub-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--pds-font-family);
}
.pclub-table th,
.pclub-table td {
	text-align: left;
	padding: var(--pds-spacing-static-sm) var(--pds-spacing-static-md);
	border-block-end: 1px solid var(--pds-color-contrast-lower);
}
.pclub-table th {
	font-weight: var(--pds-font-weight-semibold);
	color: var(--pds-color-contrast-high);
}

/* ===== Header / footer (Blocksy slots — keep slim, parent handles structure) ===== */
.site-header { background: var(--pds-color-background-base); }
.site-footer {
	background: var(--pds-color-background-surface);
	padding-block: var(--pds-spacing-fluid-lg);
}

/* ===== Utility: hide visually but keep for screen readers ===== */
.pclub-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}