/* DrukDuivels home page: only what blocks cannot say. The sections are core blocks styled by theme.json, block style
   variations (Hero, Tile, Card, Arrow, Outline arrow, Rating, Mint, Deep) and block attributes (tools/build-home-specs.py).
   Here: the hero's phone art direction, the tiles' phone ratio and the review cards printed by [drukduivels_reviews].
   Token variables only; raw values are limited to 0, hairlines, image focus points and motion transforms. */

/* ---------- hero (Hero cover) ---------- */
.wp-block-cover.is-style-hero { min-height: var(--wp--custom--layout--hero-min); }
/* the photo runs full width, the copy sits on the store's content edge */
/* (core sets width:auto on the inner container of a cover with a content position, with a stronger selector) */
.wp-block-cover.is-style-hero.has-custom-content-position[class*="is-position-"] .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--custom--layout--wide); margin-inline: auto; }
.wp-block-cover.is-style-hero .dd-hero__picture { position: absolute; inset: 0; display: block; }
/* phones: copy on cream first, then a full-width photo window cropped around the pets (no scrim over faces) */
@media (max-width: 781px) {
	.wp-block-cover.is-style-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0 !important; background: var(--wp--preset--color--base); }
	.wp-block-cover.is-style-hero .wp-block-cover__background { display: none; }
	.wp-block-cover.is-style-hero .wp-block-cover__inner-container { order: 1; padding: var(--wp--preset--spacing--50) var(--wp--custom--layout--gutter-mobile); box-sizing: border-box; }
	.wp-block-cover.is-style-hero .dd-hero__picture { order: 2; position: relative; width: 100%; aspect-ratio: var(--wp--custom--image--split); }
	.wp-block-cover.is-style-hero img.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }
}

/* ---------- tiles (Tile cover) ---------- */
.wp-block-cover.is-style-tile { min-height: var(--wp--custom--layout--tile-min); }
/* phones: the 4:3 split ratio keeps both pets of the wide scene in frame */
@media (max-width: 599px) {
	.wp-block-cover.is-style-tile { min-height: 0; aspect-ratio: var(--wp--custom--image--split); }
	.wp-block-cover.is-style-tile img.wp-block-cover__image-background { object-position: 62% 50%; }
}

/* ---------- customer reviews: cards printed by the [drukduivels_reviews] shortcode ---------- */
.dd-review-cards { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 782px) { .dd-review-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dd-review-card { display: grid; grid-template-rows: auto 1fr auto; gap: var(--wp--preset--spacing--30); margin: 0; padding: var(--wp--preset--spacing--50); border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--surface); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); box-shadow: var(--wp--preset--shadow--sm); }
.dd-review-card__stars { position: relative; display: block; width: calc(var(--wp--custom--icon--sm) * 5); height: var(--wp--custom--icon--sm); background: var(--wp--preset--color--accent-6); -webkit-mask: var(--wp--custom--icon-url--star-fill) left center / var(--wp--custom--icon--sm) var(--wp--custom--icon--sm) repeat-x; mask: var(--wp--custom--icon-url--star-fill) left center / var(--wp--custom--icon--sm) var(--wp--custom--icon--sm) repeat-x; }
.dd-review-card__stars > span { position: absolute; inset: 0 auto 0 0; width: calc(var(--dd-rating) / 5 * 100%); background: var(--wp--preset--color--star); }
.dd-review-card__text { margin: 0; padding: 0; border: 0; font-size: var(--wp--preset--font-size--large); font-weight: var(--wp--custom--font-weight--medium); line-height: var(--wp--custom--line-height--snug); color: var(--wp--preset--color--contrast); }
.dd-review-card__text p { margin: 0; }
.dd-review-card__who { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--30); border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); }
.dd-review-card__who > span:last-child { display: grid; font-size: var(--wp--preset--font-size--small); }
.dd-review-card__who a { color: var(--wp--preset--color--accent-4); text-decoration: none; }
.dd-review-card__who a:hover { color: var(--wp--preset--color--link); text-decoration: underline; }
.dd-review-card .dd-avatar { display: grid; place-items: center; width: var(--wp--custom--icon--xl); height: var(--wp--custom--icon--xl); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--soft); font-weight: var(--wp--custom--font-weight--black); }

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.is-style-tile img.wp-block-cover__image-background { transition: none; }
	.wp-block-cover.is-style-tile:hover img.wp-block-cover__image-background { transform: none; }
}

/* ---------- five category tiles: two large, then three (kit.html category-tiles) ---------- */
/* (two classes beat the grid layout's generated container rule) */
@media (min-width: 1024px) {
	.wp-block-group.dd-tiles:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.wp-block-group.dd-tiles:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
	.wp-block-group.dd-tiles:has(> :nth-child(5):last-child) > :nth-child(-n + 2) { grid-column: span 3; }
}