/* =========================================================
   Fr. CRCE: tablet and phone pass.
   Loaded after every other stylesheet so it can refine them without fighting specificity.
   Breakpoints: 1200 (drawer takes over), 1024 (tablet), 900, 640 (phone), 480 (small phone).
   Rules: 44px touch targets, no horizontal scroll, one calm vertical rhythm, controls clear of the dock.
   ========================================================= */

/* ---------- Vertical rhythm: 96px sections are for desktop only ---------- */
@media (max-width: 1024px) {
	.fr-sec, .fr-home .et_pb_section.fr-sec, .fr-place, .fr-home .et_pb_section.fr-place { padding-top: var(--space-16); padding-bottom: var(--space-16); }
	.fr-sec-head, .fr-sec-head-row { margin-bottom: var(--space-10); }
	.fr-bc__row { margin-bottom: var(--space-16); }
	.fr-bc__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
	.fr-sec, .fr-home .et_pb_section.fr-sec, .fr-place, .fr-home .et_pb_section.fr-place { padding-top: 56px; padding-bottom: 56px; }
	.fr-sec--tight, .fr-home .et_pb_section.fr-sec--tight { padding-top: var(--space-8); padding-bottom: var(--space-6); }
	.fr-sec-head, .fr-sec-head-row { margin-bottom: var(--space-8); }
	.fr-bc__row { margin-bottom: var(--space-12); }
	.fr-bc__media { aspect-ratio: 4 / 3; }
}

/* ---------- Heroes ---------- */
/* tablets: the page heroes (About, Contact) keep their copy clear of the scroll cue and the dock */
@media (min-width: 641px) and (max-width: 1180px) {
	.fr-h--page .fr-h__copy { padding-bottom: 176px; }
}
/* phones: pause control becomes an icon button; playlist segments shrink so the row never overflows */
@media (max-width: 560px) {
	.fr-h__seg { gap: 4px; margin-left: 0; }
	.fr-h__seg span { width: 20px; }
}

/* ---------- Section navigation on tablets and phones ---------- */
@media (max-width: 900px) {
	.fr-subnav__label { display: none; }
}

/* ---------- Notice board ---------- */
@media (max-width: 560px) {
	.fr-panel { padding: var(--space-6) var(--space-5, 20px); }
	.fr-item { flex-direction: column; gap: 6px; }
	.fr-tag { align-self: flex-start; min-width: 0; margin-top: 0; padding: 3px 10px; }
}
.fr-item a { position: relative; display: inline-block; padding: 2px 0; }
.fr-item a::after { content: ""; position: absolute; inset: -10px 0; }

/* ---------- Recruiter logos: columns may shrink below the image width ---------- */
.fr-logos--img { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fr-logos--img .fr-logo { min-width: 0; }
@media (max-width: 640px) { .fr-logos--img { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fr-logos--img { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Gallery: labels stay readable on narrow tiles ---------- */
@media (max-width: 480px) {
	.fr-gt__lab { padding: 8px 12px; }
	.fr-gt:not(.fr-gt--g1) .fr-gt__lab i { display: none; }
}

/* ---------- Carousel controls never squash below a comfortable touch size ---------- */
.fr-arr, .fr-arrow, .fr-qdots button, .fr-hc__dots button { flex: none; }
@media (max-width: 560px) {
	.fr-qdots, .fr-hc__dots { gap: 0; }
	.fr-qdots button, .fr-hc__dots button { width: 32px; }
	.fr-qctl { gap: var(--space-2); }
	/* long playlists: arrows and the progress bar carry the navigation */
	.fr-hc__dots:has(button:nth-child(8)) { display: none; }
}

/* ---------- Touch targets: grow the hit area, not the visual ---------- */
.fr-util__r .fr-u { min-width: 44px; justify-content: center; }
.fr-crumbs a, .fr-chan__v { position: relative; }
.fr-crumbs a::after, .fr-chan__v::after { content: ""; position: absolute; inset: -12px -6px; }
.fr-box h4.fr-mt { margin-top: var(--space-6); }
.fr-prose h2 + .fr-steps { margin-top: var(--space-8); }

/* ---------- Contact and forms ---------- */
@media (max-width: 480px) {
	.fr-seg__b { padding-left: var(--space-3); padding-right: var(--space-3); }
	.fr-office .fr-btn-row .fr-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Footer ---------- */
@media (min-width: 641px) and (max-width: 900px) {
	.fr-news-sign__in { flex-direction: column; align-items: stretch; gap: var(--space-6); }
	.fr-signup .fr-field { flex: 1 1 200px; min-width: 0; }
	.fr-signup .fr-btn { flex: none; }
}
@media (max-width: 640px) {
	.fr-news-sign__in { gap: var(--space-6); padding-top: var(--space-10); padding-bottom: var(--space-10); }
	.fr-signup { width: 100%; }
	.fr-signup .fr-field { flex: 1 1 100%; min-width: 0; }
	.fr-signup .fr-btn { flex: 1 1 100%; justify-content: center; }
	/* the link groups are accordions here: they sit flush, only the brand block keeps a gap below it */
	.fr-ftr__cols { gap: 0; padding-top: var(--space-12); padding-bottom: var(--space-6); }
	.fr-ftr__cols > :first-child { margin-bottom: var(--space-8); }
	.fr-ftr__bottom-in { flex-direction: column; gap: var(--space-3); }
	.fr-ftr__bottom-in ul { flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
	.fr-ftr__bottom-in li a { display: inline-block; padding: 12px 0; }
}
/* link groups: open on desktop and without script; accordions on phones (script closes them) */
.fr-fcol > summary { list-style: none; cursor: default; pointer-events: none; }
.fr-fcol > summary::-webkit-details-marker { display: none; }
.fr-fcol > summary h4 { margin: 0 0 var(--space-4); }
.fr-fcol > summary .fr-icon { display: none; }
@media (max-width: 640px) {
	.fr-fcol { border-top: 1px solid rgba(197, 212, 238, 0.25); }
	.fr-fcol > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0; cursor: pointer; pointer-events: auto; }
	.fr-fcol > summary h4 { margin: 0; }
	.fr-fcol > summary .fr-icon { display: block; width: 18px; height: 18px; color: var(--on-deep-muted); transition: transform var(--duration-enter) var(--ease-spring); }
	.fr-fcol[open] > summary .fr-icon { transform: rotate(180deg); }
	.fr-fcol > summary:active { opacity: 0.7; }
	.fr-fcol > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
	.fr-fcol .fr-flist { padding-bottom: var(--space-4); }
	.fr-fcol .fr-flist li { margin: 0; }
	.fr-fcol .fr-flist a { display: block; padding: 10px 0; }
	.fr-fcol:last-of-type { border-bottom: 1px solid rgba(197, 212, 238, 0.25); }
}
@supports (interpolate-size: allow-keywords) {
	@media (max-width: 640px) {
		.fr-fcol { interpolate-size: allow-keywords; }
		.fr-fcol::details-content { block-size: 0; overflow: hidden; transition: block-size var(--duration-enter) var(--ease-out), content-visibility var(--duration-enter) allow-discrete; }
		.fr-fcol[open]::details-content { block-size: auto; }
	}
}
@media (prefers-reduced-motion: reduce) {
	.fr-fcol > summary .fr-icon { transition: none; }
	.fr-fcol::details-content { transition: none !important; }
}

/* ---------- Divi text modules reset list padding; keep the notice rows breathing ---------- */
.fr-home .et_pb_text .fr-item, .fr-item { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.fr-home .et_pb_text .fr-items { margin: 0; padding: 0; }

/* ---------- Map placeholder label never wraps ---------- */
.fr-map__load { white-space: nowrap; width: max-content; max-width: calc(100% - 32px); }

/* ---------- 16px inputs stop iOS from zooming the page on focus ---------- */
@media (max-width: 640px) { .fr-field { font-size: 16px; } }

/* ---------- Touch: no double-tap zoom delay on controls (pinch zoom stays available) ---------- */
a, button, summary, [role="button"], [role="tab"], input, select, textarea, label { touch-action: manipulation; }

/* ---------- Smallest text stays at 12px or above ---------- */
.fr-badge { font-size: 12px; line-height: 14px; }

/* ---------- Buttons keep their label on one line ---------- */
.fr-btn { white-space: nowrap; }
@media (max-width: 480px) { .fr-btn { white-space: normal; } }

/* ---------- Map credit stays visible above the panel that tucks under the map ---------- */
@media (max-width: 1024px) { .fr-visit .fr-map .leaflet-bottom { bottom: 60px; } }
@media (max-width: 480px) { .fr-visit .fr-map .leaflet-bottom { bottom: 52px; } }

/* ---------- Social links in the footer ---------- */
.fr-ftr__follow { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.fr-ftr__follow a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(197, 212, 238, 0.35); border-radius: 50%; color: var(--on-deep); transition: background-color var(--duration-hover) var(--ease-out), border-color var(--duration-hover) var(--ease-out), transform var(--duration-press) var(--ease-out); }
.fr-ftr__follow a:hover { border-color: var(--on-deep); background: rgba(255, 255, 255, 0.12); text-decoration: none; }
.fr-ftr__follow a:active { transform: scale(0.94); }
.fr-ftr__follow .fr-icon { width: 20px; height: 20px; }

/* ---------- Official logo, shown exactly as supplied by the college ----------
   White emblem ring and gold wordmark: it is made for dark grounds, so it sits straight on the dark header glass
   and on a navy plate whenever the bar turns light. Only its display size changes. */
.fr-brand { margin-left: -8px; padding: 6px 10px; border-radius: 14px; background: transparent; }
.fr-hdr[data-tone="light"] .fr-brand { background: var(--brand-deep); box-shadow: 0 1px 2px rgba(10, 31, 68, 0.2); }
.fr-brand img { height: 60px; width: auto; }
@media (min-width: 1201px) and (max-width: 1360px) { .fr-brand img { height: 48px; } }
@media (max-width: 1200px) { .fr-brand img { height: 50px; } }
@media (max-width: 480px) { .fr-brand img { height: 44px; } }
.fr-ftr__logo { display: inline-block; margin: 0 0 var(--space-5); border-radius: var(--radius-md); }
.fr-ftr__logo img { display: block; width: 216px; height: auto; }
.fr-ftr__logo:hover { text-decoration: none; opacity: 0.9; }
/* Divi caps #logo at max-width: 50% on small screens, which squeezes a fixed-height logo out of proportion. The logo keeps its own aspect ratio at every size. */
.fr-brand img#logo { max-width: none; width: auto; aspect-ratio: 240 / 72; object-fit: contain; }

/* ---------- Page-level refinements from the phone and tablet audit ---------- */
/* a form block at the top of a page does not add its own margin on top of the section padding */
.fr-prose > .fr-fgrid:first-child { margin-top: 0; }
/* breadcrumbs stay on one line on phones; a long title is cut with an ellipsis instead of wrapping under Home */
@media (max-width: 640px) {
	.fr-crumbs { flex-wrap: nowrap; max-width: 100%; }
	.fr-crumbs > * { flex: none; }
	.fr-crumbs > b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* campus photos (About): three across on tablets, shorter frames on phones */
@media (min-width: 561px) and (max-width: 900px) {
	.fr-campus__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fr-campus__strip .fr-glass { left: 10px; bottom: 10px; padding: 6px 12px; font-size: 13px; }
}
@media (max-width: 560px) { .fr-campus__strip .fr-bc__media { aspect-ratio: 16 / 10; } }
/* touch hit areas: small text links get a 44px target without moving anything */
@media (max-width: 1024px), (pointer: coarse) {
	.fr-crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
	.fr-chan__v, .fr-office dd a, .fr-visit__rows a { display: inline-block; padding: 10px 0; margin: -10px 0; }
	.fr-fe a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
}
/* short screens (landscape phones): the drawer scrolls as one piece so the menu is never squeezed to a sliver above the actions */
@media (max-height: 640px) {
	.fr-drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.fr-drawer__h { position: sticky; top: 0; z-index: 1; flex: none; background: var(--surface); }
	.fr-dl { flex: none; overflow: visible; }
	.fr-drawer__f { flex: none; }
	.fr-dl > li > a, .fr-dl > li > button { min-height: 48px; }
}
/* very narrow phones (foldables at 280px): the stat strip and map button shrink instead of clipping */
@media (max-width: 340px) {
	.fr-glance__i { padding: var(--space-5) var(--space-4); }
	.fr-glance__i b { font-size: 36px; }
	.fr-glance__l { letter-spacing: 0.06em; font-size: 12px; }
	.fr-map__load { gap: 6px; padding: 0 var(--space-3); font-size: 13px; }
}

/* ---------- The top info bar stays fixed with the header on every screen size ---------- */
:root { --stick: var(--util-h); }
.fr-util, #top-header.fr-util { position: sticky; top: 0; z-index: calc(var(--z-header) + 1); }
#main-header.fr-hdr { top: var(--stick); }
.fr-subnav.is-docked { top: calc(var(--header-h) + var(--stick)); }
.fr-split .fr-box { top: calc(var(--header-h) + var(--stick) + var(--space-6)); }
[id="story"], [id="history"], [id="campus"], [id="vision"], [id="messages"], [id="management"], [id="recognition"],
[id="reach"], [id="offices"], [id="message"], [id="find-us"], [id="grievances"], [id="connect"] { scroll-margin-top: calc(var(--header-h) + var(--stick) + 64px); }
/* landscape phones are too short to give up two bars: only the main header stays */
@media (max-height: 480px) {
	:root { --stick: 0px; }
	.fr-util, #top-header.fr-util { position: relative; }
}

/* ---------- Hero: sizing now that the scroll cue and pause button are gone ---------- */
/* phones fill the first screen; the copy keeps clear of the floating action bar at the bottom */
@media (max-width: 760px) {
	.fr-h { min-height: max(600px, calc(100svh - var(--util-h))); }
}
/* tablets: the action bar floats bottom-right, so a modest gap under the buttons is enough */
@media (min-width: 641px) and (max-width: 1180px) {
	.fr-h__copy { padding-bottom: 96px; }
}
/* landscape phones: the screen is only about 375px tall, so tighten the copy and let the hero grow past it */
@media (max-height: 520px) and (orientation: landscape) {
	.fr-h { min-height: 0; }
	.fr-h__in { padding-top: calc(var(--header-h) + var(--space-6)); }
	.fr-h__copy { padding-bottom: var(--space-12); }
	.fr-h h1 { font-size: clamp(30px, 5vw, 40px); }
	.fr-h__lead { margin-top: var(--space-3); font-size: 16px; line-height: 24px; }
	.fr-h .fr-rule { margin: var(--space-2) 0 var(--space-3); }
	.fr-h__actions { margin-top: var(--space-4); }
	.fr-h__actions .fr-btn { width: auto; }
}