/* Front page only (enqueued by inc/onsil/enqueue.php on is_front_page()). */

/* home.md §10: image-wide's caption on Home is Pretendard Regular 12px, right-aligned, tracking
   2.16px — page.css's `.onsil-image-wide__body` (16px, left, no tracking) is the generic style
   built for /space/'s own long-form paragraph through the same shared partial. Scoped to this
   page only (`body.onsil-home`) rather than threading a variant class through
   section-image-wide.php — /space/'s markup and page.css rule are untouched. */
body.onsil-home .onsil-image-wide__body {
	font-size: 12px;
	text-align: right;
	letter-spacing: 2.16px;
	margin-left: auto;
}

body.onsil-home .onsil-image-wide__caption {
	margin-top: 10px;
}

/* The home profile enters as one composition. The server-rendered class establishes the first
   frame before paint so the eager portrait never flashes and then gets reset by deferred JS. */
html.js body.onsil-home .onsil-doctor-profile--home.is-profile-motion-pending .onsil-doctor-profile__grid {
	opacity: 0;
	transform: translateY(42px);
}

@media (prefers-reduced-motion: reduce) {
	html.js body.onsil-home .onsil-doctor-profile--home.is-profile-motion-pending .onsil-doctor-profile__grid {
		opacity: 1;
		transform: none;
	}
}

/* ── hero-slider — full-bleed crossfade slider, flush beneath the fixed header band. ── */

.onsil-hero-slider {
	/* Plain block, like every other section — NOT a flex container. `.onsil-wrap` below centers
	   itself via margin-inline:auto; that breaks (shrinks to fit-content) if it is itself a flex
	   item, because cross-axis auto margins on a flex child override `align-items:stretch`. */
	padding-block: 0;
	padding-top: 0;
	background-color: var(--c-bg);
}

.onsil-hero-slider__wrap {
	--maxw: 1720px; /* home.md §2: slide area inset 100px each side of the 1920 frame, not the
	                    site-wide 1440 container — .onsil-wrap's own max-width formula reused via
	                    this local override. */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.onsil-hero-slider__track {
	position: relative;
	width: 100%;
	height: 855px;
	overflow: hidden;
	background-color: var(--c-muted);
}

.onsil-hero-slider__track.is-draggable {
	touch-action: pan-y pinch-zoom;
	cursor: grab;
	user-select: none;
}

.onsil-hero-slider__track.is-slide-ready .onsil-hero-slider__slide {
	opacity: 0;
	visibility: hidden;
	transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}

.onsil-hero-slider__track.is-slide-ready .onsil-hero-slider__slide.is-active,
.onsil-hero-slider__track.is-slide-ready .onsil-hero-slider__slide.is-adjacent {
	opacity: 1;
	visibility: visible;
}

.onsil-hero-slider__track.is-dragging .onsil-hero-slider__slide {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.onsil-hero-slider__track.is-slide-ready .onsil-hero-slider__slide {
		transition: none;
	}
}

.onsil-hero-slider__track.is-dragging {
	cursor: grabbing;
}

/* Establish the slider-owned first-frame state before hero-slider.js runs. This prevents the
   already-painted LCP image/text from flashing and then being reset for its entrance. */
html.js .onsil-hero-slider__track.is-initial-motion-pending {
	clip-path: inset(50% 0);
}

html.js .onsil-hero-slider__track.is-initial-motion-pending .onsil-hero-slider__slide.is-active .onsil-hero-slider__img {
	transform: scale(1.1);
}

html.js .onsil-hero-slider__track.is-initial-motion-pending .onsil-hero-slider__slide.is-active .onsil-hero-slider__headline,
html.js .onsil-hero-slider__track.is-initial-motion-pending .onsil-hero-slider__slide.is-active .onsil-hero-slider__subtitle {
	visibility: hidden;
}

.onsil-hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s cubic-bezier(.2, .6, .2, 1);
}

.onsil-hero-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.onsil-hero-slider__media,
.onsil-hero-slider__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.onsil-hero-slider__media {
	overflow: hidden;
}

.onsil-hero-slider__img--clouds {
	filter: brightness(0.6);
}

.onsil-hero-slider__text {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	padding-inline: 24px;
}

.onsil-hero-slider__headline {
	font-family: var(--f-display), serif;
	font-size: var(--t-hero);
	line-height: 1; /* audit-1: node is 76px/76px (lh 1.0); 1.15 pushed the KR sub ~9px too low */
	color: var(--c-on-dark);
}

.onsil-hero-slider__subtitle {
	font-family: var(--f-body), sans-serif;
	font-size: var(--t-small);
	letter-spacing: .04em;
	color: var(--c-on-dark);
}

.onsil-hero-slider__counter {
	position: absolute;
	left: 50%;
	bottom: 61px;
	z-index: 2;
	/* audit-1: the node positions this box's TOP 61px above the slide bottom (`bottom:61;
	   translateY(100%)`), not its bottom edge — translateY(100%) reproduces that regardless of
	   the box's own height, instead of guessing a smaller `bottom` offset. */
	transform: translate(-50%, 100%);
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--f-body), sans-serif;
	font-size: var(--t-caps);
	letter-spacing: .18em;
	color: var(--c-on-dark);
}

.onsil-hero-slider__counter-sep {
	position: relative;
	display: block;
	width: 80px;
	height: 1px;
	overflow: hidden;
	font-size: 0;
	background-color: rgba(246, 241, 235, .35);
}

.onsil-hero-slider__counter-sep::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--c-on-dark);
	transform: scaleX(0);
	transform-origin: left center;
}

.onsil-hero-slider__track.is-progressing .onsil-hero-slider__counter-sep::after {
	animation: onsil-hero-progress var(--hero-autoplay, 6000ms) linear forwards;
}

@keyframes onsil-hero-progress {
	to { transform: scaleX(1); }
}

.onsil-hero-slider__char {
	display: inline-block;
	opacity: 0;
	transform: translateY(18px) scale(.85);
	transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}

.onsil-hero-slider__char.is-in {
	opacity: 1;
	transform: none;
}

.onsil-hero-slider__subtitle.is-motion-ready {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
}

.onsil-hero-slider__subtitle.is-motion-ready.is-in {
	opacity: 1;
	transform: none;
}

@media (max-width: 768px) {
	.onsil-hero-slider {
		padding-top: 0;
	}

	.onsil-hero-slider__wrap {
		max-width: none;
		padding-inline: 0;
		gap: 12px;
	}

	.onsil-hero-slider__track {
		height: 480px;
	}

	.onsil-hero-slider__text {
		gap: 8px;
		padding-inline: 16px;
	}

	.onsil-hero-slider__counter {
		bottom: 32px;
	}
}

/* Feature-card motion is owned by home-effects.js. Establish its starting frame before paint so
   IntersectionObserver never resets an already-visible card; without JS, this selector never
   matches because header.php leaves the document as html.no-js. */
html.js body.onsil-home .onsil-card-row--feature.is-card-motion-pending .onsil-card-row__feature {
	opacity: 0;
	transform: translateY(42px);
}

/* ── equipment-carousel — viewport-wide rail with fixed 333px square slides. ── */
.onsil-equipment-carousel__bleed {
	width: 100%;
}

.onsil-equipment-carousel {
	background-color: var(--c-bg);
	overflow-x: clip;
}

.onsil-equipment-carousel__track {
	position: relative;
	padding-inline: 16px;
	scroll-padding-inline: 16px;
	/* Task 14: home.md §8 specifies gap:24px for this track; the shared .onsil-scroll-x
	   default is 30px, which treatment-lineup's own spec (cat-*.md / treatment-detail.md,
	   "30px gap") genuinely wants — scoping the override here rather than touching the
	   shared class. */
	gap: 24px;
}

.onsil-equipment-carousel__track > .onsil-equipment-carousel__card {
	scroll-snap-align: center;
}

.onsil-equipment-carousel__track.is-draggable {
	cursor: grab;
	user-select: none;
}

.onsil-equipment-carousel__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.onsil-equipment-carousel__track.is-auto-scrolling {
	scroll-snap-type: none;
}

.onsil-equipment-carousel__card {
	flex: 0 0 333px;
	width: 333px;
}

.onsil-equipment-carousel__link {
	display: block;
	color: inherit;
}

.onsil-equipment-carousel__media {
	width: 333px;
	height: 333px;
	padding: 48px;
	overflow: hidden;
	background-color: #e2e0db;
}

.onsil-equipment-carousel__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
	transition: opacity 1s;
}

@media (hover: hover) {
	.onsil-equipment-carousel__link:hover .onsil-equipment-carousel__img,
	.onsil-equipment-carousel__link:focus-visible .onsil-equipment-carousel__img {
		opacity: .7;
		transition-duration: .5s;
	}
}

.onsil-equipment-carousel__label {
	margin-top: 7px;
	text-align: left; /* audit-1: node left-aligns the caption under the square image */
	font-family: var(--f-ui), var(--f-body), sans-serif;
	font-size: 16px;
	line-height: 1.2;
	color: var(--c-ink);
}

@media (max-width: 768px) {
	.onsil-equipment-carousel__track {
		gap: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.onsil-equipment-carousel__img,
	.onsil-journal-grid__media img {
		transition: none;
	}

	html.js body.onsil-home .onsil-card-row--feature.is-card-motion-pending .onsil-card-row__feature {
		opacity: 1;
		transform: none;
	}

	html.js .onsil-hero-slider__track.is-initial-motion-pending {
		clip-path: none;
	}

	html.js .onsil-hero-slider__track.is-initial-motion-pending .onsil-hero-slider__slide.is-active .onsil-hero-slider__img {
		transform: none;
	}

	html.js .onsil-hero-slider__track.is-initial-motion-pending .onsil-hero-slider__slide.is-active .onsil-hero-slider__headline,
	html.js .onsil-hero-slider__track.is-initial-motion-pending .onsil-hero-slider__slide.is-active .onsil-hero-slider__subtitle {
		visibility: visible;
	}

	.onsil-hero-slider__char,
	.onsil-hero-slider__subtitle.is-motion-ready {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.onsil-hero-slider__counter-sep::after {
		animation: none !important;
		transform: scaleX(1);
	}
}

/* ── journal-grid — one four-card row on Home, with square thumbnails. ── */

/* The heading lives in the preceding intro panel, so this band starts close to the cards. */
@media (min-width: 769px) {
	[data-sec="journal-grid"] {
		padding-block: 12px 40px;
	}
}

.onsil-journal-grid__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	height: auto;
	gap: 25px 20px;
}

.onsil-journal-grid__card {
	/* Grid items default to `min-width:auto`, which sizes to the *unwrapped* content — the
	   `white-space:nowrap` title below would otherwise force its 1fr track wider than the grid,
	   breaking the whole page out to the right. */
	min-width: 0;
}

.onsil-journal-grid__link {
	display: block;
	color: inherit;
}

.onsil-journal-grid__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--c-card);
}

.onsil-journal-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	transition: opacity 1s;
}

@media (hover: hover) {
	.onsil-journal-grid__link:hover .onsil-journal-grid__media img,
	.onsil-journal-grid__link:focus-visible .onsil-journal-grid__media img {
		opacity: .7;
		transition-duration: .5s;
	}
}

.onsil-journal-grid__title {
	/* Keep the desktop strip compact beneath the square image. */
	margin-top: 6px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--f-ui), var(--f-body), sans-serif;
	font-size: 16px;
	line-height: 1.2;
	color: var(--c-ink);
}

.onsil-journal-grid__date {
	margin-top: 4px;
	font-family: var(--f-ui), var(--f-body), sans-serif;
	font-size: 14px;
	line-height: 1.2;
	color: var(--c-muted);
}

/* home.md §12: "CTA: 자세히 보기 centered below grid" — same boxed link style as
   doctor-profile's home variant (home.md §6, shared.css's `.onsil-link-boxed`), just centered
   instead of left-aligned under the text column. */
.onsil-journal-grid__cta {
	display: flex;
	justify-content: center;
	margin-top: 25px; /* band-residual review #4: Figma 557:453 — grid bottom (rel820) to CTA top
	   (rel845) is 25px, not 48 */
}

@media (max-width: 768px) {
	.onsil-journal-grid__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		height: auto;
		gap: 20px 16px;
	}

	.onsil-journal-grid__cta {
		margin-top: 32px;
	}

	.onsil-journal-grid__title {
		margin-top: 16px;
		line-height: 1.5;
	}

	.onsil-journal-grid__date {
		margin-top: 6px;
		line-height: 1.6;
	}
}