/*
 * Glacial Blocks — shared block CSS.
 * Loaded on the front end and inside the editor iframe (see glacial-blocks.php).
 * Webflow classes are styled by css/webflow.css; only block-specific utilities
 * and ported Webflow interactions live here.
 */

/*
 * Editor canvas content column (.editor-styles-wrapper never matches the
 * front end). theme.json declares no layout.contentSize, so the canvas root
 * is unconstrained; mirror the front end instead: root-level content blocks
 * sit in a .wrap-equivalent column (90% / 1600px — webflow.css .wrap), while
 * glacial/* section blocks keep the full canvas width their full-width
 * templates give them (they carry their own .wrap inside).
 */
.editor-styles-wrapper .is-root-container > .wp-block:not([data-type^="glacial/"]):not(.alignfull):not(.alignwide),
.editor-styles-wrapper .is-root-container > .block-list-appender {
	max-width: min(90%, 1600px);
	margin-left: auto;
	margin-right: auto;
}

.editor-styles-wrapper .editor-visual-editor__post-title-wrapper,
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
	max-width: min(90%, 1600px);
	margin-left: auto;
	margin-right: auto;
}

/*
 * Text alignment for glacial/heading (attribute `align`). Kept separate from the
 * colour variants: Webflow's .h2-center bakes navy + centred into one class, so
 * it can never combine with .h2-white / .h4-gold. These carry alignment only.
 * `left` is offered explicitly so a heading can opt out of a centred ancestor.
 */
.gl-text-left { text-align: left; }
.gl-text-center { text-align: center; }
.gl-text-right { text-align: right; }

/*
 * Long unbreakable strings — nearly always a URL pasted in as its own link
 * text — carry no break opportunity, so instead of wrapping they push past
 * their container. It shows up worst in the fixed-width cards: .gl-timeline-item
 * is width: calc(50% - 2.5rem) and cannot grow, so the text simply spills out
 * of the cream box.
 *
 * overflow-wrap is an inherited property, so declaring it on the container
 * covers its paragraphs, list items and anchors without selecting each one.
 * `anywhere` additionally shrinks the element's min-content width, which is what
 * stops a long URL blowing out a grid or flex track; `break-word` is declared
 * first as the fallback for Safari < 15.4, which doesn't know `anywhere`.
 */
.gl-list,
.gl-timeline-item,
.gl-grid,
.gl-faq,
.gl-page-intro {
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}

/* glacial/grid — generic column layout */
.gl-grid {
	display: grid;
	gap: 2rem;
}

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

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

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

/* glacial/grid — "Last cell full width" option (gl-last-full). The final cell
 * spans every column, so Columns 2 + three cells = two columns with one
 * full-width column underneath. Holds at the 991 breakpoint (3/4 collapse to
 * 2 columns) and is moot at 767, where the grid is a single column. */
.gl-grid.gl-last-full > :last-child {
	grid-column: 1 / -1;
}

/* Editor: the inserter appender is the real last child, so span the cell that
 * precedes it (and the appender itself, so it doesn't sit in a stray column). */
.editor-styles-wrapper .gl-grid.gl-last-full > :has(+ .block-list-appender) {
	grid-column: 1 / -1;
}

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

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

/* glacial/grid — "Cell background" option (gl-cellbg-*). Every direct child
 * (typically a glacial/grid-cell) is a card; the option only swaps its color,
 * and the default — no gl-cellbg-* class at all — is WHITE. Colors are the
 * theme.json brand palette. Teal/navy count as dark: their cell text flips
 * white — headings and links carry their own colors in webflow.css, so they
 * need the explicit override on top of the inherited color. Square corners by
 * owner call (2026-08-12) — no radius on the cells. */
.gl-grid {
	margin-bottom: 2rem;
}

.gl-grid > * {
	padding: 1.5rem;
	background-color: #fff;
}

.gl-grid > * > :first-child {
	margin-top: 0;
}

.gl-grid > * > :last-child {
	margin-bottom: 0;
}

.gl-grid.gl-cellbg-cream > * { background-color: #fcf5e9; } /* lum-cream */
.gl-grid.gl-cellbg-sage > * { background-color: #a5b092; }  /* lum-sage */
.gl-grid.gl-cellbg-teal > * { background-color: #4b7881; }  /* lum-teal */
.gl-grid.gl-cellbg-navy > * { background-color: #001543; }  /* gsd-navy */

.gl-grid.gl-cellbg-teal > *,
.gl-grid.gl-cellbg-navy > * {
	color: #fff;
}

.gl-grid.gl-cellbg-teal > * :is(h1, h2, h3, h4, h5, h6, a),
.gl-grid.gl-cellbg-navy > * :is(h1, h2, h3, h4, h5, h6, a) {
	color: #fff;
}

/* Editor: the inserter appender is also a direct grid child — keep it plain. */
.editor-styles-wrapper .gl-grid > .block-list-appender {
	padding: 0;
	background: none;
	color: inherit;
}

/* glacial/location-specialties — accordion behavior (Webflow IX ported) */
.glacial-specialties .faq2_question-2 {
	cursor: pointer;
}

.glacial-specialties .faq2_answer {
	height: auto;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.glacial-specialties .faq2_accordion.open .faq2_answer {
	max-height: 1200px;
}

.glacial-specialties .faq2_icon-2 {
	transition: transform 0.35s ease;
}

.glacial-specialties .faq2_accordion.open .faq2_icon-2 {
	transform: rotate(180deg);
}

/* glacial/location-insurances — optional SEO subtext under a carrier name */
.insurance .insurance-subtext {
	font-size: 0.8em;
	opacity: 0.75;
}

/* Editor-only niceties for dynamic-block placeholders */
.glacial-block-placeholder {
	padding: 24px;
	border: 1px dashed #949494;
	background: #f0f0f0;
	color: #1e1e1e;
	font-size: 13px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Block option flags (Kadence-pattern; breakpoints = Webflow's 991/767).
 * Classes are emitted only when a toggle is on, so existing content is
 * unaffected. Editor keeps hidden blocks editable, dimmed.
 * ------------------------------------------------------------------------- */
@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; } }
.editor-styles-wrapper .gl-hide-desktop,
.editor-styles-wrapper .gl-hide-tablet,
.editor-styles-wrapper .gl-hide-mobile { display: revert !important; opacity: 0.55; }

/* Column-order swap on the two-column luminous sections. The flag sits on the
 * block root; each rule targets that block's real flex container. 992px is the
 * design's own collapse point (columns go 100%/flex-flow column at 991). */
@media (min-width: 992px) {
	.gl-swap-desktop.ip-luminous-hero,
	.gl-swap-desktop.ip-1-service,
	.gl-swap-desktop.cta .inner-cta-div,
	.gl-swap-desktop.stat-section > .wrap.flex,
	.gl-swap-desktop.gl-page-intro > .wrap.flex { flex-direction: row-reverse; }
}
@media (max-width: 991px) {
	.gl-swap-mobile.ip-luminous-hero,
	.gl-swap-mobile.ip-1-service,
	.gl-swap-mobile.cta .inner-cta-div,
	.gl-swap-mobile.stat-section > .wrap.flex,
	.gl-swap-mobile.gl-page-intro > .wrap.flex { flex-direction: column-reverse; }
}

/* glacial/faq — native details/summary accordion (no JS) */
.gl-faq details { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.gl-faq summary { cursor: pointer; padding: 1em 2.2em 1em 0; font-weight: 600; list-style: none; position: relative; }
.gl-faq summary::-webkit-details-marker { display: none; }
.gl-faq summary::after { content: "+"; position: absolute; right: 0.4em; top: 50%; transform: translateY(-50%); font-size: 1.4em; line-height: 1; }
.gl-faq details[open] > summary::after { content: "\2212"; }
.gl-faq .gl-faq-answer { padding: 0 0 1.2em; }

/* glacial/slider — scroll-snap image strip with prev/next arrows (view.js).
 * ~2.5 slides visible desktop, 1.5 tablet, 1 mobile; arrows ship [hidden] and
 * only appear when JS finds overflow, so no-JS keeps a clean swipe strip. */
.gl-slider {
	position: relative;
	margin-bottom: 30px;
}

.gl-slider .gl-slider-track {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.gl-slider .gl-slider-slide {
	flex: 0 0 calc((100% - 2rem) / 2.5);
	margin: 0;
	scroll-snap-align: start;
}

.gl-slider .gl-slider-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-slider .gl-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #001543; /* gsd-navy */
	color: #fff;
	cursor: pointer;
}

.gl-slider .gl-slider-prev { left: -10px; }
.gl-slider .gl-slider-next { right: -10px; }

.gl-slider .gl-slider-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.gl-slider .gl-slider-arrow:focus-visible {
	outline: 2px solid #001543;
	outline-offset: 2px;
}

/* Lightbox thumbnails: the <a> wrapper must not disturb the track/grid
 * layout, and reads as zoomable. */
.gl-slider--lightbox .gl-slider-zoom {
	display: block;
	line-height: 0;
	cursor: zoom-in;
	height: 100%;
}

.gl-slider--lightbox .gl-slider-zoom:focus-visible {
	outline: 2px solid var(--color-6, #d29f13);
	outline-offset: 3px;
}

/* The lightbox dialog itself. Base .modal/.modal__overlay/.micromodal-slide
 * animation CSS lives in the theme's style.css (shared with the search
 * modal); these rules only widen the container for imagery and lay out the
 * stage + pager. */
.gl-lightbox .gl-lightbox__container {
	max-width: min(1400px, 94vw);
	padding: 44px 20px 20px;
	background: #fff;
}

.gl-lightbox .gl-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40vh;
}

.gl-lightbox .gl-lightbox-slide {
	margin: 0;
}

.gl-lightbox .gl-lightbox-img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 74vh;
	margin: 0 auto;
	object-fit: contain;
}

.gl-lightbox .gl-lightbox__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1rem;
}

.gl-lightbox .gl-lightbox-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #001543; /* gsd-navy */
	color: #fff;
	cursor: pointer;
}

.gl-lightbox .gl-lightbox-arrow:focus-visible {
	outline: 2px solid var(--color-6, #d29f13);
	outline-offset: 2px;
}

.gl-lightbox .gl-lightbox-counter {
	margin: 0;
	min-width: 5em;
	text-align: center;
	font-size: 0.9em;
}

.gl-slider--empty {
	padding: 32px 16px;
	border: 1px dashed #949494;
	text-align: center;
	color: #757575;
}

/* "Grid" layout (gl-gallery-grid + gl-gallery-cols-N): same track markup,
 * laid out as a column grid — no arrows, no scrolling. Collapses like the
 * glacial/grid block: 3/4 cols -> 2 at 991, everything -> 1 at 767. */
.gl-slider.gl-gallery-grid .gl-slider-track {
	display: grid;
	overflow: visible;
	scroll-snap-type: none;
}

.gl-slider.gl-gallery-grid .gl-slider-slide {
	flex-basis: auto;
}

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

@media screen and (max-width: 991px) {
	.gl-slider.gl-gallery-cols-3 .gl-slider-track,
	.gl-slider.gl-gallery-cols-4 .gl-slider-track {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

@media screen and (max-width: 991px) {
	.gl-slider .gl-slider-slide {
		flex-basis: calc((100% - 1rem) / 1.5);
	}
}

@media screen and (max-width: 767px) {
	.gl-slider .gl-slider-slide {
		flex-basis: 100%;
	}
}

/* .gl-button-grid — "Additional CSS class" for a core/buttons block: equal-
 * width button cells in a grid, each button filling its cell. Four across to
 * match the live /online-appointments/ model (Elementor col-25 +
 * align-justify), stepping down on narrower screens. Doubled class beats
 * core's :where() flex-layout rules regardless of print order. */
.wp-block-buttons.gl-button-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}
.wp-block-buttons.gl-button-grid a {
	font-size: 1.1rem;

}

@media (max-width: 1080px) {
	.wp-block-buttons.gl-button-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
	.wp-block-buttons.gl-button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
	.wp-block-buttons.gl-button-grid { grid-template-columns: 1fr; }
}

.wp-block-buttons.gl-button-grid .wp-block-button {
	width: 100%;
	margin: 0;
	height: 100%;
}

.wp-block-buttons.gl-button-grid .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* glacial/instagram — Instagram's own embed styles itself; we only constrain
 * the width (--gl-ig-max, set per block) and optionally center it. The editor
 * preview swaps the blockquote for an iframe, so both are covered. */
.gl-instagram {
	margin: 0 0 1.5rem;
}

.gl-instagram--center {
	display: flex;
	justify-content: center;
}

/* Several embeds side by side. Grid wins over the flex centering above (both
 * set `display`, this comes later), and each cell caps at --gl-ig-max. */
.gl-instagram--grid {
	display: grid;
	gap: 1.5rem;
	justify-content: center;
	justify-items: center;
}

.gl-instagram-cols-2 { grid-template-columns: repeat(2, minmax(0, var(--gl-ig-max, 540px))); }
.gl-instagram-cols-3 { grid-template-columns: repeat(3, minmax(0, var(--gl-ig-max, 540px))); }

@media screen and (max-width: 991px) {
	.gl-instagram-cols-3 { grid-template-columns: repeat(2, minmax(0, var(--gl-ig-max, 540px))); }
}

@media screen and (max-width: 767px) {
	.gl-instagram-cols-2,
	.gl-instagram-cols-3 { grid-template-columns: minmax(0, var(--gl-ig-max, 540px)); }
}

.gl-instagram .instagram-media,
.gl-instagram .gl-instagram-frame {
	max-width: var(--gl-ig-max, 540px) !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

.gl-instagram .gl-instagram-frame {
	display: block;
	background: #fff;
	border: 1px solid #dbdbdb;
	border-radius: 3px;
}

/* glacial/list — brand list. The arrow marker is the theme's circled-arrow
 * SVG used as a MASK, so its color is ours (navy to match the asset; change
 * the background-color below to var(--color-6) for gold). Referencing the
 * file from this stylesheet keeps the theme URL out of saved content.
 * Columns use CSS multi-column so items flow top-down then wrap. */
.gl-list {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.gl-list li {
	position: relative;
	margin: 0 0 0.5rem;
	padding-left: 1.75rem;
	break-inside: avoid; /* keep an item from splitting across columns */
	font-weight: 500;
}

.gl-list--arrow li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.1em;
	height: 1.1em;
	background-color: var(--color-2, #001543);
	-webkit-mask: url("../../images/locations/icons8-right-arrow_2.svg") no-repeat center / contain;
	mask: url("../../images/locations/icons8-right-arrow_2.svg") no-repeat center / contain;
}

/* Plain-bullet variant and ordered lists keep native markers, indented to
 * match the arrow rhythm. */
.gl-list:not(.gl-list--arrow) {
	padding-left: 1.35rem;
	list-style: disc;
}

ol.gl-list {
	list-style: decimal;
}

.gl-list:not(.gl-list--arrow) li {
	padding-left: 0.35rem;
}

.gl-list-cols-2 { columns: 2; column-gap: 2.5rem; }
.gl-list-cols-3 { columns: 3; column-gap: 2.5rem; }
.gl-list-cols-4 { columns: 4; column-gap: 2rem; }

@media screen and (max-width: 991px) {
	.gl-list-cols-3,
	.gl-list-cols-4 { columns: 2; }
}

@media screen and (max-width: 767px) {
	.gl-list-cols-2,
	.gl-list-cols-3,
	.gl-list-cols-4 { columns: 1; }
}

/* glacial/timeline — vertical timeline: gold center rail (brand --color-6),
 * cream cards alternating sides via nth-child; single left rail + stacked
 * cards under 768. Square corners per the site's card convention. */
.gl-timeline {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 1rem 0;
}

.gl-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--color-6, #d29f13);
}

/* The item IS the cream card (single wrapper, step-card save shape). */
.gl-timeline-item {
	position: relative;
	width: calc(50% - 2.5rem);
	margin: 0 0 2.5rem;
	padding: 2rem;
	background: #fcf5e9; /* lum-cream */
}

.gl-timeline-item:nth-child(even) {
	margin-left: calc(50% + 2.5rem);
}

.gl-timeline-item:last-child {
	margin-bottom: 0.5rem;
}

/* rail dot */
.gl-timeline-item::before {
	content: "";
	position: absolute;
	top: 2rem;
	right: calc(-2.5rem - 11px);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--color-6, #d29f13);
	z-index: 1;
}

.gl-timeline-item:nth-child(even)::before {
	right: auto;
	left: calc(-2.5rem - 11px);

}

.gl-timeline-item > :last-child,
.gl-timeline-item > div > :last-child {
	margin-bottom: 0;
}

.gl-timeline-title {
	margin-top: 0;
	color: #001543; /* gsd-navy */
}

@media screen and (max-width: 767px) {
	.gl-timeline::before {
		left: 8px;
	}

	.gl-timeline-item,
	.gl-timeline-item:nth-child(even) {
		width: auto;
		margin: 0 0 2rem 2.2rem;
	}

	.gl-timeline-item::before,
	.gl-timeline-item:nth-child(even)::before {
		right: auto;
		left: calc(-2.2rem - 1px);
	}
}

/* Editor: the appender is a direct child of .gl-timeline — center it clear
 * of the rail so it doesn't read as a mispositioned card. */
.editor-styles-wrapper .gl-timeline > .block-list-appender {
	position: relative;
	width: 100%;
	text-align: center;
	padding: 0.5rem 0;
	background: #fff;
}

/* glacial/latest-posts — SSR card grid */
.gl-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; }
.gl-posts-grid .gl-post-card { display: block; text-decoration: none; }
.gl-posts-grid .gl-post-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.gl-posts-grid .gl-post-date { display: block; margin: 0.75em 0 0.25em; font-size: 0.85em; opacity: 0.7; }
@media (max-width: 991px) { .gl-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .gl-posts-grid { grid-template-columns: 1fr; } }

/* new-hero: the export's title was a div.ip-header; the block emits it as an
   h1 (these pages have no other h1) — neutralize the element's own margin. */
.new-hero h1.ip-header {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * glacial/page-intro — top-of-page split (copy beside a photo).
 * The photo column fills the full height of the row and the image cover-crops
 * to it, so the two columns always square off however long the copy runs.
 * Stacked (<=991px) the photo reverts to its own aspect ratio.
 * With no image the copy column runs full width.
 * ------------------------------------------------------------------------- */
.gl-page-intro > .wrap.flex {
	/* stretch (not center) so the photo column takes the full row height — that
	   resolved height is what .gl-intro-img's height:100% cover-crop needs. */
	align-items: stretch;
	justify-content: space-between;
	gap: 4%;
}

.gl-page-intro .gl-intro-text {
	flex: 1 1 auto;
	min-width: 0;
}

.gl-page-intro .gl-intro-text--full {
	flex-basis: 100%;
}

.gl-page-intro .gl-intro-media {
	flex: 0 0 44%;
	max-width: 44%;
	display: flex;
	overflow: hidden;
}

/* Fills the column and crops to it. Specificity has to beat style.css's
 * `img, .entry img { height: auto }`, hence the two-class selector. */
.gl-page-intro .gl-intro-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Editor only (the front end renders no media column at all when there is no
 * image): the "Choose image" placeholder drops to its own row UNDER the copy so
 * the copy fills the container exactly as it will on the front end, instead of
 * being squeezed into a column by editor-only chrome. */
.gl-page-intro > .wrap.flex:has(> .gl-intro-media--empty) {
	flex-wrap: wrap;
}

.gl-page-intro .gl-intro-media--empty {
	flex-basis: 100%;
	max-width: 100%;
	/* explicit, because a percentage row-gap resolves against an auto height */
	margin-top: 24px;
	padding: 32px 16px;
	border: 1px dashed #949494;
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.gl-page-intro .gl-intro-media--empty p {
	margin: 8px 0 0;
	font-size: 13px;
	color: #757575;
}

@media screen and (max-width: 991px) {
	.gl-page-intro > .wrap.flex {
		flex-flow: column;
		gap: 24px;
	}

	.gl-page-intro .gl-intro-media {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}

	/* Stacked: no row height to fill, so show the photo whole again. */
	.gl-page-intro .gl-intro-img {
		height: auto;
	}
}

.gl-faq {
	margin-bottom: 30px;
}

a.button {
	text-decoration: none;
}

.wp-block-list a {
	text-wrap: wrap;
}

/*
 * glacial/treatment-link — luminous variant.
 * Webflow's cosmetic-dermatology-v2 export puts `lum` (and `btm` on the last
 * row) on each .inside-treatment-link, but the block's save() emits a fixed
 * class list, so the modifier can't ride on the child. It only ever appears
 * inside a .counter-holder-copy.lum-2 parent — which glacial/treatment-links
 * DOES emit via its `modifier` attribute — so scope it off the parent instead.
 * Mirrors css/webflow.css .inside-treatment-link.lum / .lum.btm.
 */
.counter-holder-copy.lum-2 .inside-treatment-link {
	padding: 10px 10px 0;
	line-height: 1.3em;
}

.counter-holder-copy.lum-2 .inside-treatment-link:hover {
	background-image: linear-gradient(to bottom, var(--_luminous---color-4), var(--_luminous---color-4));
}

.counter-holder-copy.lum-2 > .inside-treatment-link:last-child {
	padding-bottom: 10px;
}

.welcome-img-holder img {
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Steps Section — the quarter cards fade lighter across the row.
 *
 * The Webflow export hand-carries this as combo classes on each individual
 * card (.serv-txt-49._24 / ._2._24 / ._3._24 / ._3._24._4 — see
 * webflow/mohs-micrographic-surgery.html), which welds the shade to a card's
 * position in the source order. Driving it from :nth-child instead keeps every
 * card's markup identical, so reordering, inserting or deleting a card in the
 * editor re-ramps the row on its own and no stored content has to change.
 * enqueue_block_assets loads this file inside the editor iframe too, so the
 * canvas shows the same ramp as the front end.
 *
 * Colours are the export's, unchanged: 25% -> 15% -> 10% -> 5% navy. Card 1
 * keeps webflow.css's --color-13 (#002d7240). Rows longer than four hold at
 * the lightest step rather than fading out to nothing.
 * ------------------------------------------------------------------------ */
.services-2 > .serv-txt-49._24:nth-child(2) {
	background-color: #002d7226;
}

.services-2 > .serv-txt-49._24:nth-child(3) {
	background-color: #002d721a;
}

.services-2 > .serv-txt-49._24:nth-child(n+4) {
	background-color: #002d720d;
}

/* ---------------------------------------------------------------------------
 * Buttons in the editor canvas.
 *
 * The site's button look (outlined navy on transparent) lives in style.css,
 * which the editor never loads — the canvas chain is normalize -> components
 * -> webflow.css -> this file (see glacial-blocks.php). So core's default
 * solid-fill button showed instead, with no border.
 *
 * style.css also selects `a.wp-block-button__link`, and the editor's button is
 * a RichText element rather than an anchor, so the tag qualifier is dropped
 * here. Declarations otherwise mirror the front end exactly — keep the two in
 * step ("Button Code" in style.css).
 *
 * The front-end :hover transform (scale(.9)) is deliberately NOT mirrored: a
 * button that shrinks under the pointer is a moving hit target while editing.
 * ------------------------------------------------------------------------ */
.editor-styles-wrapper .wp-block-button__link {
	color: var(--color-2, #001543);
	font-size: 18px;
	font-weight: 500;
	line-height: 1em;
	border: 2px solid var(--color-2, #001543);
	border-radius: 0;
	text-transform: capitalize;
	display: inline-block;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	background: transparent;
}

/* The reversed button the CTA/hero bands use sits on a dark ground. */
.editor-styles-wrapper .wp-block-button__link.rev,
.editor-styles-wrapper .inner-cta-div .wp-block-button__link {
	color: var(--color, #fff);
	border-color: var(--color, #fff);
}

/* ---------------------------------------------------------------------------
 * Service Row vertical alignment.
 *
 * webflow.css gives .wrap.flex `align-items: stretch` (equal-height columns)
 * and ships one modifier, .center-align, which the block reuses verbatim for
 * "Middle". Top and Bottom have no export equivalent, so they get these.
 * Below 991px webflow.css turns .wrap.flex into a column, where align-items
 * governs the horizontal axis instead — so these stop applying there and the
 * stacked rows keep the export's own behaviour.
 * ------------------------------------------------------------------------ */
@media (min-width: 992px) {
	.wrap.flex.gl-align-start {
		align-items: flex-start;
	}

	.wrap.flex.gl-align-end {
		align-items: flex-end;
	}
}

/* ---------------------------------------------------------------------------
 * CTA band on phones — no cut-out photo, no reserved space.
 *
 * The photo is absolutely placed at the bottom of .inner-cta-div, and
 * webflow.css reserves 200-300px of padding-bottom (varying by variant and
 * breakpoint) purely to clear it. At phone widths that photo is decorative and
 * the reserved band is mostly empty, so both go.
 *
 * Each variant is listed explicitly because webflow.css sets them at the same
 * (0,2,0) specificity — this file loads after it, so equal specificity wins on
 * source order. .cta-column.txt keeps its own 20px, so the copy still breathes.
 * ------------------------------------------------------------------------ */
@media (max-width: 479px) {
	.inner-cta-div > .cta-column.hide-outer {
		display: none;
	}

	.inner-cta-div,
	.inner-cta-div.lum,
	.inner-cta-div.insur,
	.inner-cta-div.mohs,
	.inner-cta-div.vein,
	.inner-cta-div.skin {
		padding-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
 * glacial/grid — "Icon images".
 *
 * Grid cells are cards, so an <img> in one fills the column: the 512px and
 * 835px square PNGs on /about-us/ rendered ~500px wide. This caps images in
 * the cells to icon size and keeps them from stretching, without touching
 * grids whose cells hold real photographs (partnership-opportunities), which
 * is why it is opt-in per grid rather than a blanket .gl-cell rule.
 *
 * Size is a custom property so it can be tuned per grid from the editor's
 * Advanced > Additional CSS, or globally here.
 * ------------------------------------------------------------------------ */
.gl-grid--icons {
	--gl-grid-icon-size: 96px;
}

.gl-grid--icons .gl-cell .wp-block-image img {
	width: auto;
	max-width: var(--gl-grid-icon-size);
	height: auto;

	/* Centred over the cell's copy, which stays left-aligned. */
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* The figure is the block wrapper — zero it so the centring above is measured
   against the cell, not an inherited margin. */
.gl-grid--icons .gl-cell .wp-block-image {
	margin-left: 0;
	margin-right: 0;
}

.single-location h1 {
	color: var(--color-2);
	margin-top: 0;
	margin-bottom: 20px;
	font-family: trajan-sans-pro, sans-serif;
	font-size: 2.5em;
	font-weight: 400;
	line-height: 1.2em;
}

@media (max-width: 991px) {
	.single-location h1 {
		font-size: 2em;
	}
}