/* ==========================================================================
   Resources / Professionals — page stylesheet
   Loaded only on /resources/ (inc/enqueue.php slug map).

   Composes with base.css and restates nothing from it.

   THE MOTIF IS THE INDEX. This is the only page on the site whose job
   is to route somebody rather than to argue something, so it is built
   as a typeset contents page: index numbers hanging in the margin
   against one continuous rule, the QUESTION as the largest element in
   each row, and the destination set small as page-reference notation.

   That inversion is the whole idea. A commissioner arrives with a
   question, not with a table of contents, so the question is what they
   scan and the page name is only the reference.

   Sections
     1. Opening, and the subject masthead
     2. THE SIGNATURE MOMENT — the index
     3. At a glance
     4. Documents, and the designed empty state
     5. Information governance
     6. Where things stand (the one dark field)
     7. Narrow widths
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening.

      One sentence, not two — every other recent page opens on a pair,
      and this one should sound like an instruction rather than a turn.

      The subject line beneath is a MASTHEAD, not navigation: plain
      typography with hairline separators, aria-hidden, deliberately
      not interactive. The index it describes starts a screen below,
      and a second set of controls would be a trap rather than a
      shortcut.
   -------------------------------------------------------------------------- */
.oasis-res-open__inner { max-width: var(--oasis-w-wide); }
.oasis-res-open h1 {
	margin-top: 0.4rem;
	max-width: 17ch;
	text-wrap: balance;
}

.oasis-res-open__subjects {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem clamp(0.9rem, 2vw, 1.5rem);
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
	padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
	border-top: 1px solid var(--oasis-rule);
}
.oasis-res-open__subjects span {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.5rem);
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-res-open__subjects span + span::before {
	content: "";
	width: 1px;
	height: 0.85em;
	background: var(--oasis-rule-strong);
}

.oasis-res-open__body { margin-top: clamp(2rem, 4vw, 3rem); }
.oasis-res-open__lede {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.24rem, 1rem + 1.05vw, 1.8rem);
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	max-width: 30ch;
}
.oasis-res-open__para {
	margin: 1.1rem 0 0;
	color: var(--oasis-ink-soft);
	max-width: 54ch;
}

@media (min-width: 900px) {
	.oasis-res-open__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-res-open__para { margin-top: 0.45rem; }
}

/* --------------------------------------------------------------------------
   2. THE SIGNATURE MOMENT — the index.

      Three columns: the hanging number, the question and its summary,
      and the destination. One continuous rule runs down the left of
      the number column, and a hairline closes each row — the anatomy
      of a printed contents page rather than a stack of link cards.

      The question is display-scale; the destination is small tracked
      caps. Nothing here is boxed, filled or elevated.
   -------------------------------------------------------------------------- */
.oasis-res-index__head { max-width: var(--oasis-w-wide); }
.oasis-res-index__head h2 { margin-top: 0.35rem; max-width: 26ch; text-wrap: balance; }

.oasis-res-index__list {
	--oasis-res-num: 3.5rem;
	--oasis-res-gap: clamp(1.25rem, 2.5vw, 2rem);
	position: relative;
	margin-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--oasis-rule-strong);
}

/* ONE CONTINUOUS RULE down the margin, drawn on the list rather than
   per row. The first build put the rule on each number's own
   border-right, where it spanned only the number's line box and read
   as seven small ticks. A contents page has one ruled margin, and the
   horizontal hairlines cross it. */
@media (min-width: 860px) {
	.oasis-res-index__list::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--oasis-res-num) + var(--oasis-res-gap) * 0.5);
		width: 1px;
		background: var(--oasis-rule);
	}
}

.oasis-res-entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0.75rem;
	padding: clamp(1.4rem, 2.8vw, 2.1rem) 0;
	border-bottom: 1px solid var(--oasis-rule);
	text-decoration: none;
	color: var(--oasis-ink);
}

/* The hanging index number — notation, not a badge. Tabular so 01 and
   07 occupy exactly the same width and the questions align. */
.oasis-res-entry__n {
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
	line-height: 1.9;
	color: var(--oasis-sage);
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}

.oasis-res-entry__body { min-width: 0; }
.oasis-res-entry__ask {
	display: block;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.3rem, 1.06rem + 1.05vw, 1.95rem);
	line-height: 1.22;
	letter-spacing: -0.016em;
	color: var(--oasis-green-deep);
	max-width: 30ch;
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-res-entry__says {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--oasis-fs-sm);
	line-height: 1.6;
	color: var(--oasis-ink-soft);
	max-width: 56ch;
}

/* The destination is the SMALLEST thing in the row. It is the
   reference, not the point. */
.oasis-res-entry__to {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	align-self: end;
}
.oasis-res-entry__label {
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--oasis-green-leaf);
	background-image: linear-gradient(var(--oasis-green-leaf), var(--oasis-green-leaf));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	padding-bottom: 3px;
	transition: background-size var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-res-entry .oasis-arc-arrow {
	width: 1.35rem;
	height: auto;
	flex: none;
	color: var(--oasis-green-leaf);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}

.oasis-res-entry:hover .oasis-res-entry__ask,
.oasis-res-entry:focus-visible .oasis-res-entry__ask { color: var(--oasis-green-leaf); }
.oasis-res-entry:hover .oasis-res-entry__n { color: var(--oasis-green-leaf); }
.oasis-res-entry:hover .oasis-res-entry__label,
.oasis-res-entry:focus-visible .oasis-res-entry__label { background-size: 100% 1px; }
.oasis-res-entry:hover .oasis-arc-arrow,
.oasis-res-entry:focus-visible .oasis-arc-arrow { transform: translateX(5px); }

@media (min-width: 860px) {
	/* Three columns, and the destination sits on the question's own
	   line rather than under the summary — a contents page aligns its
	   references with its entries, not with their descriptions.
	   17rem so that the longest label, "Education & Development",
	   holds one line; at 15rem it wrapped and its arrow drifted off
	   the column the other six arrows sit in. */
	.oasis-res-entry {
		grid-template-columns: var(--oasis-res-num) minmax(0, 1fr) minmax(0, 17rem);
		column-gap: var(--oasis-res-gap);
		align-items: start;
		row-gap: 0;
	}
	.oasis-res-entry__to { align-self: start; justify-content: flex-end; padding-top: 0.3rem; }
	.oasis-res-entry__label { text-align: right; }
}

/* --------------------------------------------------------------------------
   3. At a glance.

      A standfirst with particulars beside it. NOT four statistic
      cards: these are facts about a home for two children, and setting
      them like KPIs would be the wrong register entirely.
   -------------------------------------------------------------------------- */
.oasis-res-glance__lead h2 { margin-top: 0.35rem; max-width: 18ch; }
.oasis-res-glance__standfirst {
	margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.16rem, 1rem + 0.72vw, 1.52rem);
	line-height: 1.48;
	color: var(--oasis-ink-soft);
	max-width: 48ch;
}
.oasis-res-glance__standfirst strong {
	font-weight: 400;
	color: var(--oasis-green-deep);
}
.oasis-res-glance__note {
	margin-top: clamp(1.35rem, 2.6vw, 1.85rem);
	padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
	border-top: 1px solid var(--oasis-rule);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-sage);
	max-width: 46ch;
}

.oasis-res-facts { margin: clamp(2rem, 4vw, 2.75rem) 0 0; }
.oasis-res-fact + .oasis-res-fact {
	margin-top: clamp(1.1rem, 2.2vw, 1.5rem);
	padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
	border-top: 1px solid var(--oasis-rule);
}
.oasis-res-fact dt {
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-res-fact dd {
	margin: 0.4rem 0 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.14rem, 1rem + 0.6vw, 1.45rem);
	line-height: 1.3;
	color: var(--oasis-green-deep);
}

@media (min-width: 900px) {
	.oasis-res-glance__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		column-gap: clamp(3rem, 7vw, 6rem);
		align-items: start;
	}
	.oasis-res-facts { margin-top: 0.35rem; }
}

/* --------------------------------------------------------------------------
   4. Documents.

      Editorial rows, never a PDF card grid, no folder or document
      iconography. The empty state is the state this page ships in, so
      it gets the same care as the populated one — it explains WHY it
      is empty, which is worth more to a commissioner than a list.
   -------------------------------------------------------------------------- */
.oasis-res-docs__head h2 { margin-top: 0.35rem; max-width: 24ch; text-wrap: balance; }
.oasis-res-docs__body { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.oasis-res-docs__list { border-top: 1px solid var(--oasis-rule-strong); }
.oasis-res-doc {
	padding: clamp(1.35rem, 2.6vw, 1.9rem) 0;
	border-bottom: 1px solid var(--oasis-rule);
}
.oasis-res-doc__link {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.85rem;
	text-decoration: none;
}
.oasis-res-doc__title {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.2rem, 1.04rem + 0.7vw, 1.6rem);
	line-height: 1.25;
	color: var(--oasis-green-deep);
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-res-doc__title--plain { margin: 0; }
/* Format and size sit inside the link, so a screen reader announces
   what is about to open as part of the link's own name. */
.oasis-res-doc__meta {
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-res-doc__link .oasis-arc-arrow {
	width: 1.3rem;
	height: auto;
	flex: none;
	align-self: center;
	color: var(--oasis-green-leaf);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-res-doc__link:hover .oasis-res-doc__title,
.oasis-res-doc__link:focus-visible .oasis-res-doc__title { color: var(--oasis-green-leaf); }
.oasis-res-doc__link:hover .oasis-arc-arrow,
.oasis-res-doc__link:focus-visible .oasis-arc-arrow { transform: translateX(5px); }

.oasis-res-doc__desc {
	margin: 0.6rem 0 0;
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-ink-soft);
	max-width: 60ch;
}
.oasis-res-doc__date {
	margin: 0.55rem 0 0;
	font-size: var(--oasis-fs-xs);
	letter-spacing: 0.06em;
	color: var(--oasis-sage);
}

/* The empty state. Designed, not defaulted. */
.oasis-res-docs__none {
	border-top: 1px solid var(--oasis-rule-strong);
	padding-top: clamp(1.6rem, 3vw, 2.25rem);
	color: var(--oasis-ink-soft);
	max-width: 60ch;
}
.oasis-res-docs__none-lead {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.22rem, 1.02rem + 0.85vw, 1.65rem);
	line-height: 1.38;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	max-width: 30ch;
}
.oasis-res-docs__none > p + p { margin-top: 1rem; }
/* The empty state needs an ACTION, not just an explanation — it tells a
   commissioner to ask, so it has to give them the route to ask with. */
.oasis-res-docs__none-ask { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.oasis-res-docs__none-close {
	margin-top: 1.35rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--oasis-rule);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-sage);
}

@media (min-width: 900px) {
	.oasis-res-docs__none {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
		max-width: var(--oasis-w-wide);
		align-items: start;
	}
	.oasis-res-docs__none-side { grid-column: 1; grid-row: 1 / span 2; }
	.oasis-res-docs__none > p { grid-column: 2; }
	.oasis-res-docs__none > p + p { margin-top: 1.35rem; }
}

/* --------------------------------------------------------------------------
   5. Information governance.
   -------------------------------------------------------------------------- */
.oasis-res-info__lead h2 { margin-top: 0.35rem; max-width: 20ch; text-wrap: balance; }
.oasis-res-info__body { color: var(--oasis-ink-soft); max-width: 58ch; }
.oasis-res-info__why {
	margin-top: 1.4rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--oasis-rule);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.1rem, 1rem + 0.42vw, 1.32rem);
	line-height: 1.45;
	color: var(--oasis-green-deep);
}

@media (min-width: 900px) {
	.oasis-res-info__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		column-gap: clamp(3rem, 7vw, 6rem);
		align-items: start;
	}
	.oasis-res-info__body > p:first-child { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   6. Where things stand — the page's one dark field, placed last so
      the registration position is what a professional leaves with.

      The ofsted-notice partial keeps its own mint card here. On this
      ground it reads as the one lit object on the page, which is
      exactly the weight the statement should carry.
   -------------------------------------------------------------------------- */
.oasis-res-stand__lead h2 { margin-top: 0.35rem; max-width: 16ch; text-wrap: balance; }
.oasis-res-stand .oasis-ofsted-notice { margin-top: clamp(1.5rem, 3vw, 2rem); }

.oasis-res-stand__para {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.18rem, 1.02rem + 0.7vw, 1.55rem);
	line-height: 1.42;
	color: rgba(255, 255, 255, 0.9);
	max-width: 34ch;
}

.oasis-res-stand .oasis-contact-details {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-top: clamp(1.35rem, 2.6vw, 1.85rem);
	border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.oasis-res-stand .oasis-contact-details a {
	display: inline-block;
	padding-block: 0.32rem;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.24rem, 1.04rem + 0.85vw, 1.72rem);
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	background-image: linear-gradient(var(--oasis-green-light), var(--oasis-green-light));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	transition: background-size var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-res-stand .oasis-contact-details a:hover,
.oasis-res-stand .oasis-contact-details a:focus-visible { background-size: 100% 1.5px; }

.oasis-res-stand__privacy {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.8);
	max-width: 52ch;
}
.oasis-res-stand__privacy strong { color: var(--oasis-green-light); font-weight: 600; }

.oasis-res-stand__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem clamp(1.5rem, 3vw, 2.25rem);
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* The dark-ground primary CTA was originally patched here, because this
   was the first page on the site to put one on a deep-green field and
   base.css was frozen for concurrent work. It has since been promoted
   into base.css as a proper contextual variant of the component
   (`.oasis-section--dark .oasis-btn--primary`), alongside the
   `--secondary` dark rules that were already there. The local override
   is gone so the two cannot drift apart. */

@media (min-width: 960px) {
	.oasis-res-stand__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(3rem, 7vw, 6rem);
		align-items: start;
	}
	.oasis-res-stand__talk { padding-top: 0.35rem; }
}

/* --------------------------------------------------------------------------
   7. Narrow widths.

       The risk on an index page is that mobile becomes a stack of
       identical links. The counter is that the rows are NOT identical
       to begin with: the question carries the weight, the summary is
       quiet, and the destination is a small tracked line. The number
       moves above the question so the question keeps the full measure.
   -------------------------------------------------------------------------- */
@media (max-width: 859px) {
	/* The masthead's hairline separators only work while all seven
	   words hold ONE line. Below this they wrap, and a wrapped line
	   would start with a stray divider — so the run becomes a plain
	   list of words instead. */
	.oasis-res-open__subjects span + span::before { display: none; }
	.oasis-res-open__subjects { gap: 0.45rem 1.15rem; }

	.oasis-res-entry { row-gap: 0.55rem; }
	.oasis-res-entry__n {
		line-height: 1.2;
		/* the ruled margin cannot survive a narrow column, so the rule
		   goes under the number instead — the marginal notation is
		   kept, the column is not. Stronger than the desktop rule
		   because at 1px and 16% it simply was not visible here. */
		padding-bottom: 0.5rem;
		border-bottom: 1px solid var(--oasis-rule-strong);
		width: 2.6rem;
	}
	.oasis-res-entry__to { align-self: start; margin-top: 0.35rem; }
}

@media (max-width: 599px) {
	.oasis-res-open__subjects { gap: 0.4rem 0.95rem; }
	.oasis-res-entry { padding-block: 1.35rem; }
	.oasis-res-doc__link { gap: 0.3rem 0.7rem; }
}