/**
 * Havaya Camp Manager -- front-end card, grid, and table styles.
 *
 * The card design (colors, spacing, hover animation, banner treatment) is
 * modeled directly on camphavaya.org's own session cards -- inspected live
 * to match it, not guessed. Every value still goes through a theme.json
 * custom property WITH a fallback, so this looks right on any site using
 * havaya-summer-base (hub or subsite) with no per-site stylesheet needed.
 */

.havaya-session-grid {
	display: grid;
	grid-template-columns: repeat( var( --havaya-session-columns, 2 ), 1fr );
	gap: var( --wp--custom--standard-gap-spacing, 3rem );
}

@media ( max-width: 600px ) {
	.havaya-session-grid {
		grid-template-columns: 1fr;
	}
}

.havaya-session-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var( --wp--preset--color--white, #fff );
	border: 2px solid var( --wp--preset--color--lighest-light-grey, #d3d6dc );
	border-radius: var( --wp--custom--border-radius-value, 0.75em );
	padding: calc( 1.5rem / 2 ) calc( var( --wp--custom--standard-gap-spacing, 3rem ) / 2 ) calc( var( --wp--custom--standard-gap-spacing, 3rem ) / 2 ) calc( var( --wp--custom--standard-gap-spacing, 3rem ) / 2 );
	box-shadow: var( --wp--preset--shadow--soft, 0 20px 50px -25px rgba( 48, 45, 41, .15 ) );
	transition: 0.3s ease-in-out;
	overflow: hidden;
}

/* A second copy of the same shadow, faded in on hover -- combined with the
   scale below, this is what gives the card a "lifting off the page" feel
   rather than just abruptly getting bigger. */
.havaya-session-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	border-radius: inherit;
	box-shadow: var( --wp--preset--shadow--soft, 0 20px 50px -25px rgba( 48, 45, 41, .15 ) );
	transition: opacity 0.3s ease-in-out;
}

/*
 * Hover lift/scale is gated on the card actually being clickable (i.e. it
 * has the stretched Apply Now link), not on .havaya-session-full -- a full
 * session can still have registration open (e.g. for a waitlist), and
 * should feel clickable in that case same as any other card.
 */
.havaya-session-card:has( .havaya-session-banner-register ):hover {
	transform: scale( 1.1, 1.1 );
}

.havaya-session-card:has( .havaya-session-banner-register ):hover::after {
	opacity: 1;
}

.havaya-session-title {
	/*
	 * align-self: flex-start is required now that .havaya-session-card is a
	 * flex column (for the footer bottom-push) -- flex items get their
	 * `display` "blockified" per spec, so plain `display: inline` here no
	 * longer shrinks the box to the text width on its own; without this the
	 * title (and therefore the golden hover-highlight background, sized off
	 * this box) stretches to the full flex-column width instead of hugging
	 * just the text.
	 */
	align-self: flex-start;
	display: inline;
	margin: 0 0 0 -10px;
	padding: 10px;
	font-size: var( --wp--preset--font-size--medium, 1.25rem );
	font-weight: 700;
	color: var( --wp--preset--color--primary, #191d63 );
	background-color: transparent;
}

/* A golden "highlighter" sweeps behind the title on hover -- a linear
   gradient sized to 0% width, animated to 100%, rather than a real
   underline, so it can grow left-to-right instead of just fading in. */
.havaya-session-card:has( .havaya-session-banner-register ):hover .havaya-session-title {
	animation: havaya-mark-it 750ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) forwards;
	background-image: linear-gradient( var( --wp--preset--color--golden, #fdb515 ), var( --wp--preset--color--golden, #fdb515 ) );
	background-repeat: no-repeat;
	background-size: 0 100%;
}

@keyframes havaya-mark-it {
	0% { background-size: 0 100%; }
	100% { background-size: 100% 100%; }
}

.havaya-session-columns {
	display: flex;
	gap: 13px;
	margin-top: 4px;
}

.havaya-session-dates-col {
	flex-basis: 35%;
}

.havaya-session-details-col {
	flex-basis: 65%;
}

.havaya-session-dates-col p {
	margin: 0 0 0.25em;
}

.havaya-session-overview-details {

	font-size: var( --wp--preset--font-size--small, 0.9rem );
}

.havaya-session-overview-details table {
	border-collapse: collapse;
}

.havaya-session-overview-details table td {
	vertical-align: top;
	padding: 0;
}

.havaya-session-overview-details table td:first-child {
	padding-right: 10px;
}

.havaya-session-overview-details table td p {
	margin: 0.25em 0 0;
}

.havaya-session-overview-details table td p em {
	font-style: italic;
	font-weight: 400;
}

.havaya-inline-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

:where( .havaya-inline-icon ) {
	fill: var( --wp--preset--color--light-grey, #636466 );
}

/*
 * The footer (closed/full message + CTA banners) is pushed flush to the
 * bottom of the card via this one margin -- works even when CSS Grid
 * stretches the card taller than its own content to match a taller sibling
 * in the same row, unlike a fixed negative margin on the banners alone
 * (which only cancels the card's own padding, not arbitrary extra height).
 * Requires .havaya-session-card to be a flex column (see above).
 */
.havaya-session-footer {
	margin-top: auto;
    text-align: center;
}

.havaya-session-footer hr {
	margin: 1em 0;
	border: none;
	border-top: 1px solid var( --wp--preset--color--lighest-light-grey, #d3d6dc );
}

/*
 * The dark-blue/sky-blue full-width band used both for the "Apply Now"
 * registration CTA and the "More Information" link -- camphavaya.org uses
 * the exact same treatment for both, so we do too. Bleeds to the card's own
 * edges via negative margins equal to the card's own padding. Only the
 * LAST banner (there may be two stacked) bleeds to the bottom edge and
 * gets the rounded corners; an earlier one stacks directly above it with
 * no gap in between, so multiple banners read as one continuous unit.
 */
.havaya-session-banner-group {
	margin: 0.75em calc( -1 * var( --wp--custom--standard-gap-spacing, 3rem ) / 2 ) 0;
	overflow: hidden;
}

.havaya-session-banner-group + .havaya-session-banner-group {
	margin-top: 0;
}

.havaya-session-banner-group:last-child {
	margin-bottom: calc( -1 * var( --wp--custom--standard-gap-spacing, 3rem ) / 2 );
	/*
	 * The banner sits flush against the INSIDE of the card's 2px border
	 * (the negative margin above cancels the padding, not the border), so
	 * its own corner radius needs to be smaller than the card's outer
	 * radius by exactly that border width -- otherwise the two curves
	 * aren't concentric and the banner's corner visibly "pokes out" past
	 * the card's, even though the two radius values are technically equal.
	 */
	border-bottom-left-radius: calc( var( --wp--custom--border-radius-value, 0.75em ) - 2px );
	border-bottom-right-radius: calc( var( --wp--custom--border-radius-value, 0.75em ) - 2px );
}

.havaya-session-banner {
	display: block;
	text-align: center;
	font-weight: 700;
	padding: 0.5em 1em;
	text-decoration: none !important;
	transition: 0.5s ease-in-out;
}

/*
 * Not wrapped in :where() -- this is a bespoke banner component, not a
 * fallback for the theme's own styling, and it needs to reliably win over
 * the theme's default `a` link color (dark-blue), which would otherwise
 * make the white text disappear against the dark-blue background.
 */
.havaya-session-banner,
a.havaya-session-banner {
	background-color: var( --wp--preset--color--dark-blue, #191d63 );
	color: var( --wp--preset--color--white, #fff ) !important;
}

/* Only the two link banners swap color on hover -- the waitlist banner
   below isn't a link, so it keeps its own cream/gold styling regardless. */
.havaya-session-card:hover .havaya-session-banner-register,
.havaya-session-card:hover .havaya-session-banner-info {
	background-color: var( --wp--preset--color--sky-blue, #27aae1 );
	color: var( --wp--preset--color--dark-blue, #191d63 ) !important;
}

/*
 * Waitlist info: a <div>, not a link, so it never swaps color on hover --
 * cream/gold like camphavaya.org's own ".session-wait-list" treatment,
 * left-aligned and normal-weight since it's often a full sentence or two
 * of context rather than a short CTA label.
 */
.havaya-session-banner-waitlist,
div.havaya-session-banner-waitlist {
	background-color: #ffeec9;
	color: var( --wp--preset--color--dark-grey, #414042 ) !important;
	text-align: left;
	font-weight: 400;
}

.havaya-session-banner-waitlist p {
	margin: 0;
}

.havaya-session-banner-waitlist p + p {
	margin-top: 0.5em;
}

.havaya-session-banner-waitlist a {
	color: var( --wp--preset--color--dark-blue, #191d63 );
	text-decoration: underline;
}

/*
 * "Stretched link": when there's an active Apply Now link, the whole card
 * becomes its click target (not just the banner at the bottom), via a
 * transparent ::after covering the card. The anchor itself is deliberately
 * left un-positioned so the ::after's containing block resolves up to
 * .havaya-session-card (position: relative) instead of just the anchor's
 * own small box. This avoids wrapping the whole card in a real <a> --
 * which would be invalid HTML once a second, independent "More Information"
 * link is also present -- so that link gets its own stacking context
 * (position: relative + a higher z-index) to stay clickable on top of the
 * overlay instead.
 */
.havaya-session-banner-register::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.havaya-session-banner-info {
	position: relative;
	z-index: 2;
}

.havaya-session-card:has( .havaya-session-banner-register ) {
	cursor: pointer;
}

/* Table view's inline version isn't inside a card that gets hovered as a
   whole, so it gets its own hover state and a bit of shape. */
.havaya-session-banner-inline {
	border-radius: var( --wp--custom--border-radius-value, 0.75em );
	margin-top: 0.5em;
}

.havaya-session-banner-inline:hover {
	background-color: var( --wp--preset--color--sky-blue, #27aae1 );
	color: var( --wp--preset--color--dark-blue, #191d63 ) !important;
}

/*
 * A full session: whole card dims to the theme's neutral grey -- purely a
 * visual cue, independent of whether it's still clickable. Registration can
 * still be open on a full session (e.g. to join a waitlist), in which case
 * hover/scale/highlight still activate as normal (gated on the Apply Now
 * link's presence above, not on this class).
 */
.havaya-session-card.havaya-session-full {
	background-color: var( --wp--preset--color--lighest-light-grey, #d3d6dc );
	color: var( --wp--preset--color--light-grey, #636466 );
	transition: none;
}

.havaya-session-card.havaya-session-full .havaya-session-title {
	color: var( --wp--preset--color--light-grey, #636466 );
}

.havaya-session-placeholder {
	padding: 1em;
	border: 1px dashed #999;
	font-size: 0.9em;
}

:where( .havaya-session-placeholder ) {
	background: #f0f0f1;
	color: #555;
}

/*
 * Table display mode (session-list block, "Display as: Table"). Wrapped in
 * the same figure/table markup WordPress's core Table block uses, so a
 * theme's own table styling (borders, striping, cell padding) applies
 * automatically -- the rules here are only presentational specifics the
 * theme wouldn't otherwise know about.
 */
.havaya-session-table table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

.havaya-session-table-sticky-sentinel {
	height: 1px;
	margin-bottom: -1px;
}

.havaya-session-table thead th {
	position: sticky;
	top: 0;
	z-index: 10;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

:where( .havaya-session-table thead.is-stuck th ) {
	background-color: var( --wp--preset--color--lighest-light-grey, #d3d6dc );
	box-shadow: 0 1px 0 var( --wp--preset--color--primary, #191d63 );
}

.havaya-session-table th,
.havaya-session-table td {
	vertical-align: top;
	text-align: left;
	padding-top: 20px;
	padding-bottom: 20px;
}

.havaya-session-table-data-row > td {
	border-bottom: 2px solid var( --wp--preset--color--lighest-light-grey, #d3d6dc );
}

.havaya-session-table-title-row > td {
	padding-bottom: 4px;
}

.havaya-session-table-data-row > td {
	padding-top: 4px;
}

.havaya-session-table-tier-name {
	margin-bottom: 0.25em;
	font-weight: 900;
	font-size: calc( var( --wp--preset--font-size--medium, 1.25rem ) * 1.12 );
	color: var( --wp--preset--color--primary, #191d63 );
}

.havaya-session-table-tier-description {
	font-size: var( --wp--preset--font-size--standard, 1rem );
	line-height: 1.35em;
	opacity: 0.8;
	margin: 4px 0.75em 0 0;
}

.havaya-session-table-tier-description p {
	margin: 0;
	font-weight: 900 !important;
}

.havaya-session-table-info p {
	margin: 0.25em 0;
}

.havaya-session-table-info .havaya-session-daterange {
	font-weight: 900;
	font-size: calc( var( --wp--preset--font-size--medium, 1.25rem ) * 1.12 );
}

.havaya-session-table-info .havaya-session-duration {
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	opacity: 0.8;
	margin-left: 30px;
}

.havaya-session-table-info .havaya-session-table-row .havaya-inline-icon {
	margin-right: 0.6rem;
	margin-top: 0.2em;
}

.havaya-session-table-info .havaya-session-table-row {
	margin-bottom: 0.5em;
}

.havaya-session-table-info .havaya-session-table-row-head {
	display: flex;
	align-items: flex-start;
}

.havaya-session-table-info .havaya-session-daterange,
.havaya-session-table-info .havaya-session-agerange {
	margin: 0;
}

.havaya-session-table-title {
	color: var( --wp--preset--color--primary, #191d63 );
	font-size: var( --wp--preset--font-size--large, 2.5rem );
	display: inline-block;
	margin: 0;
	margin-right: 0.75rem;
}

.havaya-session-table-closed {
	font-size: 0.85em;
}

.havaya-session-table-waitlist {
	background-color: #ffeec9;
	color: var( --wp--preset--color--dark-grey, #414042 );
	border-radius: var( --wp--custom--border-radius-value, 0.75em );
	padding: 0.2em 0.75em;
	margin: 0.5em 0;
	font-size: 0.85em;
}

.havaya-session-table-waitlist p {
	margin: 0;
}

.havaya-session-table-waitlist p + p {
	margin-top: 0.5em;
}

.havaya-session-table-waitlist a {
	color: var( --wp--preset--color--dark-blue, #191d63 );
	text-decoration: underline;
}

td.havaya-session-table-price-cell {
	text-align: center;
	font-size: calc( var( --wp--preset--font-size--medium, 1.25rem ) * 1.12 );
}

.havaya-session-table-message {
	text-align: left;
	font-size: var( --wp--preset--font-size--standard, 1rem );
	font-weight: 400;
}

.havaya-session-full-badge {
	display: inline-block;
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 20px;
	margin-bottom: 4px;
}

:where( .havaya-session-full-badge ) {
	color: var( --wp--preset--color--white, #fff );
	background-color: var( --wp--preset--color--light-grey, #636466 );
}

/*
 * Full/unavailable session rows in the table view: dim everything except
 * the title and price cells stay legible, matching the card's greyed-out
 * treatment.
 */
.havaya-session-table-row-unavailable .havaya-session-table-title,
.havaya-session-table-row-unavailable .havaya-session-table-row,
.havaya-session-table-row-unavailable .havaya-session-table-price-cell {
	opacity: 0.5;
	filter: grayscale( 1 );
}

/*
 * Responsive: below 600px, the table becomes a stacked label/value list per
 * session instead of a wide grid.
 */
@media ( max-width: 600px ) {
	.havaya-session-table table,
	.havaya-session-table tbody,
	.havaya-session-table tr,
	.havaya-session-table th,
	.havaya-session-table td {
		display: block;
		width: auto !important;
	}

	.havaya-session-table thead {
		display: none;
	}

	.havaya-session-table-title-row > td {
		border-bottom: none;
	}

	.havaya-session-table-data-row > td {
		border-bottom: none;
		padding: 6px 0;
	}

	.havaya-session-table-data-row > td:last-child {
		border-bottom: 2px solid var( --wp--preset--color--lighest-light-grey, #d3d6dc );
		padding-bottom: 20px;
		margin-bottom: 12px;
	}

	.havaya-session-table-price-cell {
		text-align: left;
	}

	.havaya-session-table-price-cell::before {
		content: attr( data-label );
		display: block;
		font-weight: 700;
		font-size: var( --wp--preset--font-size--small, 0.9rem );
		margin-bottom: 2px;
	}
}