/*
 * rivora/birth-graha as a panchang: a crafted almanac card with the seven vara columns.
 * The visitor's column lights in gold leaf; the fragrance that carries it rises in an arch.
 */
.rv-almanac {
	display: grid;
	gap: 40px;
	font-family: var(--rv-sans);
	font-weight: 300;
	color: var(--rv-cream);
	color-scheme: dark;
}
.rv-birth__title {
	margin: 0 0 .4em;
	font-family: var(--rv-display);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -.01em;
	text-transform: none;
	text-wrap: balance;
}
.rv-birth__intro { margin: 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.6; }

/* ---------- The card ---------- */
.rv-almanac__card {
	position: relative;
	container-type: inline-size;
	padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 52px) clamp(28px, 4vw, 48px);
	isolation: isolate;
	background:
		radial-gradient(110% 70% at 50% 0%, rgb(100 17 100 / .5), transparent 62%),
		radial-gradient(60% 50% at 80% 100%, rgb(217 178 95 / .08), transparent 70%),
		#1c0618;
	border: 1px solid rgb(217 178 95 / .7);
	border-radius: 2px;
	box-shadow:
		inset 0 0 0 7px #1c0618,
		inset 0 0 0 8px rgb(217 178 95 / .32),
		0 50px 90px -40px rgb(0 0 0 / .8);
}
.rv-almanac__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--rv-tex-grain, none) 0 0 / 256px 256px repeat;
	opacity: .1;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.rv-almanac__corner {
	position: absolute;
	width: 46px;
	height: 46px;
	fill: none;
	stroke: var(--rv-gold);
	stroke-width: 1;
	stroke-linecap: round;
	pointer-events: none;
}
.rv-almanac__corner:nth-of-type(1) { top: 12px; left: 12px; }
.rv-almanac__corner:nth-of-type(2) { top: 12px; right: 12px; transform: scaleX(-1); }
.rv-almanac__corner:nth-of-type(3) { bottom: 12px; left: 12px; transform: scaleY(-1); }
.rv-almanac__corner:nth-of-type(4) { bottom: 12px; right: 12px; transform: scale(-1, -1); }

/* ---------- Date of birth ---------- */
.rv-birth__form { display: grid; justify-items: center; gap: 10px; text-align: center; }
.rv-birth__label { font-family: var(--rv-display); font-size: 1.375rem; font-weight: 400; font-style: italic; }
.rv-birth__field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
}
.rv-birth__input {
	min-width: 0;
	width: 13ch;
	min-height: 52px;
	padding: 6px 2px;
	border: 0;
	border-bottom: 1px solid rgb(217 178 95 / .6);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: var(--rv-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	font-variant-numeric: lining-nums;
}
.rv-birth__input:focus-visible { outline: 2px solid var(--rv-gold); outline-offset: 4px; }
.rv-birth__go { flex: none; }

/* ---------- The seven varas ---------- */
.rv-almanac__week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	margin: clamp(24px, 4cqw, 40px) 0 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid rgb(217 178 95 / .5);
}
.rv-almanac__col { position: relative; margin: 0; }
.rv-almanac__col + .rv-almanac__col { border-left: 1px solid rgb(217 178 95 / .28); }
.rv-almanac__day {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 6px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 22px 4px 18px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}
.rv-almanac__day:hover { background-color: rgb(217 178 95 / .08); }
.rv-almanac__day:focus-visible { outline: 2px solid var(--rv-gold); outline-offset: -4px; }
.rv-almanac__vara { font-family: var(--rv-display); font-size: clamp(1rem, 2.4cqw, 1.3rem); font-weight: 400; line-height: 1.1; }
.rv-almanac__glyph { width: clamp(30px, 6.5cqw, 48px); height: clamp(30px, 6.5cqw, 48px); margin-block: 6px; color: var(--rv-gold); stroke-width: 1.25; }
.rv-almanac__graha { font-size: .8125rem; font-weight: 500; line-height: 1.2; }
.rv-almanac__wd { font-size: .75rem; line-height: 1.2; opacity: .68; }
.rv-almanac__frag {
	margin-top: 8px;
	padding-top: 8px;
	width: 72%;
	border-top: 1px solid rgb(217 178 95 / .3);
	font-family: var(--rv-display);
	font-size: clamp(.9rem, 1.9cqw, 1.05rem);
	font-style: italic;
	line-height: 1.15;
	overflow-wrap: anywhere;
}
.is-today .rv-almanac__day::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--rv-gold);
}

/* The visitor's column, in gold leaf. */
.rv-almanac__day[aria-pressed="true"] {
	z-index: 1;
	background:
		var(--rv-tex-gold, none) 0 0 / 160px 160px repeat,
		linear-gradient(165deg, #b98a3c 0%, #ecd08a 32%, #c99a47 58%, #f1dc9e 78%, #b08036 100%);
	background-blend-mode: soft-light, normal;
	color: #1c0618;
	transform: translateY(-8px);
	box-shadow: 0 18px 40px -12px rgb(217 178 95 / .55), 0 0 0 1px rgb(255 240 200 / .5) inset;
}
.rv-almanac__day[aria-pressed="true"] .rv-almanac__glyph { color: #1c0618; }
.rv-almanac__day[aria-pressed="true"] .rv-almanac__frag { border-top-color: rgb(28 6 24 / .35); }
.rv-almanac__day[aria-pressed="true"] .rv-almanac__wd { opacity: .85; }
.is-today .rv-almanac__day[aria-pressed="true"]::before { background: #1c0618; }

/* ---------- Result ---------- */
.rv-almanac__result {
	display: grid;
	grid-template-columns: minmax(150px, 260px) minmax(0, 1fr);
	gap: clamp(20px, 4cqw, 48px);
	align-items: end;
	margin-top: clamp(28px, 5cqw, 48px);
}
.rv-almanac__fig {
	position: relative;
	display: block;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 4 / 5;
	margin: 0;
}
.rv-almanac__arch {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 0;
	width: 84%;
	height: 82%;
	fill: rgb(100 17 100 / .28);
	stroke: rgb(217 178 95 / .85);
	stroke-width: 1;
}
.rv-almanac__star {
	position: absolute;
	left: 50%;
	top: 52%;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	color: var(--rv-gold);
	stroke-width: 1.1;
	transition: opacity .4s ease;
}
.rv-almanac.is-revealed .rv-almanac__star { opacity: 0; }
.rv-almanac__img {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 100%;
	filter: drop-shadow(0 22px 20px rgb(0 0 0 / .55));
}
.rv-almanac__img[hidden] { display: none; }
.rv-almanac__img.is-photo { left: 8%; width: 84%; height: 82%; object-fit: cover; filter: none; }

.rv-birth__live { min-height: 6rem; padding-bottom: 4px; }
.rv-birth__empty {
	margin: 0;
	max-width: 22rem;
	font-family: var(--rv-display);
	font-size: 1.75rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.2;
	opacity: .7;
}
.rv-birth__card > p { margin: 0; }
.rv-birth__vara {
	font-family: var(--rv-display);
	font-size: clamp(2.75rem, 8cqw, 4.75rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.01em;
}
.rv-birth__sub { margin-top: .6em !important; font-size: 1rem; font-weight: 500; }
.rv-birth__about {
	margin-top: 1em !important;
	max-width: 34rem;
	font-family: var(--rv-display);
	font-size: 1.3rem;
	line-height: 1.35;
	font-weight: 400;
}
.rv-birth__notes { margin-top: .9em !important; max-width: 34rem; font-size: 1rem; line-height: 1.6; }
.rv-birth__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 24px;
}
.rv-birth__price:empty { display: none; }
.rv-birth__price ins { text-decoration: none; }
.rv-birth__price .woocommerce-price-suffix { font-size: .8125rem; opacity: .7; }
.rv-birth .rv-cart-status { flex-basis: 100%; margin: 0; }

/* ---------- Narrow cards: vertical vara names, the essentials only ---------- */
@container (max-width: 560px) {
	.rv-almanac__day { padding: 18px 1px 14px; gap: 4px; }
	.rv-almanac__vara { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1rem; min-height: 5.6em; }
	.rv-almanac__graha { font-size: .625rem; }
	.rv-almanac__wd,
	.rv-almanac__frag { display: none; }
	.rv-almanac__result { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.rv-almanac__fig { max-width: 200px; }
	.rv-birth__live { justify-self: stretch; }
	.rv-birth__empty { margin-inline: auto; font-size: 1.4rem; }
	.rv-birth__buy { justify-content: center; }
}

@media (prefers-reduced-motion: no-preference) {
	.rv-birth__card:not([hidden]) { animation: rv-birth-in .5s cubic-bezier(.2, .7, .2, 1) both; }
	.rv-almanac__img:not([hidden]) { animation: rv-almanac-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes rv-birth-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes rv-almanac-rise { from { opacity: 0; transform: translateY(18%); } }
@media (prefers-reduced-motion: reduce) {
	.rv-almanac__day { transition: none; }
	.rv-almanac__day[aria-pressed="true"] { transform: none; }
}
