/*
 * Glacial Blocks — shared front-end + editor styles.
 *
 * css/webflow.css owns the design system. Everything here either (a) provides
 * utilities the export has no equivalent for, or (b) extends the export's own
 * tokens and rhythm for content blocks the homepage never needed.
 *
 * Breakpoints match the export: 991 (medium) / 767 (small) / 479 (mobile).
 */

/* ---------------------------------------------------------------
   Device visibility — emitted only when toggled on
   --------------------------------------------------------------- */

@media (min-width: 992px) {
	.gl-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.gl-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
	.gl-hide-mobile { display: none !important; }
}

/* Keep hidden blocks editable in the canvas, just dimmed. */
.editor-styles-wrapper .gl-hide-desktop,
.editor-styles-wrapper .gl-hide-tablet,
.editor-styles-wrapper .gl-hide-mobile {
	display: revert !important;
	opacity: .55;
}

/* ---------------------------------------------------------------
   Column order swapping — 991 is the export's own collapse point
   --------------------------------------------------------------- */

@media (min-width: 992px) {
	.gl-swap-desktop > :first-child { order: 2; }
	.gl-swap-desktop > :last-child  { order: 1; }
}
@media (max-width: 991px) {
	.gl-swap-mobile > :first-child { order: 2; }
	.gl-swap-mobile > :last-child  { order: 1; }
}

/* ---------------------------------------------------------------
   Section — full-bleed band with background + spacing tokens
   --------------------------------------------------------------- */

.gl-section {
	position: relative;
	width: 100%;
}

.gl-section-inner {
	width: 90%;
	max-width: 1350px;
	margin-inline: auto;
}

.gl-section.gl-bg-dark       { background-color: var(--goldenrod-2); color: var(--white); }
.gl-section.gl-bg-smoke      { background-color: var(--white-smoke); }
.gl-section.gl-bg-white      { background-color: var(--white); }
.gl-section.gl-bg-none       { background-color: transparent; }

.gl-section.gl-bg-dark :is(h1, h2, h3, h4, p, li) { color: var(--white); }

.gl-pad-none   { padding-block: 0; }
.gl-pad-small  { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.gl-pad-large  { padding-block: clamp(4rem, 9vw, 8rem); }
/* `default` maps to no class — the export's own rhythm. */
.gl-section    { padding-block: clamp(2.5rem, 6vw, 5rem); }
.gl-section.gl-pad-none  { padding-block: 0; }
.gl-section.gl-pad-small { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.gl-section.gl-pad-large { padding-block: clamp(4rem, 9vw, 8rem); }

/* ---------------------------------------------------------------
   Grid — token-driven column container
   --------------------------------------------------------------- */

.gl-grid {
	display: grid;
	gap: var(--gl-grid-gap, 1.5rem);
	align-items: stretch;
}

.gl-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gl-gap-small { --gl-grid-gap: .75rem; }
.gl-gap-large { --gl-grid-gap: 2.5rem; }

@media (max-width: 991px) {
	.gl-cols-3, .gl-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.gl-cols-2, .gl-cols-3, .gl-cols-4 { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Swipe is a behaviour modifier, orthogonal to the column recipe — it must
 * match on its own class, never compounded with .gl-grid, because a preset
 * can replace the base class entirely.
 */
@media (max-width: 767px) {
	.gl-swipe {
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 5vw;
		padding-bottom: .75rem;
		-webkit-overflow-scrolling: touch;
	}
	.gl-swipe > * { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------
   Focus — never removed, always replaced
   --------------------------------------------------------------- */

.gl-section :is(a, button):focus-visible,
.gl-card:focus-visible,
.gl-card a:focus-visible {
	outline: 2px solid var(--steel-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.gl-card, .gl-card * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------
   Section heading — the two-tone lead/emphasis pattern
   --------------------------------------------------------------- */

.gl-sec-head {
	margin-block: 0 1rem;
	text-wrap: balance;
}

/*
 * The two-tone effect: webflow.css sets no weight on h2 and no rule on
 * <strong>, so both halves are declared here rather than left to the browser
 * default — otherwise the contrast changes with whatever font actually loads.
 */
.gl-sec-head .gl-head-lead {
	font-weight: 400;
}

.gl-sec-head .gl-head-emphasis {
	font-weight: 700;
}

/* Visual size, decoupled from semantic level. */
.gl-sec-head.gl-head-sm { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.gl-sec-head.gl-head-lg { font-size: clamp(2rem, 5vw, 3.25rem); }

.gl-sec-head.has-text-align-left   { text-align: left; }
.gl-sec-head.has-text-align-center { text-align: center; }
.gl-sec-head.has-text-align-right  { text-align: right; }

/* ---------------------------------------------------------------
   Button row
   --------------------------------------------------------------- */

.gl-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
}

.gl-buttons.gl-justify-left   { justify-content: flex-start; }
.gl-buttons.gl-justify-center { justify-content: center; }
.gl-buttons.gl-justify-right  { justify-content: flex-end; }

/* ---------------------------------------------------------------
   Hover card — the .age_wrapper pattern, made keyboard-operable
   --------------------------------------------------------------- */

.gl-card {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid #ffffff5c;
	border-radius: 20px;
	background-color: var(--goldenrod-2);
	text-decoration: none;
	min-height: 18rem;
	isolation: isolate;
}

.gl-card-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.gl-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
	transform: scale(1);
	transition: transform .6s ease;
}

.gl-card:hover .gl-card-img,
.gl-card:focus-within .gl-card-img {
	transform: scale(1.06);
}

.gl-card-overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 18rem;
	padding: 1.5rem;
	background: linear-gradient(to top, #101829f2 0%, #10182999 45%, #10182926 100%);
}

.gl-card-title {
	color: var(--white);
	font-size: 1.4em;
	font-weight: 600;
	line-height: 1.2em;
}

/*
 * The body is revealed, never removed: it stays in the accessibility tree and
 * forms part of the link's accessible name, so the copy is available to a
 * screen reader whether or not a pointer ever hovers the card.
 */
.gl-card-body {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .45s ease, opacity .45s ease;
}

.gl-card:hover .gl-card-body,
.gl-card:focus-within .gl-card-body {
	grid-template-rows: 1fr;
	opacity: 1;
}

.gl-card-text {
	overflow: hidden;
	margin: .75rem 0 0;
	color: var(--white);
	font-size: .95em;
	line-height: 1.5;
}

/* Touch devices have no hover: show the copy rather than hide it forever. */
@media (hover: none) {
	.gl-card-body { grid-template-rows: 1fr; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.gl-card-img { transition: none; }
	.gl-card-body { transition: opacity .01ms; }
}

/* Editor canvas renders a div, not a link — keep one rule covering both. */
.editor-styles-wrapper .gl-card .gl-card-body {
	grid-template-rows: 1fr;
	opacity: 1;
}

.gl-card-placeholder {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------
   Provider cards — dynamic grid of the Doctors records
   --------------------------------------------------------------- */

.gl-provider {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.gl-provider-media {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	background-color: var(--goldenrod-2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gl-provider-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
	transition: transform .5s ease;
}

.gl-provider:hover .gl-provider-img,
.gl-provider:focus-visible .gl-provider-img {
	transform: scale(1.05);
}

/* Shown when a provider has no headshot on file yet. */
.gl-provider-initials {
	color: var(--steel-blue);
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1;
}

.gl-provider-name {
	margin-top: .85rem;
	font-weight: 600;
	line-height: 1.25;
}

.gl-provider-role {
	margin-top: .15rem;
	font-size: .88em;
	color: var(--goldenrod);
}

.gl-section.gl-bg-dark .gl-provider-role { color: var(--steel-blue); }

@media (prefers-reduced-motion: reduce) {
	.gl-provider-img { transition: none; }
}