/*
 * Collapsible core/group ("See more") — see inc/accordion.php + accordion.js.
 * Loaded via wp_enqueue_block_style('core/group', …): front end + editor canvas,
 * only on pages/screens that use a group.
 */

/* ---------------------------------------------------------------------------
   Collapsed-height presets. These classes are ALSO the behaviour marker the
   front-end script keys on; the value is read from --glorit-accordion-max.
--------------------------------------------------------------------------- */
.wp-block-group.is-accordion-short {
	--glorit-accordion-max: 15rem;
}
.wp-block-group.is-accordion-medium {
	--glorit-accordion-max: 25rem;
}
.wp-block-group.is-accordion-tall {
	--glorit-accordion-max: 37.5rem;
}

/* ---------------------------------------------------------------------------
   Enhanced state (classes added by accordion.js once it clamps a group).
   `--glorit-accordion-fade` is the fade colour — override it if the group sits
   on a non-white background.
--------------------------------------------------------------------------- */
.wp-block-group.is-accordion {
	position: relative;
	overflow: hidden;
	/* Nuxt .accordion__wrapper — space between the clamped content and button. */
	margin-bottom: 2rem;
	transition: max-height 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* A Stack/Row is a flex container and WordPress sets flex-wrap: wrap. With a
   constrained max-height that makes the items wrap into extra columns instead
   of clipping vertically — so pin nowrap and stop children from shrinking, so
   the group overflows (and clips) the way a normal block would. Applies on the
   front end (is-accordion) and in the editor preview (the height classes). */
.wp-block-group.is-accordion,
.editor-styles-wrapper .wp-block-group.is-accordion-short,
.editor-styles-wrapper .wp-block-group.is-accordion-medium,
.editor-styles-wrapper .wp-block-group.is-accordion-tall {
	flex-wrap: nowrap;
}
.wp-block-group.is-accordion > *,
.editor-styles-wrapper .wp-block-group.is-accordion-short > *,
.editor-styles-wrapper .wp-block-group.is-accordion-medium > *,
.editor-styles-wrapper .wp-block-group.is-accordion-tall > * {
	flex-shrink: 0;
}

.wp-block-group.is-accordion.is-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 15rem;
	max-height: 100%;
	background: linear-gradient(
		to top,
		var(--glorit-accordion-fade, #fff),
		rgba(255, 255, 255, 0)
	);
	pointer-events: none;
	z-index: 10;
}

/* ---------------------------------------------------------------------------
   Toggle button — the Nuxt SharedButton "secondary-inverse": a white pill with
   gold (secondary-dark) text + border, centered, capped at 28rem.
--------------------------------------------------------------------------- */
.glorit-accordion__button {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.5rem;
	width: 100%;
	max-width: 28rem;
	margin: 0 auto;
	padding: 12px 24px;
	border: 1px solid var(--wp--preset--color--secondary-dark, #93703e);
	border-radius: 9999px;
	background: #fff;
	color: var(--wp--preset--color--secondary-dark, #93703e);
	font-family: var(--wp--preset--font-family--t-star-pro, inherit);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	cursor: pointer;
}

/* Black wash on hover/active, like the Nuxt button. */
.glorit-accordion__button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease-in-out;
}
.glorit-accordion__button:hover::after {
	opacity: 0.15;
}
.glorit-accordion__button:active::after {
	opacity: 0.3;
}

.glorit-accordion__button > * {
	position: relative;
	z-index: 1;
}

/* Editor-canvas preview of the button — non-interactive. */
.glorit-accordion__button--preview {
	pointer-events: none;
}

.glorit-accordion__button .chevron {
	width: 0.75rem;
	height: 0.75rem;
	transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.glorit-accordion__button[aria-expanded="true"] .chevron {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Editor canvas preview. The front-end JS doesn't run here, so mirror the
   collapsed look with pure CSS: clamp to the cap + show the fade. While the
   group (or any block inside it) is selected we release the clamp so the hidden
   content stays fully editable — WordPress puts is-selected / has-child-selected
   on the block's root element.
--------------------------------------------------------------------------- */
.editor-styles-wrapper .wp-block-group.is-accordion-short,
.editor-styles-wrapper .wp-block-group.is-accordion-medium,
.editor-styles-wrapper .wp-block-group.is-accordion-tall {
	position: relative;
	max-height: var(--glorit-accordion-max);
	overflow: hidden;
	margin-bottom: 2rem; /* matches the front-end wrapper spacing above the button */
	transition: max-height 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* Fade preview, only while clamped (not being edited). */
.editor-styles-wrapper .wp-block-group.is-accordion-short:not(.is-selected):not(.has-child-selected)::after,
.editor-styles-wrapper .wp-block-group.is-accordion-medium:not(.is-selected):not(.has-child-selected)::after,
.editor-styles-wrapper .wp-block-group.is-accordion-tall:not(.is-selected):not(.has-child-selected)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 15rem;
	max-height: 100%;
	background: linear-gradient(
		to top,
		var(--glorit-accordion-fade, #fff),
		rgba(255, 255, 255, 0)
	);
	pointer-events: none;
	z-index: 10;
}

/* Editing the group → reveal everything so no content is trapped. */
.editor-styles-wrapper .wp-block-group.is-accordion-short.is-selected,
.editor-styles-wrapper .wp-block-group.is-accordion-short.has-child-selected,
.editor-styles-wrapper .wp-block-group.is-accordion-medium.is-selected,
.editor-styles-wrapper .wp-block-group.is-accordion-medium.has-child-selected,
.editor-styles-wrapper .wp-block-group.is-accordion-tall.is-selected,
.editor-styles-wrapper .wp-block-group.is-accordion-tall.has-child-selected {
	max-height: none;
	overflow: visible;
}