/* =============================================================
   IDC — NAVADURGA FREE VISITOR REGISTRATION
============================================================= */

/* ---- Hero + heading ---- */
.navreg-hero { padding: 48px 0 8px; }
.navreg-hero-head { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.navreg-title { font-family: var(--font-heading); font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.1; color: var(--text); margin: 10px 0 0; text-wrap: balance; }
.navreg-subtitle { color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin-top: 16px; }
.navreg-hero .divider { margin: 18px auto 0; }

/* ---- Navadurga strip: 9 across on desktop ---- */
.navadurga-strip { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; margin: 8px 0 8px; }
.navadurga-cell { margin: 0; text-align: center; }
.navadurga-img { aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); }
.navadurga-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.navadurga-cell:hover .navadurga-img img { transform: scale(1.06); }
.navadurga-name { margin-top: 8px; font-family: var(--font-heading); color: var(--gold); font-size: .82rem; letter-spacing: .02em; }

/* ---- Form card ---- */
.navreg-form-section { padding-top: 32px; }
.navreg-card { max-width: 920px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; }
.navreg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.navreg-form .form-group { display: flex; flex-direction: column; gap: 8px; }
.navreg-form label { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.navreg-form .req { color: var(--crimson-light); }

.navreg-form input[type="text"],
.navreg-form input[type="email"],
.navreg-form input[type="tel"],
.navreg-form select {
    background: rgba(255,255,255,0.04);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: .95rem;
    width: 100%;
    outline: none;
    transition: border-color .3s ease, box-shadow .3s ease;
    -webkit-appearance: none; appearance: none;
}
.navreg-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A87C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.navreg-form select option { background-color: #14121c; color: #F5F0E8; }
.navreg-form select option:disabled { color: #8A7060; }
.navreg-form input::placeholder { color: var(--text-dim); }
.navreg-form input:focus,
.navreg-form select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.1); }

/* phone prefix */
.navreg-phone { display: flex; align-items: stretch; }
.navreg-phone-prefix {
    display: inline-flex; align-items: center; padding: 0 14px;
    background: rgba(var(--gold-rgb),0.08); border: 1.5px solid var(--border); border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--text); font-weight: 600; font-size: .92rem;
}
.navreg-phone input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

/* ---- Time-slot cards ---- */
.navreg-slots-group { margin-top: 24px; }
.navreg-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
.navreg-slot { cursor: pointer; margin: 0; }
.navreg-slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.navreg-slot-inner {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    padding: 20px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02); transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.navreg-slot:hover .navreg-slot-inner { border-color: var(--border-hover); }
.navreg-slot input:checked + .navreg-slot-inner { border-color: var(--gold); background: rgba(var(--gold-rgb),0.08); }
.navreg-slot input:focus-visible + .navreg-slot-inner { box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.25); }
.navreg-slot-icon { font-size: 1.4rem; }
.navreg-slot-time { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text); }
.navreg-slot-label { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.navreg-slot-left { font-size: .72rem; color: var(--gold-light); min-height: 1em; }
.navreg-slot.is-full { opacity: .5; }
.navreg-slot.is-full .navreg-slot-inner { cursor: not-allowed; }

/* consent + submit */
.navreg-consent-group { margin-top: 24px; }
.navreg-consent { display: flex; align-items: flex-start; gap: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); font-size: .9rem; cursor: pointer; }
.navreg-consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--gold); }
.navreg-consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.navreg-submit { width: 100%; margin-top: 28px; justify-content: center; font-size: .95rem; }

/* validation + response */
.navreg-form .field-error { font-size: .78rem; color: var(--crimson-light); display: none; }
.navreg-form .form-group.has-error input,
.navreg-form .form-group.has-error select { border-color: var(--crimson-light); box-shadow: 0 0 0 3px rgba(var(--crimson-rgb),0.12); }
.navreg-form .form-group.has-error .field-error { display: block; }
.navreg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.navreg-response:empty { display: none; }
.navreg-response { margin-bottom: 22px; padding: 14px 18px; border-radius: var(--radius-md); font-size: .92rem; }
.navreg-response.is-success { background: rgba(60,160,90,0.12); border: 1px solid rgba(60,160,90,0.4); color: #9fe3b3; }
.navreg-response.is-info { background: rgba(var(--gold-rgb),0.08); border: 1px solid var(--border-hover); color: var(--text); }
.navreg-response.is-error { background: rgba(var(--crimson-rgb),0.12); border: 1px solid var(--crimson-light); color: #f0b8ba; }

/* ---- support strip ---- */
.navreg-support { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 920px; margin: 40px auto 0; }
.navreg-support-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.navreg-support-item h4 { font-family: var(--font-heading); color: var(--gold); font-size: 1.15rem; }
.navreg-support-item p { font-size: .86rem; color: var(--text-muted); line-height: 1.6; flex: 1; }
.navreg-support-item .btn { align-self: center; font-size: .78rem; padding: 9px 18px; }

/* ---- Responsive: tablet ---- */
@media (max-width: 1024px) {
    .navadurga-strip { grid-template-columns: repeat(9, 1fr); gap: 6px; }
    .navadurga-name { font-size: .68rem; }
}

/* ---- Responsive: mobile — 9-across becomes an auto-cycling slideshow ---- */
@media (max-width: 768px) {
    .navreg-card { padding: 26px 20px; }
    .navreg-grid { grid-template-columns: 1fr; }
    .navreg-slots { grid-template-columns: 1fr; }
    .navreg-support { grid-template-columns: 1fr; }

    .navadurga-strip { display: block; position: relative; height: 320px; }
    .navadurga-cell { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; opacity: 0; transition: opacity .7s ease; }
    .navadurga-cell.is-active { opacity: 1; }
    .navadurga-cell .navadurga-img { width: 210px; aspect-ratio: 3 / 4; }
    .navadurga-name { font-size: 1rem; }
}


/* ---- Venue / travel / contact bar ---- */
.navreg-info-bar { padding: 8px 0 56px; }
.navreg-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; padding-top: 32px; border-top: 1px solid var(--border); }
.navreg-info-item { display: flex; align-items: flex-start; gap: 12px; }
.navreg-info-icon { color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.navreg-info-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.navreg-info-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.navreg-info-value { font-size: .86rem; color: var(--text-muted); line-height: 1.5; }
.navreg-info-value a { color: inherit; }
.navreg-info-value a:hover { color: var(--gold); }
@media (max-width: 860px) { .navreg-info { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px) { .navreg-info { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------------------
   The Navadurga medallion.

   Nine portraits set around a coin. Each is placed by rotating it out to the
   rim and then counter-rotating it by the same angle, so it travels around the
   circle while staying upright — which is what keeps nine faces the right way
   up without nine sets of hand-written coordinates.

   --a is the only per-item value, written inline from PHP. Everything else is
   derived from --med-size, so one number resizes the whole disc.
   --------------------------------------------------------------------------- */
.idc-medallion {
	--med-size: 280px;
	--med-thumb: calc(var(--med-size) * .215);
	--med-radius: calc(var(--med-size) * .385);
	--med-gold: var(--gold, #D4AF37);

	position: relative;
	width: var(--med-size);
	height: var(--med-size);
	margin: 0 auto;
	flex: 0 0 auto;
}

/* The coin's edge: two rules, the way a struck coin has a rim inside its edge. */
.idc-medallion-rim {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--med-gold) 55%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--med-gold) 16%, transparent),
		inset 0 0 calc(var(--med-size) * .09) color-mix(in srgb, var(--med-gold) 14%, transparent);
}

.idc-medallion-form {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--med-thumb);
	height: var(--med-thumb);
	margin: calc(var(--med-thumb) / -2) 0 0 calc(var(--med-thumb) / -2);
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid color-mix(in srgb, var(--med-gold) 62%, transparent);
	background: var(--bg-card, #14121c);
	box-shadow: 0 3px 10px -4px rgba(20, 14, 4, .6);
	transform:
		rotate(var(--a))
		translateY(calc(var(--med-radius) * -1))
		rotate(calc(var(--a) * -1));
	transition: border-color .25s ease;
}

.idc-medallion-form:hover { border-color: var(--med-gold); }

.idc-medallion-form img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* The struck centre. */
.idc-medallion-core {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: calc(var(--med-size) * .44);
	height: calc(var(--med-size) * .44);
	margin: calc(var(--med-size) * -.22) 0 0 calc(var(--med-size) * -.22);
	padding: 6px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--med-gold) 38%, transparent);
	background: radial-gradient(circle at 50% 38%,
		color-mix(in srgb, var(--med-gold) 14%, transparent),
		transparent 72%);
	text-align: center;
}

.idc-medallion-word {
	font-family: var(--font-heading, Georgia, serif);
	font-size: calc(var(--med-size) * .072);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .04em;
	color: var(--med-gold);
}

.idc-medallion-caption {
	font-size: calc(var(--med-size) * .038);
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted, rgba(245, 240, 232, .6));
}

/* A phone gets a smaller coin, not a scrollbar. */
@media (max-width: 520px) {
	.idc-medallion { --med-size: 220px; }
}


/* ---------------------------------------------------------------------------
   Navadurga strip — round portraits in a straight row.

   The cells were a 3:4 crop in a rounded rectangle. A circle is what reads as a
   set of portrait medals rather than a contact sheet, and object-position sits
   the crop near the top of the frame because these are portraits: centre a 3:4
   image in a circle and the circle takes the chest, not the face.
   --------------------------------------------------------------------------- */
.navadurga-strip {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 10px;
	margin: 8px 0;
	align-items: start;
}

.navadurga-cell { margin: 0; text-align: center; }

.navadurga-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid color-mix(in srgb, var(--gold, #D4AF37) 55%, transparent);
	background: var(--bg-card, #14121c);
	box-shadow: 0 4px 14px -8px rgba(20, 14, 4, .7);
	transition: border-color .25s ease;
}

.navadurga-cell:hover .navadurga-img { border-color: var(--gold, #D4AF37); }

.navadurga-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	display: block;
	transition: transform .5s ease;
}

.navadurga-cell:hover .navadurga-img img { transform: scale(1.06); }

.navadurga-name {
	margin-top: 9px;
	font-family: var(--font-heading, Georgia, serif);
	color: var(--gold, #D4AF37);
	font-size: .8rem;
	letter-spacing: .02em;
	line-height: 1.25;
}

@media (max-width: 1100px) {
	.navadurga-strip { gap: 7px; }
	.navadurga-name { font-size: .68rem; }
}

/* ---- Phone: one at a time, cross-fading ---- */
@media (max-width: 768px) {
	.navadurga-strip {
		display: block;
		position: relative;
		height: 268px;
	}

	.navadurga-cell {
		position: absolute;
		inset: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		opacity: 0;
		transition: opacity .7s ease;
		pointer-events: none;
	}

	.navadurga-cell.is-active { opacity: 1; pointer-events: auto; }

	.navadurga-img { width: 190px; height: 190px; aspect-ratio: 1 / 1; }
	.navadurga-name { margin-top: 0; font-size: 1.05rem; }
}

/*
 * Asked for less motion: the cycler stops advancing, so show all nine as a
 * static wrap rather than leaving one frame frozen and eight invisible.
 */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.navadurga-strip {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		height: auto;
		gap: 12px;
	}

	.navadurga-cell { position: static; opacity: 1; pointer-events: auto; gap: 8px; }
	.navadurga-img { width: 100%; height: auto; }
	.navadurga-name { font-size: .75rem; }
}


/* ---------------------------------------------------------------------------
   NAVADURGA STRIP — every portrait the same size.

   THE BUG. The row was `repeat(9, 1fr)` with each portrait at `width: 100%`.
   A 1fr track is "one share of the FREE space", but it still refuses to shrink
   below its own content, because a grid item's default min-width is auto. The
   captions are the content, and they are not the same length — "Shailputri" is
   ten characters, "Chandraghanta" is thirteen — so the longer names pushed
   their tracks wider, and a wider track meant a wider circle. The portraits
   ended up different diameters and, being square, different heights, which is
   why the names underneath sat at nine different levels.

   THE FIX, which is what was asked for: give the image its own box instead of
   letting the column decide. minmax(0, 1fr) lets a track shrink past its
   content, so all nine tracks are genuinely equal; the portrait is then capped
   and centred inside its track, so the caption can be any length it likes
   without touching the picture.
   --------------------------------------------------------------------------- */

.navadurga-strip {
	grid-template-columns: repeat(9, minmax(0, 1fr));
	align-items: start;
}

.navadurga-cell {
	min-width: 0;              /* the half of the fix that lives on the child */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.navadurga-img {
	/* Its own box: never wider than its track, never wider than this. */
	width: min(100%, 92px);
	height: auto;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	flex: 0 0 auto;
}

.navadurga-name {
	margin-top: 0;             /* the flex gap owns the spacing now */
	width: 100%;
	font-size: .72rem;
	line-height: 1.3;
	overflow-wrap: anywhere;   /* a long name wraps rather than widening its track */
}

@media (max-width: 1100px) {
	.navadurga-img { width: min(100%, 76px); }
	.navadurga-name { font-size: .64rem; }
}

/* The phone shows one at a time, so it gets room to be properly large. */
@media (max-width: 768px) {
	.navadurga-img { width: 190px; height: 190px; }
	.navadurga-name { font-size: 1.05rem; width: auto; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.navadurga-img { width: min(100%, 96px); height: auto; }
	.navadurga-name { font-size: .72rem; }
}