/*
 * Glacial Blocks — shared front-end + editor stylesheet.
 *
 * Loads AFTER css/webflow.css in both contexts (see glacial_blocks_assets()).
 * Everything here is either (a) a layout recipe the design expresses through
 * per-page #w-node ids that inner pages cannot reuse, or (b) a cross-block
 * modifier. Design *appearance* stays in webflow.css — never restate colours
 * or type here that a Webflow class already owns.
 *
 * Breakpoints mirror the design's own collapse points, read from webflow.css:
 *   991px  two-column grids -> 1 column, 4-up stats -> 2-up
 *   767px  3-up grids -> 1 column
 *   479px  everything -> 1 column
 */

/* ---------------------------------------------------------------------------
 * Content width
 *
 * Section bands are full-bleed, but their CONTENT is capped to the theme's
 * content width so blocks line up with classic content on the same page.
 * --gl-max-width is the same token .standard-inner-wrapper uses.
 *
 * The cap only bites above roughly 1690px of viewport, where the design's 10%
 * side padding would otherwise leave a line of text too long to read.
 * ------------------------------------------------------------------------ */

.gl-section > * {
	max-width: var(--gl-max-width, 1350px);
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * Link components inside the theme's inner-page wrapper
 *
 * style.css ships `.entry a { color: #437AB2; text-decoration: underline }`.
 * That is specificity (0,1,1) and so beats the design's own `.button` (0,1,0)
 * and `.text-button` (0,1,0) NO MATTER the load order — inner-page buttons come
 * out link-blue and underlined while the identical markup on the homepage (which
 * has no .entry wrapper) renders correctly.
 *
 * Everything below is scoped to `.entry` on purpose: an unscoped `a.button` rule
 * would also load on the homepage and override the design there.
 * ------------------------------------------------------------------------ */

.entry a.button,
.entry a.text-button {
	text-decoration: none;
}

.entry a.button,
.entry a.button:hover {
	color: var(--white);
}

/* Arrow links default to brand blue, which is legible on white and tint. */
.entry a.text-button {
	color: var(--blue1);
}

.entry a.text-button:hover {
	color: var(--blue3);
}

/* On dark bands and dark cards, the design's white. */
.entry .gl-section-dark a.text-button,
.entry .gl-section-dark-alt a.text-button,
.entry .resources_cell:not(.gl-card-light) a.text-button {
	color: var(--white);
}

.entry .gl-section-dark a.text-button:hover,
.entry .gl-section-dark-alt a.text-button:hover,
.entry .resources_cell:not(.gl-card-light) a.text-button:hover {
	color: #4bcaff;
}

/* ---------------------------------------------------------------------------
 * Grid
 *
 * The homepage gets grid-template-columns from #w-node-<uuid> ids generated per
 * page by Webflow; .two_columns_grid / .stats_grid / .resources_grid carry only
 * gap and padding. Inner pages therefore need their own column recipes.
 * ------------------------------------------------------------------------ */

.gl-grid {
	padding: 0;
	grid-auto-columns: 1fr;
	grid-template-rows: auto;
}

.gl-cols-2 { grid-template-columns: 1fr 1fr; }
.gl-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.gl-cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Asymmetric splits the design uses: .5fr/1fr (doctors) and .4fr/1fr (physicians). */
.gl-cols-sidebar-left  { grid-template-columns: .5fr 1fr; }
.gl-cols-sidebar-right { grid-template-columns: 1fr .5fr; }

/* Gaps, matching the design's three values. */
.gl-gap-small   { grid-row-gap: 20px; grid-column-gap: 20px; }
.gl-gap-default { grid-row-gap: 30px; grid-column-gap: 30px; }
.gl-gap-large   { grid-row-gap: 3svw; grid-column-gap: 3svw; }

@media screen and (max-width: 991px) {
	.gl-cols-2,
	.gl-cols-sidebar-left,
	.gl-cols-sidebar-right { grid-template-columns: 1fr; }
	.gl-cols-4 { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 767px) {
	.gl-cols-3 { grid-template-columns: 1fr; }
}

@media screen and (max-width: 479px) {
	.gl-cols-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Cell
 * ------------------------------------------------------------------------ */

.gl-cell-middle { justify-content: center; }
.gl-cell-bottom { justify-content: flex-end; }

/* Matches .content_cell — inset from the gutter so text does not run to the edge. */
.gl-cell-inset { padding-right: 10%; }

@media screen and (max-width: 991px) {
	.gl-cell-inset {
		padding-top: 5%;
		padding-bottom: 5%;
		padding-right: 0%;
	}
}

/* ---------------------------------------------------------------------------
 * Section
 *
 * Grounds lifted verbatim from the design's section classes so an inner-page
 * band is indistinguishable from the homepage's.
 * ------------------------------------------------------------------------ */

.gl-section {
	padding: 5% 10%;
}

/* .expect_section / .contact_section */
.gl-section-tint {
	background-color: #0000000d;
	color: var(--black);
}

/* .stats_section */
.gl-section-dark {
	background-color: var(--blue2);
	background-image:
		radial-gradient(circle farthest-corner at 80% 100%, #0692cc38, #0000 44%),
		radial-gradient(circle farthest-corner at 0% 100%, var(--blue1), #0000 46%);
	color: var(--white);
}

/* .physicians_section */
.gl-section-dark-alt {
	background-color: var(--blue2);
	background-image:
		radial-gradient(circle farthest-corner at 75% 100%, var(--blue3), #0000 66%),
		radial-gradient(circle farthest-corner at 30% 0%, #1174b473, #0000 44%);
	color: var(--white);
}

/* Dark grounds need the type inverted; the design does this per-element with
   .hp_headline.white, which inner-page content should not have to remember. */
.gl-section-dark :is(h1, h2, h3, h4, h5, p, li, .hp_headline, .hp_subheadline),
.gl-section-dark-alt :is(h1, h2, h3, h4, h5, p, li, .hp_headline, .hp_subheadline) {
	color: var(--white);
}

.gl-section-dark a:not(.button):not(.text-button):hover,
.gl-section-dark-alt a:not(.button):not(.text-button):hover {
	color: #71d5ff;
}

/* Spacing tokens. `default` maps to no class, so existing content is unaffected. */
.gl-space-none  { padding-top: 0; padding-bottom: 0; }
.gl-space-small { padding-top: 2.5%; padding-bottom: 2.5%; }
.gl-space-large { padding-top: 8%; padding-bottom: 8%; }

@media screen and (max-width: 991px) {
	.gl-section { padding-top: 10%; padding-bottom: 10%; }
	.gl-space-none  { padding-top: 0; padding-bottom: 0; }
	.gl-space-small { padding-top: 5%; padding-bottom: 5%; }
	.gl-space-large { padding-top: 15%; padding-bottom: 15%; }
}

/* Centred intro block — .center_wrapper */
.gl-section > .center_wrapper + .gl-grid,
.gl-section > .center_wrapper + .feature_main_container {
	margin-top: 60px;
}

@media screen and (max-width: 991px) {
	.gl-section > .center_wrapper + .gl-grid { margin-top: 40px; }
}

/* ---------------------------------------------------------------------------
 * Heading
 *
 * Visual size is decoupled from semantic level so an inner page can keep a
 * correct outline (h2 -> h3 -> h4) without the type shrinking with it.
 * `default` maps to no class and inherits .hp_headline's 2.4rem.
 * ------------------------------------------------------------------------ */

.gl-heading .hp_headline.gl-heading-small {
	font-size: 1.8rem;
	line-height: 2rem;
}

.gl-heading .hp_headline.gl-heading-large {
	font-size: 3rem;
	line-height: 3.2rem;
}

/* The subheadline is the last thing in the block; the section or grid below it
   owns the gap, so drop the design's trailing 30px. */
.gl-heading > :last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 479px) {
	.gl-heading .hp_headline.gl-heading-small { font-size: 1.5rem; line-height: 1.8rem; }
	.gl-heading .hp_headline.gl-heading-large { font-size: 2.2rem; line-height: 2.4rem; }
}

/* ---------------------------------------------------------------------------
 * Media panel — .hp_img_div1 / .feature_img_div heights as tokens
 * ------------------------------------------------------------------------ */

.gl-media-short  { height: 400px; }
.gl-media-tall   { height: 600px; }
.gl-media-auto   { height: auto; }
.gl-media-auto img { height: auto; }

/* .hp_img_div1 ships 10px; .feature_img_div uses 20px. */
.gl-media-r-large { border-radius: 20px; }

@media screen and (max-width: 991px) {
	.gl-media-short { height: 400px; }
	.gl-media-tall  { height: 300px; }
}

@media screen and (max-width: 767px) {
	.gl-media-short { height: 350px; }
}

@media screen and (max-width: 479px) {
	.gl-media-short { height: 250px; }
	.gl-media-tall  { height: 220px; }
}

/* ---------------------------------------------------------------------------
 * Bullet list
 *
 * The design's own `ul`/`li` rules in webflow.css do the styling; .gl-bullets is
 * a scoping hook and .gl-bullets-2 the only real rule.
 * ------------------------------------------------------------------------ */

/* webflow.css styles `ul` (margin, 20px indent, 1.4rem line-height) but not `ol`,
   so a numbered list would sit on components.css's plain reset and break the
   design's list rhythm. Restate it for the ordered case. */
ol.gl-bullets {
	margin-top: 0;
	margin-bottom: 20px;
	padding-left: 20px;
	line-height: 1.4rem;
}

.gl-bullets-2 {
	columns: 2;
	column-gap: 3svw;
}

/* Keep an item from being split across the column break. */
.gl-bullets-2 li {
	break-inside: avoid;
}

@media screen and (max-width: 767px) {
	.gl-bullets-2 { columns: 1; }
}

/* ---------------------------------------------------------------------------
 * Icon card — .resources_cell on a light ground
 *
 * The design only ever places .resources_cell on a dark section. On white or
 * tint the white hairline border and near-transparent fill vanish, so give the
 * light variant its own treatment rather than leaving an invisible card.
 * ------------------------------------------------------------------------ */

.gl-card-light {
	background-color: #00000008;
	border: 1px solid #0000001f;
}

.gl-card-light .resources_headline { color: var(--blue1); }
.gl-card-light .resources_text     { color: var(--dark-grey); }
.gl-card-light .text-button        { color: var(--blue1); }
.gl-card-light .text-button:hover  { color: var(--blue3); }

/* The design fixes .resources_headline at 70px to keep a 3-up row's text
   baselines aligned. A 1-up or 2-up inner-page row does not need that. */
.gl-card-auto-height .resources_headline { height: auto; margin-bottom: 20px; }

/* ---------------------------------------------------------------------------
 * Stat card on a light ground — .stat_cell inverted
 * ------------------------------------------------------------------------ */

.gl-stat-light {
	color: var(--blue3);
	background-image: radial-gradient(circle closest-side, #1174b41f, #0000);
	border: 1px solid #1174b433;
}

.gl-stat-light .stat_number { color: var(--blue1); }

/* .stat_number inherits nothing but its own rules, and the export relied on the
   h2 element for font-weight: 300. stat-card emits a <div> so the figure stays
   out of the heading outline, so restate the weight here. */
.gl-stat .stat_number { font-weight: 300; }

/* ---------------------------------------------------------------------------
 * Two-column order swapping
 *
 * Breakpoint is the design's own grid-collapse point (991px), so "mobile" means
 * exactly "while the columns are stacked".
 * ------------------------------------------------------------------------ */

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

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

/* ---------------------------------------------------------------------------
 * Device visibility
 * ------------------------------------------------------------------------ */

@media screen and (min-width: 992px) {
	.gl-hide-desktop { display: none !important; }
}

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

@media screen and (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;
}

/* ---------------------------------------------------------------------------
 * Accessibility
 * ------------------------------------------------------------------------ */

.gl-section :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.gl-grid :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--blue4);
	outline-offset: 2px;
}

.gl-section-dark :is(a, button):focus-visible,
.gl-section-dark-alt :is(a, button):focus-visible {
	outline-color: #71d5ff;
}

@media (prefers-reduced-motion: reduce) {
	.gl-section *,
	.gl-grid * {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}