/* ============================================================
   Ayu Flyer element library
   --------------------------------------------------------------
   Opt-in design tokens + utility / block-style classes extracted
   from /design-reference/ayuflyer.jpeg (pink + teal + cream,
   handwritten script display, polaroid photos, ribbon banners).

   Nothing in this file applies globally; everything is scoped
   under .is-style-ayu-* (one-click block style variations) or
   .ayu-* utility classes so the existing navy / gold flyer
   chrome is untouched. Apply by selecting the corresponding
   style in the block editor sidebar, or by adding the class
   manually in the Advanced > Additional CSS classes field.
   ============================================================ */

:root {
	--ayu-pink:        #e91e63;
	--ayu-pink-dark:   #c2185b;
	--ayu-pink-soft:   #ffe5ec;
	--ayu-teal:        #1e5a6b;
	--ayu-teal-deep:   #163d49;
	--ayu-cream:       #fdf4ed;
	--ayu-cream-warm:  #f5e8d8;
	--ayu-ink:         #2b2b2b;
}

/* ------------------------------------------------------------
   Backgrounds (use on core/group, core/cover, core/columns)
   .is-style-ayu-cream-paper   — soft cream with corner washes
   .is-style-ayu-pink-wash     — pink watercolor block
   .is-style-ayu-teal-bar      — flat dark-teal contact strip
   ------------------------------------------------------------ */

.is-style-ayu-cream-paper {
	background-color: var(--ayu-cream);
	color: var(--ayu-teal);
	position: relative;
	border-radius: 12px;
	overflow: hidden;
}
.is-style-ayu-cream-paper::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 40% at 8% 12%,  rgba(233, 30, 99, 0.10), transparent 60%),
		radial-gradient(ellipse 55% 35% at 92% 88%, rgba(30, 90, 107, 0.08), transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.is-style-ayu-cream-paper > * { position: relative; z-index: 1; }

.is-style-ayu-pink-wash {
	background:
		linear-gradient(135deg, var(--ayu-pink) 0%, var(--ayu-pink-dark) 100%);
	color: #fff;
	border-radius: 12px;
}

.is-style-ayu-teal-bar {
	background: var(--ayu-teal);
	color: #fff;
	border-radius: 999px;
	padding: 1rem 1.75rem;
}
.is-style-ayu-teal-bar a { color: #fff; text-decoration: none; }
.is-style-ayu-teal-bar a:hover { color: var(--ayu-pink-soft); }

/* ------------------------------------------------------------
   Typography variants (use on core/heading, core/paragraph)
   .is-style-ayu-script      — pink handwritten script
   .is-style-ayu-display     — heavy condensed teal display
   .is-style-ayu-tagline     — small uppercase pink tagline
   ------------------------------------------------------------ */

.is-style-ayu-script {
	font-family: "Caveat", "Allura", "Pinyon Script", cursive;
	font-weight: 700;
	color: var(--ayu-pink);
	line-height: 1;
	letter-spacing: 0.005em;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
}
.is-style-ayu-script::after { display: none; } /* override global gold underline */

.is-style-ayu-display {
	font-family: "Anton", "Oswald", "Bebas Neue", "Montserrat", sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--ayu-teal);
	letter-spacing: 0.01em;
	line-height: 0.95;
	font-size: clamp(2.75rem, 7.5vw, 5.5rem);
}
.is-style-ayu-display::after { display: none; }

.is-style-ayu-tagline {
	font-family: "Montserrat", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ayu-pink);
}

/* ------------------------------------------------------------
   Buttons — block style variations on core/button
   .is-style-ayu-pink   — solid pink pill (primary CTA)
   .is-style-ayu-teal   — solid teal pill (secondary CTA)
   .is-style-ayu-cream  — cream rounded square with pink border
   ------------------------------------------------------------ */

.wp-block-button.is-style-ayu-pink .wp-block-button__link {
	background: var(--ayu-pink);
	color: #fff;
	border-radius: 999px;
	border: none;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.85rem;
	padding: 0.85rem 2rem;
	box-shadow: 0 6px 16px -8px rgba(233, 30, 99, 0.55);
	transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.wp-block-button.is-style-ayu-pink .wp-block-button__link:hover {
	background: var(--ayu-pink-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px rgba(194, 24, 91, 0.55);
}

.wp-block-button.is-style-ayu-teal .wp-block-button__link {
	background: var(--ayu-teal);
	color: #fff;
	border-radius: 999px;
	border: none;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.85rem;
	padding: 0.85rem 2rem;
}
.wp-block-button.is-style-ayu-teal .wp-block-button__link:hover {
	background: var(--ayu-teal-deep);
	color: #fff;
}

.wp-block-button.is-style-ayu-cream .wp-block-button__link {
	background: var(--ayu-cream);
	color: var(--ayu-teal);
	border: 1.5px solid var(--ayu-pink);
	border-radius: 10px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.85rem;
	padding: 0.8rem 1.6rem;
}
.wp-block-button.is-style-ayu-cream .wp-block-button__link:hover {
	background: var(--ayu-pink);
	color: #fff;
	border-color: var(--ayu-pink-dark);
}

/* ------------------------------------------------------------
   Banners
   .is-style-ayu-ribbon   — pink ribbon w/ notched ends
   .is-style-ayu-pill     — pink rounded pill heading
   .is-style-ayu-brush    — angled pink brush-stroke caption
   ------------------------------------------------------------ */

.is-style-ayu-ribbon {
	display: inline-block;
	background: var(--ayu-pink);
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 0.95rem;
	padding: 0.7em 2.5em;
	clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
}

.is-style-ayu-pill {
	display: inline-block;
	background: var(--ayu-pink);
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 0.95rem;
	padding: 0.65em 1.75em;
	border-radius: 999px;
}

.is-style-ayu-brush {
	display: inline-block;
	background: var(--ayu-pink);
	color: #fff;
	font-family: "Caveat", "Allura", cursive;
	font-weight: 700;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	padding: 0.1em 0.6em;
	border-radius: 6px 28px 8px 24px;
	transform: rotate(-2deg);
	line-height: 1.2;
}

/* ------------------------------------------------------------
   Polaroid frame (core/image style variation)
   .is-style-ayu-polaroid
   ------------------------------------------------------------ */

.wp-block-image.is-style-ayu-polaroid {
	display: inline-block;
	background: #fff;
	padding: 10px 10px 32px;
	border-radius: 3px;
	box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.35);
	transform: rotate(-2deg);
	transition: transform 200ms ease;
}
.wp-block-image.is-style-ayu-polaroid:hover {
	transform: rotate(0deg) translateY(-2px);
}
.wp-block-image.is-style-ayu-polaroid img {
	display: block;
	border-radius: 0;
}
.wp-block-image.is-style-ayu-polaroid figcaption {
	color: var(--ayu-teal);
	font-family: "Caveat", "Allura", cursive;
	font-size: 1.1rem;
	text-align: center;
	margin: 0.5rem 0 0;
}

/* ------------------------------------------------------------
   Pricing row (core/group style variation)
   .is-style-ayu-pricing-row
   ------------------------------------------------------------ */

.is-style-ayu-pricing-row {
	background: var(--ayu-cream);
	border: 1px solid rgba(233, 30, 99, 0.18);
	border-radius: 12px;
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-family: "Montserrat", sans-serif;
	color: var(--ayu-teal);
}
.is-style-ayu-pricing-row .ayu-pricing-label {
	font-weight: 700;
	letter-spacing: 0.04em;
}
.is-style-ayu-pricing-row .ayu-pricing-amount {
	font-weight: 800;
	color: var(--ayu-pink);
	font-size: 1.1rem;
}

/* ------------------------------------------------------------
   Feature row with circular icon bullet
   <div class="ayu-feature">
       <span class="ayu-feature__icon">🌴</span>
       <div class="ayu-feature__body">
           <strong>Local Experience</strong>
           Hidden Gems
       </div>
   </div>
   ------------------------------------------------------------ */

.ayu-feature {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.4rem 0;
}
.ayu-feature__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ayu-pink);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	box-shadow: 0 4px 10px -4px rgba(233, 30, 99, 0.45);
}
.ayu-feature__body {
	font-family: "Montserrat", sans-serif;
	color: var(--ayu-teal);
	font-size: 0.95rem;
	line-height: 1.35;
}
.ayu-feature__body strong {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	color: var(--ayu-pink);
	margin-bottom: 0.15rem;
}

/* ------------------------------------------------------------
   Polaroid gallery row — tilted overlapping cards
   <div class="ayu-polaroid-row"> ... <figure>...</figure> ... </div>
   ------------------------------------------------------------ */

.ayu-polaroid-row {
	display: flex;
	gap: -0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1rem 0;
}
.ayu-polaroid-row > figure {
	background: #fff;
	padding: 8px 8px 24px;
	border-radius: 3px;
	margin: 0 -0.5rem;
	box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.35);
	width: clamp(120px, 18vw, 180px);
}
.ayu-polaroid-row > figure img {
	width: 100%;
	height: clamp(90px, 14vw, 130px);
	object-fit: cover;
	display: block;
}
.ayu-polaroid-row > figure:nth-child(odd)  { transform: rotate(-3deg); }
.ayu-polaroid-row > figure:nth-child(even) { transform: rotate(2deg); }