/*
 * Butler PTA — directory page CSS.
 * Mirrors the design tokens from theme.json + DESIGN.md.
 * Mobile-first; cards on phones, table on desktop.
 */

.bpd {
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 24px;
}

.bpd-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.bpd-title {
	display: inline-block;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 36px;
	font-weight: 600;
	color: #1B365D;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid #B41E2D;
}

/* Kept for back-compat — markup now hides this element */
.bpd-title-rule { display: none; }

.bpd-meta {
	font-size: 13px;
	color: #5B6470;
	font-feature-settings: 'tnum';
}

.bpd-search-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

@media (min-width: 700px) {
	.bpd-search-row {
		grid-template-columns: 1fr 200px 160px;
	}
}

.bpd-input,
.bpd-select {
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 16px;
	padding: 10px 14px;
	border: 1.5px solid #E8E1D2;
	border-radius: 4px;
	background: #FAFAF7;
	color: #1B365D;
	width: 100%;
	transition: border-color 150ms ease-out;
	min-height: 44px;
}

.bpd-input:focus,
.bpd-select:focus {
	outline: none;
	border-color: #B41E2D;
}

.bpd-select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%231B365D' stroke-width='1.5' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.bpd-state {
	padding: 16px;
	border-radius: 6px;
	font-size: 14px;
	background: #F4F0E8;
	color: #5B6470;
}

.bpd-state.is-error {
	background: rgba(180, 30, 45, 0.08);
	color: #B41E2D;
}

.bpd-state.is-loading::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid #1B365D;
	border-top-color: transparent;
	border-radius: 50%;
	margin-right: 8px;
	animation: bpd-spin 700ms linear infinite;
	vertical-align: -2px;
}

@keyframes bpd-spin {
	to { transform: rotate(360deg); }
}

/* Results — card list on mobile, table-like grid on desktop.
 *
 * Mobile layout per row (one card):
 *   ┌─────────────────────────────────────────┐
 *   │ Liam Patterson                  [ K ]   │   line 1: student + grade chip
 *   │ Ms. Patterson                           │   line 2: teacher (muted)
 *   │ Jessica Patterson      [Call] [Text]    │   line 3: parent + buttons
 *   └─────────────────────────────────────────┘
 *
 * Achieved with CSS grid: 5 cells emitted by directory-app.js are placed
 * onto a 3-row × 2-column grid with named areas.
 */
.bpd-results { margin-top: 0; }

.bpd-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"student grade"
		"teacher teacher"
		"parent  contact";
	column-gap: 12px;
	row-gap: 6px;
	padding: 16px 0;
	border-bottom: 1px solid #E8E1D2;
	font-feature-settings: 'tnum';
	align-items: center;
}
.bpd-row > .bpd-student { grid-area: student; }
.bpd-row > .bpd-teacher { grid-area: teacher; }
.bpd-row > .bpd-cell:nth-child(3) { grid-area: grade; justify-self: end; }
.bpd-row > .bpd-parent  { grid-area: parent; }
.bpd-row > .bpd-contact { grid-area: contact; justify-self: end; }

.bpd-row.is-header { display: none; }

@media (min-width: 700px) {
	.bpd-results { border-top: 1px solid #E8E1D2; }
	.bpd-row {
		grid-template-columns: 2fr 1.4fr 80px 2fr 180px;
		grid-template-areas: none;
		column-gap: 16px;
		row-gap: 0;
		align-items: center;
	}
	/* Reset the named-area placements so cells flow into the 5-col grid. */
	.bpd-row > .bpd-student,
	.bpd-row > .bpd-teacher,
	.bpd-row > .bpd-cell:nth-child(3),
	.bpd-row > .bpd-parent,
	.bpd-row > .bpd-contact {
		grid-area: auto;
		justify-self: auto;
	}
	.bpd-row.is-header {
		display: grid;
		border-bottom: 2px solid #1B365D;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #5B6470;
		padding: 12px 0;
	}
}

.bpd-student {
	font-weight: 600;
	color: #1B365D;
	font-size: 16px;
}

.bpd-grade {
	display: inline-block;
	background: #F4F0E8;
	color: #1B365D;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.bpd-teacher {
	font-size: 13px;
	color: #5B6470;
}
.bpd-parent {
	font-size: 14px;
	color: #1B365D;
}

.bpd-contact {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* Mobile (under 700px): hide the plain-text number, show the Call/Text
 * buttons so the user gets one-tap to dial or message.
 * Desktop (>=700px): show the formatted number and hide the buttons —
 * a board member at a laptop just wants to read it. */
.bpd-phone-text {
	font-size: 14px;
	font-weight: 600;
	color: #1B365D;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.bpd-phone-text:hover { color: #B41E2D; }

.bpd-phone-btn {
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 4px;
	border: 1px solid #E8E1D2;
	color: #1B365D;
	letter-spacing: 0.05em;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}
.bpd-phone-btn:hover {
	background: #F4F0E8;
	color: #B41E2D;
	border-color: #1B365D;
}

@media (min-width: 700px) {
	.bpd-phone-btn { display: none; }
}
@media (max-width: 699px) {
	.bpd-phone-text { display: none; }
}

/* (Mobile field-label eyebrows were removed when the row layout switched
 *  from "stacked rows with labels" to the named-grid card layout above.
 *  The grid placement makes the meaning of each cell unambiguous.) */

.bpd-pagination {
	margin-top: 24px;
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 14px;
	color: #5B6470;
}

.bpd-page-btn {
	background: transparent;
	border: 1.5px solid #1B365D;
	color: #1B365D;
	font-weight: 600;
	font-size: 14px;
	padding: 8px 14px;
	border-radius: 4px;
	cursor: pointer;
	min-height: 36px;
}

.bpd-page-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.bpd-page-btn:not(:disabled):hover {
	background: #1B365D;
	color: #FAFAF7;
}