/* =============================================================================
   15-advice-resources.css — template_advice_and_resources.php
   The tile grid (journey steps + international students), the tailored-support
   two-column layout, the resource sidebar, the job-board buttons and the tag
   filter chips.
   ============================================================================= */

/* =============================================================================
   TILE GRID (.list_grid)
   The tile is the <li>. A tile can hold several links in .list_grid_item_wrap.

   Tune it by setting these on the SECTION or the wrapper — never declare them
   on .list_grid itself, because a value declared on an element always beats
   one it would have inherited, which would block a page's own setting:
     --grid_cols  columns at desktop width  (default 3)
     --grid_gap   space between tiles       (default 0 — tiles share an edge)
   ============================================================================= */
.list_grid {
	display: grid;
	grid-template-columns: repeat(var(--grid_cols, 3), minmax(0, 1fr));
	gap: var(--grid_gap, 0);
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	/* Clips the outer ring of grid lines drawn below. Must stay at padding 0
	   or the clip happens in the wrong place. */
	overflow: hidden;
}

.list_grid_item_wrap {
	/* Anchor for the ::after grid line and for .stretch_link. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	padding: 0.8rem;
	list-style: none;
	background-color: var(--js-white);
	color: var(--js-grey);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* --- The grid lines -------------------------------------------------------
   Each tile draws a line on its RIGHT and BOTTOM only, so every internal
   boundary is drawn exactly once. The last column's right line and the last
   row's bottom line fall outside .list_grid, where its overflow: hidden
   removes them — so there is no outer border at any column count.

   z-index: 1 is load-bearing. Tile backgrounds paint in document order, so the
   next tile's white would paint over the previous tile's right line and the
   internal verticals would vanish. A positioned box with z-index above 0
   paints in a later phase than every z-index: auto box. The TILE itself must
   stay z-index: auto, or it becomes a stacking context and traps its ::after.
   -------------------------------------------------------------------------- */
.list_grid_item_wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	box-shadow:
		1px 0 0 var(--js-grey),  /* right  */
		0 1px 0 var(--js-grey);  /* bottom */
}

.list_grid_item_header {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.list_grid_item_wrap h3 {
	margin: 0;
	font-size: clamp(1.2rem, 1rem + 0.5vw, 1.4rem);
	line-height: 1.25;
	transition: transform 0.25s ease;
	color: var(--js-black);
}

.list_grid_item_wrap p {
	margin: 0;
	font-size: clamp(1rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.18;
}

/* Links pinned to the bottom of the tile (margin-top: auto pushes them there),
   so tiles with different amounts of copy still line their actions up. */
.list_grid_item_actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-top: auto;
	padding: 0.4rem 0;
}

/* Makes a tile with ONE link clickable anywhere. Goes on the link inside a
   .list_grid_item_wrap; the overlay covers the tile because the tile is the
   nearest positioned ancestor. */
.stretch_link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* --- Tile hover -----------------------------------------------------------
   The TILE drives the reveal, not the link, so hovering anywhere in the tile
   brings up its "Read more". That is why the three .read_more properties are
   repeated here rather than inherited.
   -------------------------------------------------------------------------- */
.list_grid_item_wrap:hover,
.list_grid_item_wrap:focus-within {
	color: var(--js-black);
	background-color: var(--js-blue-tint);
}

.list_grid_item_wrap:hover h3,
.list_grid_item_wrap:focus-within h3 {
	transform: translateY(-2px) translateX(2px);
}

.list_grid_item_wrap:hover .read_more,
.list_grid_item_wrap:focus-within .read_more {
	opacity: 1;
	background-size: 100% 1px;
}

.list_grid_item_wrap:hover .advice_marker,
.list_grid_item_wrap:focus-within .advice_marker {
	transform: translateY(-3px) scale(1.06);
}

/* Colour only — changing the border width would reflow the header. */
.list_grid_item_wrap:hover .advice_marker_icon,
.list_grid_item_wrap:focus-within .advice_marker_icon {
	background-color: var(--js-blue);
	border-color: var(--js-blue);
	color: var(--js-white);
}

.list_grid_item_wrap:hover .advice_marker_number,
.list_grid_item_wrap:focus-within .advice_marker_number {
	background-color: var(--js-blue-ink);
}

/* =============================================================================
   MARKER — the badge beside a tile heading
   .advice_marker is the shape; add one modifier for what it looks like.
   ============================================================================= */
.advice_marker {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out,
		color 0.2s ease-in-out;
}

/* Solid numbered circle — journey steps 1-4. */
.advice_marker_number {
	background-color: var(--js-blue);
	color: var(--js-white);
	font-family: var(--js-font-bold);
}

/* Outlined icon square (Bootstrap Icons). */
.advice_marker_icon {
	border-radius: 20%;
	border: 2px solid var(--js-blue);
	background-color: var(--js-white);
	color: var(--js-blue);
}

/* =============================================================================
   JOURNEY STEPS — "Not sure where to start?"
   ============================================================================= */
.journey_steps_container {
	/* Four steps read better as 2x2 than 3 + 1. */
	--grid_cols: 2;
	--grid_gap: 1rem;
}

.journey_item_wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	list-style: none;
	border: 1px solid var(--js-blue);
	border-radius: 4px;
	background-color: var(--js-white);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
	container-type: inline-size;
	container-name: tile;

	padding: clamp(0.8rem, 0.9rem + 1vw, 1.1rem) clamp(0.7rem, 0.8rem + 1vw, 1rem);
	gap: clamp(0.1rem, 0.2rem + 1vw, 0.3rem);
}

.journey_item_wrap h3 {
	margin: 0;
	font-size: clamp(1.2rem, 1rem + 0.5vw, 1.4rem);
	line-height: 1.25;
	transition: transform 0.25s ease;
}

.journey_item_wrap p {
	font-size: clamp(0.8rem, 0.9rem + 1vw, 1.1rem);
	line-height: 1.18;
}

.journey_item_wrap .advice_marker {
	width: clamp(18px, 12cqi, 35px);
	height: clamp(18px, 12cqi, 35px);
	font-size: clamp(0.65rem, 6cqi, 1.5rem);
}

.journey_item_wrap .list_grid_item_header {
	gap: clamp(0.2rem, 0.3rem + 0.1vw, 0.4rem);
}

.journey_item_wrap .list_grid_item_actions {
	gap: clamp(0.2rem, 0.3rem + 0.1vw, 0.4rem) clamp(0.4rem, 0.4rem + 0.1vw, 0.5rem);
	padding-top: clamp(0.3rem, 0.4rem + 1vw, 0.5rem);
}

.journey_item_wrap .open_in_new_tab,
.journey_item_wrap .download_file {
	font-size: clamp(0.6rem, 0.7rem + 1vw, 0.8rem);
}

/* A real layout change driven by the tile rather than the screen: below this
   the number stops sitting beside the heading and moves above it. */
@container tile (max-width: 170px) {
	.journey_item_wrap .list_grid_item_header {
		flex-direction: column;
		align-items: flex-start;
	}
}

.journey_item_wrap:hover,
.journey_item_wrap:focus-within {
	background-color: var(--js-blue-tint);
	/* Drawn inside the tile so it does not nudge its neighbours. */
	outline: 2px solid var(--js-blue);
	outline-offset: -2px;
}

.journey_item_wrap:hover h3,
.journey_item_wrap:focus-within h3 {
	transform: translateY(-2px) translateX(2px);
}

/* =============================================================================
   INTERNATIONAL STUDENTS
   ============================================================================= */
#international_students {
	padding: 0 0 0.625rem;
	--grid_cols: 3;
	--section_border_space_above: 1rem;
	--section_border_space_below: 1.5rem;
}

/* =============================================================================
   TAILORED SUPPORT — advice tiles left, extra resources right
   ============================================================================= */
#tailored-support {
	padding: 0.625rem 0;
}

/* One gap value drives the gutter and the padding either side of the divider,
   so the line always sits centred between the columns. */
.tailored_layout {
	--tailored_gap: clamp(1rem, 1.2vw, 1.8rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(40%, 50%);
	gap: var(--tailored_gap);
}

.tailored_main,
.tailored_aside {
	min-width: 0;
}

/* With no resources to show, the template leaves the aside out and adds this,
   so the main column does not sit beside an empty 40% gap. */
.tailored_layout_single {
	grid-template-columns: minmax(0, 1fr);
}

.tailored_main p.special-smaller {
	font-size: 1.3rem;
	line-height: 1.1;
	color: var(--js-grey);
}

/* One tile per row in the left column, styled as stacked bordered rows rather
   than a grid — so the shared grid lines are switched off. */
.resources_section_container_left,
.resources_section_container_left .list_grid {
	--grid_cols: 1;
}

.resources_section_container_left {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.resources_section_container_left .list_grid_item_wrap {
	border-top: 1px solid var(--js-blue);
	border-left: 3px solid var(--js-blue);
	border-radius: 8px;
	margin-bottom: 1rem;
}

.resources_section_container_left .list_grid_item_wrap::after {
	box-shadow: none;
}

ul.list-unstyled {
	font-size: 1.15rem;
	line-height: 1.2;
	margin: 0.3rem 0 0 1rem;
	padding: 0;
	list-style: disc;
}

ul.list-unstyled li {
	margin: 0.25rem 0;
}

/* =============================================================================
   RESOURCE PANEL — the sticky sidebar
   position: sticky needs `top` to do anything: with no offset the element just sits where it would have anyway.
     margin-top   where the panel sits BEFORE it sticks. 
     top          how far below the top of the SCREEN it parks once it sticks.
   ============================================================================= */
.resource_panel {
	--panel_sticky_gap: 2rem;
	position: sticky;
	top: var(--panel_sticky_gap);
	padding: 1rem 0.9rem 1.5rem;
	margin: 0.5rem 0 0;
	border-radius: 8px;
	background-color: #d5f5f1bb;
}

body.admin-bar .resource_panel {
	top: calc(var(--panel_sticky_gap) + 32px);
}

.resource_panel_header h3 {
	margin: 0 0 0.35rem;
	font-size: clamp(1.3rem, 1.3rem + 0.8vw, 1.8rem);
	line-height: 1.4;
}

.resource_panel_header p {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.1;
	color: var(--js-grey);
}

/* A flex column rather than a grid: the list is one item wide and grows every
   time a resource is added, so there is no column count to maintain. */
.resource_list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.resource_item {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Switches off the ul.special tick graphic from 02-base.css. */
	background-image: none;
}

/* Three tracks — icon, label, arrow — so every label starts on the same
   vertical line however long the title, and the arrow stays pinned right
   instead of trailing the last word. minmax(0, 1fr) lets a long title wrap
   rather than widen the panel. */
.resource_link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.8rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--js-blue);
	border-radius: 10px;
	background-color: var(--js-white);
	color: var(--js-grey);
	font-size: 1.2rem;
	line-height: 1.3;
	text-decoration: none;
	transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out, color 0.15s ease-in-out;
}

.resource_link:hover,
.resource_link:focus-visible {
	transform: translateX(3px);
	color: var(--js-black);
	box-shadow: 0 8px 18px rgba(14, 180, 171, 0.18);
}

.resource_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background-color: var(--js-blue-tint);
	color: var(--js-blue-ink);
	font-size: 1.25rem;
	line-height: 1;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.resource_link:hover .resource_icon,
.resource_link:focus-visible .resource_icon {
	background-color: var(--js-blue-ink);
	color: var(--js-white);
}

.resource_label {
	font-family: var(--js-font-bold);
}

/* "PDF, 240 KB" under a title. display: block drops it onto its own line
   inside the label track without disturbing the icon or arrow. */
.resource_meta {
	display: block;
	font-family: var(--js-font);
	font-size: 0.9rem;
	color: var(--js-grey);
}

/* The same information beside "Download" on an International students tile.
   em, not rem: it should track whatever size the label around it is. */
.resource_meta_inline {
	font-family: var(--js-font);
	font-size: 0.85em;
}

.resource_arrow {
	font-size: 0.875rem;
	color: var(--js-blue-ink);
	opacity: 0.6;
	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.resource_link:hover .resource_arrow,
.resource_link:focus-visible .resource_arrow {
	opacity: 1;
	transform: translate(1px, -1px);
}

/* =============================================================================
   .link_chip — the pill link used for the skills-assessment links
   Quieter than a solid button, louder than body text, so one tile can carry
   three without looking like three calls to action.

   Label and hover fill are both --js-blue-ink rather than --js-blue: filling
   with the bright teal would put white text at 2.6:1. See 01-variables.css.
   ============================================================================= */
.link_chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.5rem 1rem;
	border: 2px solid var(--js-blue);
	/* Any radius larger than half the height reads as a pill. */
	border-radius: 999px;
	background-color: var(--js-white);
	color: var(--js-blue-ink);
	font-family: var(--js-font-bold);
	font-size: 1rem;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
		color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.link_chip i {
	font-size: 0.875rem;
}

.link_chip:hover,
.link_chip:focus-visible {
	transform: translateY(-1px);
	background-color: var(--js-blue-ink);
	border-color: var(--js-blue-ink);
	color: var(--js-white);
}

/* The tile behind the chips turns blue-tint on hover, which would swallow a
   white chip — keep them white so they stay separated from it. */
.list_grid_item_wrap:hover .link_chip,
.list_grid_item_wrap:focus-within .link_chip {
	background-color: var(--js-white);
}

.list_grid_item_wrap:hover .link_chip:hover,
.list_grid_item_wrap .link_chip:focus-visible {
	background-color: var(--js-blue-ink);
	color: var(--js-white);
}

/* =============================================================================
   HIGHLIGHT — the "International students" note nested inside a card
   Its own small component rather than a nested callout, so its padding cannot
   be knocked out by a modifier meant for a different card.
   ============================================================================= */
.advice_highlight {
	margin-top: 0.3rem;
	padding: 0.5rem;
	border-style: solid;
	border-color: var(--js-blue);
	/* Thicker left and right edges, hairline top and bottom. */
	border-width: 1px 3px;
	border-radius: 6px;
	background-color: color-mix(in srgb, var(--js-blue) 7%, var(--js-white));
}

.advice_highlight h3 {
	padding: 0.1rem 0.2rem;
	letter-spacing: 0.9px;
}

.advice_highlight p {
	line-height: 1;
}

.advice_highlight a.open_in_new_tab {
	font-size: 1rem;
	line-height: 1;
	color: var(--js-grey);
	padding: 0.2rem 0.3rem;
	margin: 0.1rem 0.3rem;
	border: 1.5px solid var(--js-blue-ink);
	border-radius: 3px;
	background-color: var(--js-blue-tint);
}

/* =============================================================================
   JOB BOARD BUTTONS
   minmax(180px, max-content) rather than 1fr: a short list of three keeps each
   button its natural width instead of being stretched into three wide slabs,
   and a longer list still wraps into neat rows.
   ============================================================================= */
.list_jobboards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jobboard_item_wrap {
	margin: 0;
	padding: 0;
	list-style: none;
	background-image: none;
}

/* flex + align-items: center puts the external-link icon on the label's
   optical centre rather than its baseline, which is what made the icons look
   slightly low. The hover swaps the fill for dark teal rather than emptying
   the button to white, so a hovered board does not look disabled. */
.jobboard_item_wrap a {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	height: 100%;
	padding: 0.5rem;
	font-size: 0.8rem;
	line-height: 1;
	text-align: left;
	text-decoration: none;
	background: #7a8689;
	color: var(--js-white);
	border: 1px solid var(--js-grey);
	border-radius: 4px;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out, transform 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}

/* margin-left: auto pins the icon to the right edge of the button. */
.jobboard_item_wrap a i {
	margin-left: auto;
	font-size: 0.875rem;
	opacity: 0.75;
}

.jobboard_item_wrap a:hover,
.jobboard_item_wrap a:focus-visible {
	transform: translateY(-2px);
	background: var(--js-blue-ink);
	border-color: var(--js-blue-ink);
	box-shadow: 0 8px 18px rgba(14, 180, 171, 0.25);
}

.jobboard_item_wrap a:hover i,
.jobboard_item_wrap a:focus-visible i {
	opacity: 1;
}

/* =============================================================================
   TAG FILTER CHIPS (.resource_filter)
   Printed above the resource list and the International students tiles by
   jobshop_resource_filter() (inc/resources.php); js/resource-filter.js does
   the filtering.

   [hidden] needs its own rule here. The browser's built-in
   [hidden] { display: none } is the weakest style there is, so any display
   value in this file — like the display: flex on .list_grid_item_wrap — beats
   it and a "hidden" item stays on screen.
   ============================================================================= */
.resource_filter[hidden],
[data-tags][hidden] {
	display: none !important;
}

.resource_filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 1rem 0 0;
}

#international_students .resource_filter {
	margin-top: 1.25rem;
}

.resource_filter_chip {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--js-blue);
	border-radius: 999px;
	background-color: var(--js-white);
	color: var(--js-blue-ink);
	font-family: var(--js-font-bold);
	font-size: 0.9375rem;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
		color 0.15s ease-in-out;
}

.resource_filter_chip:hover {
	background-color: var(--js-blue-tint);
}

.resource_filter_chip:focus-visible {
	outline: 2px solid var(--js-blue-ink);
	outline-offset: 2px;
}

/* The pressed chip fills with the ink, like .link_chip on hover, so its white
   label stays above 4.5:1. */
.resource_filter_chip[aria-pressed="true"] {
	border-color: var(--js-blue-ink);
	background-color: var(--js-blue-ink);
	color: var(--js-white);
}

/* =============================================================================
   BLOG LIST at the foot of the page
   ============================================================================= */
#all_blogs_section {
	padding: 1.875rem 0;
	--read_more_colour: var(--js-blue-ink);
}

#all_blogs_section p.special-smaller {
	margin: 1.3rem 0;
}

/* The chip row above the grid. Same chips as the resource lists (see the block
   above); this only sets the space around them in this section. */
#all_blogs_section .blog_filter {
	margin: 0 0 1.5rem;
}

/* A card hidden by the filter or by the eight-card cap. It needs its own rule
   for the same reason the resource items do: the browser's built-in
   [hidden] { display: none } is the weakest style there is, and .blog_card's
   display: flex beats it, so a "hidden" card would stay on screen. */
.blog_card[hidden] {
	display: none !important;
}

/* "View more blogs". The button is printed hidden and un-hidden by
   js/blog-filter.js, and the button system's display: inline-block would beat
   [hidden] the same way - hence the guard. */
.blog_more_wrap {
	display: flex;
	justify-content: center;
	margin-top: 1.875rem;
}

.blog_more_btn[hidden] {
	display: none !important;
}

/* Nothing below it in the section, so the button's own bottom margin (part of
   the shared button rule) is just a gap. */
.blog_more_btn {
	margin-bottom: 0;
}

/* ============================================================================= */

@media (max-width: 1000px) {
	.list_grid {
		--grid_cols: 2;
	}

	/* Two columns become one: the divider moves from the right edge to the
	   bottom, and the panel un-sticks — a sticky box in a single-column layout
	   just covers the content underneath it. */
	.tailored_layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.tailored_main {
		padding-right: 0;
		padding-bottom: var(--tailored_gap);
		border-right: 0;
		border-bottom: 1px solid var(--js-grey-tint);
	}

	.resource_panel {
		position: static;
	}
}

@media (max-width: 850px) {
	/* The four journey steps stay in one row. Scoped to the journey grid so it
	   does not also hit #international_students, which sets --grid_cols: 3. */
	.journey_steps_container .list_grid {
		--grid_cols: 4;
		--grid_gap: 0.5rem;
	}

	/* Two job-board buttons per row. minmax(0, 1fr) rather than 1fr: a grid
	   track's default minimum is min-content, and "Just Student Jobs" is wider
	   than half a 360px screen, so plain 1fr would push the row past the
	   viewport. The 0 minimum lets the track shrink and the label wrap. */
	.list_jobboards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.jobboard_item_wrap a {
		align-items: flex-start;
		gap: 6px;
		padding: 0.5rem 0.625rem;
		font-size: 0.75rem;
		line-height: 1.2;
		border-radius: 6px;
	}

	/* Nudges the icon onto the first line of a wrapped label. */
	.jobboard_item_wrap a i {
		font-size: 0.625rem;
		margin-top: 0.15em;
	}
}

@media (max-width: 500px) {
	/* Four across stops being readable here — roughly 88px per tile at 400px
	   wide, which no amount of fluid type rescues. Back to 2x2. */
	.journey_steps_container .list_grid {
		--grid_cols: 2;
	}

	.list_grid {
		--grid_cols: 1;
	}
}