/**
 * Cards Simple (inc/blocks-layout/cards-simple.php) — a plain 4-up flex
 * grid, 1200px max width, 2rem side padding, 2rem gap (both directions).
 * Stacks to 2-up on tablet, 1-up on mobile.
 *
 * Images are width: 100% / height: auto (native aspect ratio — some cards
 * will be square, some rectangular, neither cropped) and each card is
 * bottom-aligned within its row via align-self: flex-end, so mixed image
 * heights still read as one grounded row instead of top-hanging at
 * different depths.
 *
 * The Image Modal lightbox itself (the overlay/dialog look) is NOT here
 * any more — see assets/css/image-modal.css — since it's shared with the
 * Room Image Carousel now too, which doesn't otherwise load this
 * stylesheet. What IS still here is the button-reset below, just for
 * Cards Simple's own trigger element.
 */

.cards-simple-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	max-width: 75rem;
	margin: 8.125rem auto;
	padding: 0 2rem;
}

.cards-simple-item {
	flex: 0 1 calc(25% - 1.5rem); /* 4-up: 3 gaps of 2rem ÷ 4 items */
	align-self: flex-start;
}

@media (max-width: 900px) {
	.cards-simple-item {
		flex-basis: calc(50% - 1rem); /* 2-up: 1 gap of 2rem ÷ 2 items */
	}
}

@media (max-width: 560px) {
	.cards-simple-item {
		flex-basis: 100%; /* 1-up */
	}
}

.cards-simple-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;

  /* Standardized card/image hover across the theme: lift 3px + a shadow —
     no more zoom on the photo itself. */
  &:hover .cards-simple-media {
    transform: translateY(-3px);
    box-shadow: 0px 4px 10px rgba(0,0,0,0.25);
  }

  .cards-simple-media {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
}
.cards-simple-media img {
	width: 100%;
	height: 100% /* auto */;
	display: block;
  object-fit: cover;
  object-position: top; /* added for decorative inserts */
}

.cards-simple-label {
	margin-top: 0.85rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-style: normal;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	color: var(--room-ink);
}

/* Image Modal trigger is a <button>, not an <a> — strip it back down to
   plain button-reset styling so it inherits .cards-simple-link's layout
   and hover treatment identically to a normal card link. */
button.cards-simple-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	width: 100%;
	font: inherit;
	text-align: left;
	cursor: pointer;
}