/* Scale Reveal Cards (outcrowd.io ".big-brand-card"-style scroll reveal,
   vanilla-JS port). Add the .scale-reveal-card class to an element (or a
   wrapper around a <ul>/<ol> list of cards) — js/scale-reveal-cards.js
   resolves what actually animates (the element itself, or each <li>),
   tags it .scale-reveal-item, and scrubs its transform/opacity directly
   against scroll position every frame (the same technique as
   hero-cards.css/js — no CSS transition involved, so there's nothing to
   set here beyond a will-change hint and the reduced-motion fallback). */
.scale-reveal-item {
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.scale-reveal-item {
		transform: none !important;
		opacity: 1 !important;
	}
}

/*
 * Demo styling for the payground.html scale-reveal-wall example. Not part
 * of the reusable component itself — real usages style their own cards.
 */
.scale-reveal-wall {
	padding: 4rem 2rem;
}

.scale-reveal-grid {
	max-width: 900px;
	margin: 0 auto;
}

.scale-reveal-grid ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scale-reveal-grid .reveal-card {
	background: #16164F;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	padding: 2rem 1rem;
	border-radius: 16px;
}
@media screen and (max-width: 767px) {
    .wp-block-query.hotels ul,
	#features .features-list {
        gap: 16px;
    }
    
    .wp-block-query.hotels li,
    .wp-block-query.hotels li:nth-child(4) {
        width: calc((100% - 20px) / 2);
        justify-content: start;
        flex-direction: column;
    }
    .wp-block-query.hotels li:nth-child(4) figure {
        aspect-ratio: 4 / 3 !important;
        max-width: none;
        margin-bottom: 1em;
    }
    .wp-block-query.hotels li:nth-child(3) {
        width: 100%;
        flex-direction: row;
    }
    .wp-block-query.hotels li:nth-child(3) .hotel-info {
        align-self: center;
    }
    .wp-block-query.hotels li:nth-child(3) figure {
        aspect-ratio: 1 / 1 !important;
        max-width: 50%;
        margin-bottom: 0;
    }
    .wp-block-query.hotels .wp-block-post-excerpt {
        display: none;
    }
	#features .features-list > .wp-block-group {
		min-width: calc((100% - 20px) / 2);
		height: stretch;
	}
}

@media screen and (max-width: 540px) {
    .wp-block-query.hotels ul,
	#features .features-list {
        gap: 12px;
    }
    .wp-block-query.hotels li ,
    .wp-block-query.hotels li:nth-child(3),
    .wp-block-query.hotels li:nth-child(4) {
        width: 100%;
        flex-direction: row;
    }
    .wp-block-query.hotels li .hotel-info {
        align-self: center;
    }
	.wp-block-query.hotels li .hotel-info h2 {
		font-size: 16px !important;
	}
    .wp-block-query.hotels li figure,
    .wp-block-query.hotels li:nth-child(3) figure,
    .wp-block-query.hotels li:nth-child(4) figure {
        aspect-ratio: 1 / 1 !important;
        max-width: 50%;
        margin-bottom: 0;
    }
    
}
@media screen and (max-width: 540px) {
	#features .features-list > .wp-block-group {
		min-width: 100%;
	}
}