/*!
 * Shinwado Directory — Page Styles
 * Version: 2.24.0
 *
 * Block-specific styles only. Shared variables, the reset, the
 * .shinwado-btn button system, and the lightbox all come from
 * shinwado.css, loaded alongside this file — see
 * includes/directory-render.php.
 *
 * Contents:
 *   0. Back to Home link
 *   1. Header block
 *   2. Directory block (search bar + school cards, grid and rows)
 *   3. CTA block
 *   4. Responsive
 */

/* 0. Back to Home link ------------------------------------------------------------ */
/* Stays pinned at the top once scrolled past it, shrinking and gaining
   a shadow at the same time — positioning controlled entirely by JS
   (assets/js/shinwado.js) applying position: fixed via an inline style
   once scrolled, same mechanism as the admin-style pages' own,
   separate back-link (assets/css/admin.css) — this page has its own,
   completely separate .sd-back-link class and never actually had this
   at all before, despite looking similar. */
.sd-back-link {
	display: inline-block;
	background: var(--shinwado-cream);
	padding: 1rem 2rem;
	color: var(--shinwado-red);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: padding 0.2s ease, box-shadow 0.2s ease;
}
.sd-back-link:hover {
	text-decoration: underline;
}
.sd-back-link.is-scrolled {
	padding: 0.6rem 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sd-back-link--fixed {
	z-index: 100;
}
.sd-back-link-placeholder {
	height: 0;
}

/* 1. Header block -------------------------------------------------------------------- */
.sd-header {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4rem 2rem;
}
.sd-header__grid {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	align-items: center;
}
.sd-header__eyebrow {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* font-family/size/weight/style/text-align/color come from the Small
	   Title field's typography controls, applied inline. */
}
.sd-header__eyebrow-line {
	width: 48px;
	height: 3px;
	margin: 0 0 1.25rem;
}
.sd-header__title {
	margin: 0 0 1rem;
	line-height: 1.3;
}
.sd-header__description {
	line-height: 1.6;
}
.sd-header__image {
	max-width: 50%;
	margin: 0 auto;
}
.sd-header__image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* 2. Directory block ------------------------------------------------------------------ */
.sd-directory {
	background-color: #ffffff;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4rem 2rem;
}
.sd-directory__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.sd-directory__active-members {
	font-weight: 600;
	color: var(--shinwado-red);
	margin: 0 0 1rem;
}
.sd-directory__search {
	margin-bottom: 2.5rem;
}
.sd-directory__search-input {
	width: 100%;
	padding: 0.85rem 1.1rem;
	font-size: 0.95rem;
	font-family: inherit;
	border: 1px solid #e3d9c4;
	border-radius: 8px;
	background: #ffffff;
	color: var(--shinwado-ink);
	box-sizing: border-box;
}
.sd-directory__search-input:focus {
	outline: none;
	border-color: var(--shinwado-red);
}
.sd-directory__search-count {
	margin-top: 0.6rem;
	font-size: 0.8rem;
	color: #8a8074;
}

/* Grid layout (default, up to the configurable threshold) */
.sd-directory__list--grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.sd-directory__list--grid .sd-card {
	display: flex;
	flex-direction: column;
	/* Extra bottom padding matching the "Visit Website" button's own
	   height (~2.4rem: padding + line-height + border), so the card's
	   background image has clear breathing room below the button
	   instead of appearing to crowd/overlap it. */
	padding-bottom: 3.9rem;
}
.sd-directory__list--grid .sd-card__image {
	width: 50%;
	aspect-ratio: 1 / 1;
	height: auto;
	margin: 0 auto 1rem;
}

/* Rows layout (once school count exceeds the threshold) */
.sd-directory__list--rows {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.sd-directory__list--rows .sd-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1.25rem;
}
.sd-directory__list--rows .sd-card__image {
	flex: 0 0 96px;
	width: 96px;
	aspect-ratio: 1 / 1;
}

/* Shared card styling (both layouts) */
.sd-card {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #e8e2d4;
	border-radius: 10px;
	overflow: hidden;
	padding: 1.5rem;
	/* A more pronounced, slightly embossed look — a soft light edge along
	   the top plus a deeper diffused shadow underneath, same treatment
	   as the Federation Benefits & Membership pricing card. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 10px 24px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sd-card:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 16px 32px rgba(0, 0, 0, 0.16);
}
.sd-card__image {
	border-radius: 8px;
	overflow: hidden;
	/* No separate background — the card's own background shows through
	   around the image instead, so a logo with transparent padding
	   blends in rather than sitting on a mismatched color. */
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sd-card__image img {
	width: 100%;
	height: 100%;
	/* contain (not cover): the whole image is always visible, auto-sized
	   to fit the square area, never cropped — important for square
	   logos, which cover was cutting off. */
	object-fit: contain;
	display: block;
}
.sd-card__name {
	font-family: 'Playfair Display', serif;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--shinwado-ink);
	/* Reserves exactly 2 lines of height whether the name takes 1 or 2 —
	   this is what keeps the divider below it at the same position on
	   every card. Names longer than 2 lines get clamped with an
	   ellipsis rather than pushing the card taller. */
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Grid cards only: contact title + instructor name, larger and colored,
   sitting under the shared divider (see .shinwado-divider in shinwado.css) */
.sd-card--grid .sd-card__contact-block {
	margin-bottom: 0.75rem;
	min-height: 2.6rem;
}
.sd-card--grid .sd-card__contact-title {
	font-size: 0.8rem;
	line-height: 1.3;
	color: #8a8074;
	margin-bottom: 0.15rem;
}
.sd-card--grid .sd-card__instructor {
	font-family: 'Playfair Display', serif;
	font-size: 1.05rem;
	line-height: 1.3;
	font-weight: 700;
	color: #B60004;
}

/* Martial Arts Style — same font/size/color as .sd-card__contact-title
   above ("Head Instructor:") — gray, matching that label exactly (an
   earlier version of this was deliberately red instead; explicitly
   reversed back to match). Shared between both card variants (grid and
   row) since it's the same simple label-style treatment either way,
   unlike .sd-card__instructor which differs meaningfully between them. */
.sd-card__style {
	font-size: 0.8rem;
	line-height: 1.3;
	color: #8a8074;
	margin-bottom: 0.5rem;
}
/* The actual style value (e.g. "Shotokan, Judo") — on its own line
   below the "Style(s):" label above, in the site's red rather than the
   label's own gray. */
.sd-card__style-value {
	display: block;
	color: #B60004;
}

/* Row cards only: the old compact single-line treatment */
.sd-card--row .sd-card__instructor {
	font-size: 0.85rem;
	color: #8a8074;
	margin-bottom: 0.6rem;
}

.sd-card__locations {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 0.75rem;
	/* Fixed height regardless of whether this school has 0, 1, or many
	   locations — reserves the same space on every card. nowrap + hidden
	   below guarantees this never grows to a second line. Grid cards
	   only — see .sd-card__locations--wrap below for rows. */
	height: 24px;
	overflow: hidden;
}
/* Rows layout only: plenty of horizontal room, and rows don't share
   grid's fixed-height symmetry requirement, so every location just
   wraps normally instead of being capped with a "+N more" popup. */
.sd-card__locations--wrap {
	flex-wrap: wrap;
	height: auto;
	overflow: visible;
}
.sd-card__location-tag {
	font-size: 0.78rem;
	background: #ffffff;
	border: 1px solid #c9bfa8;
	color: #4a423a;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}
.sd-card__locations-more {
	flex-shrink: 0;
	white-space: nowrap;
	margin-top: 0;
}
.sd-card__description {
	font-size: 0.85rem;
	line-height: 1.5;
	color: #4a423a;
	margin: 0 0 0.85rem;
}

/* Grid cards only: description shown as a quote box with a CSS-rendered
   quote mark, per the approved mockup. Always rendered at this same
   fixed height (line-height × 3 lines + padding + the "more…" label's
   own space, reserved consistently whether that label actually shows
   or not), even when a school
   has no description — that's what keeps every card's quote area (and
   therefore everything below it) lining up at the same position
   regardless of which schools have a description and which don't. */
.sd-card__quote {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5rem;
	background: #efe4d0;
	border-radius: 8px;
	padding: 1rem 1.1rem;
	margin-bottom: 1rem;
	min-height: 124px;
	box-sizing: border-box;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Added by JS only when the text was genuinely truncated (see the
   quote-overflow-detection block in assets/js/shinwado.js) — the box
   itself becomes the click target for the full-quote popup rather than
   a separate "more" button, which was pushing 3-line quotes to a 4th
   line and breaking the fixed height this box is meant to guarantee.
   The hover lift/shadow below (same treatment as .sd-card:hover, just
   scaled down since this is a smaller, nested element) and the "more…"
   label are both gated on this same class, so neither ever appears for
   a description that already fits in full and isn't actually
   clickable. */
.sd-card__quote.is-clickable {
	cursor: pointer;
}
.sd-card__quote.is-clickable:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}
.sd-card__quote-mark {
	font-family: 'Playfair Display', serif;
	font-size: 2rem;
	line-height: 0.8;
	color: var(--shinwado-gold);
	flex-shrink: 0;
}
.sd-card__quote-content {
	flex: 1 1 auto;
	min-width: 0;
}
.sd-card__quote-text {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #3a332c;
	margin: 0;
	text-align: left;
	/* Clamps to exactly 3 lines regardless of actual text length — the
	   browser adds the truncating ellipsis automatically. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sd-card__quote-more {
	display: none;
	text-align: right;
	font-size: 0.75rem;
	font-weight: 600;
	color: #B60004;
	margin-top: 0.2rem;
}
.sd-card__quote.is-clickable .sd-card__quote-more {
	display: block;
}

/* Thin plain divider (no diamond) — under the quote box and under the
   phone/email row, grid cards only. Distinct from .shinwado-divider,
   which is reserved for the ornamented line under the school name. */
.sd-card__hr {
	height: 1px;
	background: rgba(184, 156, 106, 0.35);
	margin: 1rem 0;
}

.sd-card__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 0.82rem;
	line-height: 1.3;
	min-height: 1.1rem;
}
.sd-card__contact a {
	color: var(--shinwado-red);
	text-decoration: underline;
}
.sd-card__phone a {
	color: #4a423a;
	text-decoration: none;
}
.sd-card__phone,
.sd-card__email-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.sd-card__icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--shinwado-red);
}

/* Grid cards only: the bordered, centered "Visit Website" button */
.sd-card__website-button {
	display: block;
	text-align: center;
	margin: 0.25rem auto 0;
	max-width: fit-content;
	padding: 0.6rem 1.5rem;
	border: 1.5px solid var(--shinwado-red);
	border-radius: 4px;
	color: var(--shinwado-red);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}
.sd-card__website-button::after {
	content: "→";
	margin-left: 0.5rem;
}
.sd-card__website-button:hover {
	background: var(--shinwado-red);
	color: #ffffff;
}

/* Hidden by the search filter (see assets/js/shinwado.js) */
.sd-card.is-hidden {
	display: none;
}

/* 3. CTA block --------------------------------------------------------------------- */
.sd-cta {
	position: relative;
	background-color: var(--shinwado-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 3rem 2rem;
	text-align: center;
	overflow: hidden;
}
.sd-cta__inner {
	max-width: 640px;
	margin: 0 auto;
}
.sd-cta__image {
	max-height: 56px;
	width: auto;
	margin: 0 auto 1rem;
}
.sd-cta__title {
	margin: 0 0 0.75rem;
	font-family: 'Playfair Display', serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.25;
}
.sd-cta__description {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
}
.sd-cta__button {
	margin: 0;
}

/* 4. Responsive ---------------------------------------------------------------------- */
@media (max-width: 780px) {
	.sd-header__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.sd-directory__list--grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.sd-directory__list--grid {
		grid-template-columns: 1fr;
	}
	.sd-directory__list--rows .sd-card {
		flex-direction: column;
	}
	.sd-directory__list--rows .sd-card__image {
		width: 100%;
		aspect-ratio: 1 / 1;
	}
}