/**
 * [ym_quick_actions] — app-style action tiles (YesterVault), plugin-owned.
 *
 * Dedicated component stylesheet, lazily enqueued on shortcode render (same
 * pattern as greeting.css / circle-pills.css), so it loads for ALL visitors
 * wherever the shortcode is placed — including guests, who see the single
 * Request Access tile. Not capability-gated.
 *
 * Element-qualified selectors; !important is added ONLY where a global rule
 * (e.g. .ym-page-body a) would otherwise win — see the shortcode-styling
 * lesson. url()s / colours are self-contained. Cache-buster rides
 * YESTERVAULT_VERSION.
 */

.ym-quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	gap: 12px;
	margin: 1.5rem 0;
}

a.ym-quick-actions__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: #FFFFFF;
	border: 1px solid #e8ddd0;
	border-radius: 16px;
	padding: 14px 8px;
	min-height: 44px;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
	transition: transform 140ms ease, box-shadow 140ms ease,
		border-color 140ms ease;
}

.ym-quick-actions__icon {
	font-size: 1.6rem;
	line-height: 1;
}

.ym-quick-actions__label {
	font-family: 'Jost', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	color: #2c2018;
	text-align: center;
}

a.ym-quick-actions__tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(28, 25, 23, 0.12);
	border-color: #C8860A;
}

a.ym-quick-actions__tile:active {
	transform: translateY(1px) scale(0.97);
	box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08);
	border-color: #C8860A;
}

a.ym-quick-actions__tile:focus-visible {
	outline: 2px solid #C8860A;
	outline-offset: 2px;
}

/* Single Request Access tile (State B): don't let auto-fit stretch it. */
.ym-quick-actions__tile--request {
	max-width: 180px;
}

@media (prefers-reduced-motion: reduce) {
	a.ym-quick-actions__tile {
		transition: none;
	}
	a.ym-quick-actions__tile:hover,
	a.ym-quick-actions__tile:active {
		transform: none;
	}
}

/* ==========================================================================
   MOBILE CHIP ROW (<=480px, family state only)
   The 3-column grid costs ~282px of vertical space on a phone. Below 480px
   the family destinations become one compact static row.

   NO HORIZONTAL SCROLL, BY RULE (1.8.1). Navigation must never be hidden
   off-screen: every destination the user has is visible without a gesture.
   At most four chips ever render here, because the shortcode suppresses the
   tile pointing at the current page -- see YM_Shortcodes::url_is_current_page().

   WHY 2x2 AND NOT ONE ROW OF FOUR: measured at 380px (332px of row width),
   four chips in one row give 77px each. "Add a Memory" and "My Memories"
   need ~79px of label alone in Jost 12px, so at ANY horizontal padding --
   4px was measured -- those two labels ellipsise to "Add a Memor...". The row
   itself did not overflow, but a clipped destination name is a worse failure
   than a second row. Two columns give ~162px per chip: every label renders in
   full, and the block still costs far less height than the original grid.

   A 5th chip (this shortcode on a page that is none of the destinations)
   simply starts a third row -- grid handles any count without overflow.

   The guest state (single Request Access tile) is excluded by the --guest
   modifier. Above 480px nothing here applies -- desktop/tablet unchanged.
   ========================================================================== */

@media (max-width: 480px) {

	.ym-quick-actions--family {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		/* Collapses the old stacked spacing (24px top + 24px bottom here, plus
		   31px on the Breakdance wrapper) down to a single 16px/16px. */
		margin: 16px 0;
		/* 6px top/bottom keeps focus rings and tile shadows off the edges. */
		padding: 6px 0;
	}

	.ym-quick-actions--family a.ym-quick-actions__tile {
		box-sizing: border-box;
		min-width: 0;
		height: 64px;
		gap: 2px;
		padding: 8px 10px;
		border: 1px solid rgba(26, 26, 46, 0.10);
		border-radius: 14px;
		justify-content: center;
	}

	.ym-quick-actions--family .ym-quick-actions__icon {
		font-size: 22px;
		line-height: 1;
	}

	.ym-quick-actions--family .ym-quick-actions__label {
		font-family: 'Jost', sans-serif;
		font-size: 12px;
		font-weight: 500;
		color: #1A1A2E;
		line-height: 1.2;
		white-space: nowrap;
		/* Safety net only: at ~162px per chip no English label comes close to
		   clipping. If a translation ever runs longer, it ellipsises inside its
		   own chip rather than forcing the grid to overflow. */
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Hover lift reads as jitter on touch; keep press feedback only. */
	.ym-quick-actions--family a.ym-quick-actions__tile:hover {
		transform: none;
	}
}

/* The Breakdance shortcode wrapper adds its own bottom margin on top of the
   nav's. Collapse it, without naming a template node id. Scoped by :has() so
   it only ever affects a wrapper that actually holds this row; if a browser
   lacks :has() the rule is skipped and the old wrapper margin simply remains.
   The leading .breakdance is required for specificity: Breakdance emits
   `.breakdance .bde-shortcode-900015-111 { margin-bottom: 31px }` at (0,2,0)
   and loads after this file, so a bare (0,2,0) selector loses the tie. This
   makes it (0,3,0) and wins on merit -- no !important needed. */
@media (max-width: 480px) {
	.breakdance .bde-shortcode:has(> .ym-quick-actions--family) {
		margin-top: 0;
		margin-bottom: 0;
	}
}