/* Dyslexia Express — teacher resource collections (For Teachers).
 * Uses the theme's tokens; adds lavender and soft blue accents. Loaded only on teacher pages. */

.dx-collection {
	--c-coral: #F4B3A8; --c-coral-ink: #5E1E14; --c-coral-soft: #FDEBE7;
	--c-mint: #A9D8C3; --c-mint-ink: #1E4A3A; --c-mint-soft: #E6F4EE;
	--c-yellow: #F6D878; --c-yellow-ink: #5C4500; --c-yellow-soft: #FFF6D6;
	--c-sage: #BCD6B6; --c-sage-ink: #26442A; --c-sage-soft: #EBF4E8;
	--c-blue: #AFCDEF; --c-blue-ink: #1B3E66; --c-blue-soft: #E8F1FB;
	--c-lavender: #CDBDEF; --c-lavender-ink: #3B2A6B; --c-lavender-soft: #F2EDFB;
	--c-blush: #F8EDEA;
	position: relative;
}
/* Let the product grid use the page width; keep reading text at a comfortable measure. */
.dx-article:has(.dx-collection), .dx-prose:has(> .dx-collection) { max-width: none; }
.dx-article:has(.dx-collection) .dx-article__head > * { max-width: var(--dx-prose, 72ch); }
.dx-collection > p, .dx-collection > h2, .dx-collection > .dx-disclosure, .dx-collection > ul.dx-collection__more { max-width: var(--dx-prose, 72ch); }

.dx-collection__note {
	float: right; width: 16rem; margin-top: -0.5rem; margin: 0 0 1rem 1.5rem; padding: 1.1rem 1.25rem;
	background: var(--c-mint-soft); border-radius: 28px 36px 24px 40px; transform: rotate(-2deg);
	font-family: var(--dx-font-heading, inherit); font-size: 1.05rem; line-height: 1.4; color: var(--dx-navy, #1C2B3D); text-align: center;
}
.dx-collection__note span { color: #C0475A; }
@media (max-width: 899px) { .dx-collection__note { float: none; width: auto; transform: none; margin: 0 0 1rem; } }

.dx-collection__h2 {
	font-size: 0.95rem !important; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
	color: var(--dx-navy, #1C2B3D); margin: 1.5rem 0 0.75rem !important;
}
.dx-collection__fine { font-size: 0.9rem; color: var(--dx-muted, #566273); margin-top: 1rem; }
.dx-collection ul.dx-collection__more { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dx-collection ul.dx-collection__more li { margin: 0; }
.dx-collection ul.dx-collection__more a {
	display: inline-block; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--dx-border, #DCE5E6);
	background: #fff; color: var(--dx-aqua, #17706F); font-weight: 600; text-decoration: none;
}
.dx-collection ul.dx-collection__more a:hover { background: var(--dx-aqua-tint, #DDF2F0); }
.dx-collection ul.dx-collection__more a:focus-visible { outline: 3px solid var(--dx-navy, #1C2B3D); outline-offset: 2px; }

/* ---------- shared card pieces ---------- */
.dx-collection .dx-picks { clear: both; list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.dx-collection .dx-picks > li { margin: 0; display: flex; }
.dx-collection .dx-pick {
	flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; height: 100%;
	padding: 1.25rem; border-radius: 22px; border: 1px solid var(--dx-border, #DCE5E6); background: #fff;
	box-shadow: 0 1px 2px rgba(28, 43, 61, .04), 0 6px 18px rgba(28, 43, 61, .05);
	--acc: var(--c-mint); --ink: var(--c-mint-ink); --soft: var(--c-mint-soft);
}
.dx-collection .dx-pick--coral { --acc: var(--c-coral); --ink: var(--c-coral-ink); --soft: var(--c-coral-soft); }
.dx-collection .dx-pick--mint { --acc: var(--c-mint); --ink: var(--c-mint-ink); --soft: var(--c-mint-soft); }
.dx-collection .dx-pick--yellow { --acc: var(--c-yellow); --ink: var(--c-yellow-ink); --soft: var(--c-yellow-soft); }
.dx-collection .dx-pick--sage { --acc: var(--c-sage); --ink: var(--c-sage-ink); --soft: var(--c-sage-soft); }
.dx-collection .dx-pick--blue { --acc: var(--c-blue); --ink: var(--c-blue-ink); --soft: var(--c-blue-soft); }
.dx-collection .dx-pick--lavender { --acc: var(--c-lavender); --ink: var(--c-lavender-ink); --soft: var(--c-lavender-soft); }

.dx-collection .dx-pick__label {
	display: flex; align-items: center; gap: 0.6rem; margin: 0; max-width: none;
	font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.dx-collection .dx-pick__num {
	flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
	background: var(--acc); color: var(--ink); font-size: 1rem; letter-spacing: 0;
}
.dx-collection .dx-pick__media { flex: none; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; border-radius: 14px; overflow: hidden; }
.dx-collection .dx-pick__media img { width: 100%; height: 100%; max-height: 230px; object-fit: contain; border-radius: 0; background: transparent; }
.dx-collection .dx-pick__body { display: flex; flex-direction: column; flex: 1; }
.dx-collection .dx-pick__title { font-family: var(--dx-font-heading, inherit); font-size: 1.25rem; line-height: 1.25; color: var(--dx-navy, #1C2B3D); margin: 0 0 0.5rem; }
.dx-collection .dx-pick__why { font-size: 1rem; color: var(--dx-navy, #1C2B3D); margin: 0 0 0.75rem; max-width: none; }
.dx-collection .dx-pick__points { list-style: none; margin: 0 0 1rem; padding: 0; }
.dx-collection .dx-pick__points li { position: relative; padding-left: 1.75rem; margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--dx-navy, #1C2B3D); }
.dx-collection .dx-pick__points li::before {
	content: "✓"; position: absolute; left: 0; top: 0.1em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
	display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: var(--acc); color: var(--ink);
}
.dx-collection .dx-pick__btn {
	margin-top: auto; align-self: stretch; justify-content: center; text-align: center;
	background: var(--acc); color: var(--ink); border: 0; border-radius: 999px; min-height: 48px; font-weight: 700; font-size: 1rem; text-decoration: none;
}
.dx-collection .dx-pick__btn:hover { filter: brightness(0.95); color: var(--ink); }
.dx-collection .dx-pick__btn:focus-visible { outline: 3px solid var(--dx-navy, #1C2B3D); outline-offset: 3px; }

/* ---------- Reading Intervention Tools: 3 / 2 / 1 columns, last card wide ---------- */
@media (min-width: 600px) { .dx-collection .dx-picks--intervention { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .dx-collection .dx-picks--intervention { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) {
	.dx-collection .dx-picks--intervention > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.dx-collection .dx-picks--intervention > li:last-child:nth-child(odd) .dx-pick { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 1.75rem; }
	.dx-collection .dx-picks--intervention > li:last-child:nth-child(odd) .dx-pick__label { grid-column: 1; }
	.dx-collection .dx-picks--intervention > li:last-child:nth-child(odd) .dx-pick__media { grid-column: 1; aspect-ratio: auto; min-height: 140px; }
	.dx-collection .dx-picks--intervention > li:last-child:nth-child(odd) .dx-pick__body { grid-column: 2; grid-row: 1 / span 2; }
	.dx-collection .dx-picks--intervention > li:last-child:nth-child(odd) .dx-pick__btn { align-self: flex-start; padding-inline: 2rem; }
}
@media (min-width: 960px) { .dx-collection .dx-picks--intervention > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- Teacher Favorites: softer blush cards, centered, 3 + 2 ---------- */
.dx-collection--favorites .dx-collection__h2 { text-align: left; }
.dx-collection .dx-picks--favorites .dx-pick { border: 0; background: #FFFCFB; box-shadow: 0 1px 2px rgba(28, 43, 61, .04), 0 8px 22px rgba(192, 71, 90, .07); text-align: center; }
.dx-collection .dx-picks--favorites .dx-pick__label { justify-content: center; color: var(--dx-coral-dark, #9E3647); }
.dx-collection .dx-picks--favorites .dx-pick__num { background: var(--c-coral-soft); color: var(--dx-coral-dark, #9E3647); }
.dx-collection .dx-picks--favorites .dx-pick__media { background: none; aspect-ratio: auto; height: 230px; }
.dx-collection .dx-picks--favorites .dx-pick__media img { width: auto; height: 100%; max-width: 100%; max-height: 230px; border-radius: 18px; }
@media (max-width: 599px) { .dx-collection .dx-picks--favorites .dx-pick__media { height: 200px; } }
.dx-collection .dx-picks--favorites .dx-pick__title { font-size: 1.3rem; }
.dx-collection .dx-picks--favorites .dx-pick__points { display: inline-block; text-align: left; margin-inline: auto; }
.dx-collection .dx-picks--favorites .dx-pick__points li::before { content: "♥"; background: none; color: #C0475A; font-size: 0.85rem; }
.dx-collection .dx-picks--favorites .dx-pick__btn {
	background: #C0475A; color: #fff; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.9rem;
}
.dx-collection .dx-picks--favorites .dx-pick__btn:hover { background: #9E3647; color: #fff; filter: none; }
@media (min-width: 600px) { .dx-collection .dx-picks--favorites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
	.dx-collection .dx-picks--favorites { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.dx-collection .dx-picks--favorites > li { grid-column: span 2; }
	.dx-collection .dx-picks--favorites > li:nth-child(4), .dx-collection .dx-picks--favorites > li:nth-child(5) { grid-column: span 3; }
}