/*
 * "Specials Board" block style — applied to a `core/gallery` block
 * via `is-style-specials-board`. Casual scrapbook layout: each child
 * image gets a slight rotation, drop shadow, and a decorative
 * washi-tape strip. Variations per `:nth-child` so no two cards look
 * identical.
 *
 * Gallery DOM (WP 5.9+):
 *   <figure class="wp-block-gallery is-style-specials-board has-nested-images">
 *     <figure class="wp-block-image">
 *       <img />
 *     </figure>
 *     …
 *   </figure>
 */

/* No `gap` rule here — leave the WP block-spacing slider in
 * control. Default gallery gap (or whatever the slider sets)
 * applies. Vertical padding gives the tape strips room to overhang. */
.wp-block-gallery.is-style-specials-board {
	overflow: visible;
	padding-top: 1.5rem;
}

.wp-block-gallery.is-style-specials-board > figure.wp-block-image {
	position: relative;
	overflow: visible;
	transition: transform 0.25s ease, filter 0.25s ease;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}

/* Vary rotation per card so the layout reads as casually placed
 * photos rather than a uniform grid. */
.wp-block-gallery.is-style-specials-board > figure.wp-block-image:nth-child(1) {
	transform: rotate(-2deg);
}
.wp-block-gallery.is-style-specials-board > figure.wp-block-image:nth-child(2) {
	transform: rotate(1.5deg);
}
.wp-block-gallery.is-style-specials-board > figure.wp-block-image:nth-child(3) {
	transform: rotate(-1deg);
}
.wp-block-gallery.is-style-specials-board > figure.wp-block-image:nth-child(4) {
	transform: rotate(2deg);
}
.wp-block-gallery.is-style-specials-board > figure.wp-block-image:nth-child(5) {
	transform: rotate(-1.5deg);
}
.wp-block-gallery.is-style-specials-board > figure.wp-block-image:nth-child(6) {
	transform: rotate(1deg);
}

.wp-block-gallery.is-style-specials-board > figure.wp-block-image:hover {
	transform: rotate(0deg) translateY(-4px);
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
	z-index: 5;
}

/*
 * Washi tape — `::before` pseudo-element overlaid on the card's
 * top edge. `!important` on critical layout/visibility properties
 * to defeat any theme `::before { content: none }` resets or core
 * gallery overrides that may suppress the pseudo-element.
 */
.wp-block-gallery.is-style-specials-board > figure.wp-block-image::before {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	top: -10px !important;
	left: 20% !important;
	width: 96px !important;
	height: 24px !important;
	pointer-events: none;
	z-index: 100 !important;
	background: rgba(255, 220, 100, 0.95) !important;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.25),
		inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	transform: rotate(-5deg);
}

/* Yellow tape, top-left */
.wp-block-gallery.is-style-specials-board
	> figure.wp-block-image:nth-child(1)::before {
	left: 12% !important;
	background: rgba(255, 220, 100, 0.85) !important;
	transform: rotate(-7deg);
}

/* Off-white tape, top-right */
.wp-block-gallery.is-style-specials-board
	> figure.wp-block-image:nth-child(2)::before {
	left: auto !important;
	right: 12% !important;
	background: rgba(245, 245, 230, 0.95) !important;
	transform: rotate(8deg);
}

/* Red tape, top-centre */
.wp-block-gallery.is-style-specials-board
	> figure.wp-block-image:nth-child(3)::before {
	left: 50% !important;
	margin-left: -48px;
	background: rgba(220, 100, 100, 0.85) !important;
	transform: rotate(-3deg);
}

/* Blue tape, top-left */
.wp-block-gallery.is-style-specials-board
	> figure.wp-block-image:nth-child(4)::before {
	left: 16% !important;
	background: rgba(100, 180, 220, 0.85) !important;
	transform: rotate(6deg);
}

/* Off-white tape, top-right */
.wp-block-gallery.is-style-specials-board
	> figure.wp-block-image:nth-child(5)::before {
	left: auto !important;
	right: 14% !important;
	background: rgba(245, 245, 230, 0.95) !important;
	transform: rotate(-9deg);
}

/* Sage tape, top-left */
.wp-block-gallery.is-style-specials-board
	> figure.wp-block-image:nth-child(6)::before {
	left: 22% !important;
	background: rgba(140, 180, 120, 0.9) !important;
	transform: rotate(4deg);
}

/*
 * Mobile: shrink the washi tape so the proportion against the smaller
 * card stays right. Default 96×24px reads as oversized at viewport
 * widths under ~600px (cards are roughly half-screen there) and the
 * tape ends up dominating the artwork instead of decorating it.
 *
 * Scale to 64×16px (≈2/3) and tighten the top overhang to match.
 * Per-card horizontal positions stay as-is — the % offsets and
 * rotations still feel hand-placed at the smaller size.
 */
@media (max-width: 600px) {
	.wp-block-gallery.is-style-specials-board
		> figure.wp-block-image::before {
		top: -7px !important;
		width: 64px !important;
		height: 16px !important;
	}

	/* Recentre the top-centre tape variant for the new width. */
	.wp-block-gallery.is-style-specials-board
		> figure.wp-block-image:nth-child(3)::before {
		margin-left: -32px;
	}
}

/* Reduced motion: drop the rotations + transitions so the layout
 * sits flat for users who've opted out of motion. The tape decoration
 * stays since it's a visual element, not motion. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.is-style-specials-board > figure.wp-block-image {
		transform: none !important;
		transition: none;
	}
	.wp-block-gallery.is-style-specials-board
		> figure.wp-block-image:hover {
		transform: none !important;
	}
}