/**
 * Preferred Realtors directory page.
 *
 * Every rule is scoped under .ij-realtors. Layout lives in the template's
 * inline styles, as on every other redesigned page; this file carries only
 * what an inline style attribute cannot express — hover and focus states,
 * the disclosure marker, and the breakpoints.
 */

.ij-realtors { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }

/* ---- Parent-theme overrides ----------------------------------------------
   bb-theme/css/base.min.css underlines every link on hover and paints a
   system-blue ring on focus, and the generated Beaver Builder skin carries
   `.fl-page-content a:hover { text-decoration: underline }` — which wraps this
   <main>. That selector scores 0-2-1 and both sheets load after this one, so a
   bare `.ij-realtors a:hover` would tie and lose on load order. The leading
   `body` adds the element that settles it. */
body .ij-realtors a:hover,
body .ij-realtors a:focus { text-decoration: none; }
body .ij-realtors a:focus { outline: none; }

.ij-realtors a:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- The state grid ------------------------------------------------------- */

/* The design bands the grid by row rather than by cell: four cells per row at
   the widest breakpoint, so every eighth run of four alternates. The counts
   below change with the column count, which is why each breakpoint restates
   them. */
.ij-realtors .stcell {
	background: #fff;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-realtors .stcell:nth-child(8n+1),
.ij-realtors .stcell:nth-child(8n+2),
.ij-realtors .stcell:nth-child(8n+3),
.ij-realtors .stcell:nth-child(8n+4) {
	background: var(--slate-50);
}

/* Only a served state is a link, so only it takes a hover surface — the grid
   does not invite a click that goes nowhere. */
.ij-realtors .stcell.is-live:hover,
.ij-realtors a.stcell:focus-visible {
	background: var(--color-success-soft);
}

/* ---- The call to action --------------------------------------------------- */

.ij-realtors .rt-cta {
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-realtors .rt-cta:hover {
	background: var(--brand-green-dark);
}

/* ---- Disclosures ---------------------------------------------------------- */

.ij-realtors details > summary {
	list-style: none;
	cursor: pointer;
}

.ij-realtors details > summary::-webkit-details-marker { display: none; }
.ij-realtors details > summary::marker { content: ''; }

/* The plus turns into a cross, which is why the glyph is a plus and not a
   chevron — 45 degrees is the whole animation. */
.ij-realtors .faq-chev {
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-realtors details[open] .faq-chev {
	transform: rotate(45deg);
}

.ij-realtors details > summary:focus-visible {
	outline: 2px solid var(--brand-green);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ---- Breakpoints ---------------------------------------------------------- */

@media (max-width: 960px) {
	.ij-realtors .stgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

	.ij-realtors .stcell:nth-child(8n+1),
	.ij-realtors .stcell:nth-child(8n+2),
	.ij-realtors .stcell:nth-child(8n+3),
	.ij-realtors .stcell:nth-child(8n+4) { background: #fff; }

	.ij-realtors .stcell:nth-child(6n+1),
	.ij-realtors .stcell:nth-child(6n+2),
	.ij-realtors .stcell:nth-child(6n+3) { background: var(--slate-50); }
}

@media (max-width: 640px) {
	.ij-realtors .stgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

	.ij-realtors .stcell:nth-child(6n+1),
	.ij-realtors .stcell:nth-child(6n+2),
	.ij-realtors .stcell:nth-child(6n+3) { background: #fff; }

	.ij-realtors .stcell:nth-child(4n+1),
	.ij-realtors .stcell:nth-child(4n+2) { background: var(--slate-50); }
}

@media (prefers-reduced-motion: reduce) {
	.ij-realtors .stcell,
	.ij-realtors .rt-cta,
	.ij-realtors .faq-chev { transition: none; }
}