/* ==========================================================================
   Home page
   Hero: 2400x750 desktop image, never taller than 600px, so the next
   section's tiles are visible above the fold. Mobile: square 1080x1080.
   ========================================================================== */

.dc-hero {
	position: relative; display: grid; align-items: end;
	min-height: 440px; max-height: 600px;
	background: var(--black); color: var(--white); overflow: hidden;
}
.dc-hero__media, .dc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc-hero__img { object-fit: cover; object-position: center; }
.dc-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 100%);
	pointer-events: none;
}
.dc-hero__content { position: relative; z-index: 2; padding-top: 48px; padding-bottom: 32px; }
.dc-hero__title { font-size: clamp(30px, 7.4vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.dc-hero__title2 { display: block; margin-top: 6px; font-size: .667em; font-weight: 700; letter-spacing: -.01em; }
.dc-hero__sub { margin-top: 12px; max-width: 44ch; font-size: clamp(15px, 1.4vw, 18px); color: rgba(255, 255, 255, .9); }
.dc-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.dc-hero__ctas .dc-btn--light { background: var(--gold-bar); border-color: var(--gold-bar); color: var(--black); }
.dc-hero__ctas .dc-btn--light:hover { background: #d9a92f; border-color: #d9a92f; color: var(--black); }

/* Mobile: square crop, buttons always visible. */
@media (max-width: 767px) {
	.dc-hero { aspect-ratio: 1 / 1; min-height: 0; max-height: none; }
	.dc-hero__ctas .dc-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 15px; min-height: 50px; }
}
@media (min-width: 768px) {
	.dc-hero { aspect-ratio: 2400 / 750; min-height: 420px; }
	.dc-hero__content { padding-bottom: 56px; }
}

/* Placeholder until the real hero images are uploaded */
.dc-hero--placeholder {
	background:
		radial-gradient(120% 90% at 85% 10%, rgba(231, 170, 81, .45) 0%, rgba(231, 170, 81, 0) 55%),
		radial-gradient(90% 80% at 10% 100%, rgba(141, 90, 27, .55) 0%, rgba(141, 90, 27, 0) 60%),
		linear-gradient(135deg, #111 0%, #1c1c1c 50%, #0b0b0b 100%);
}

/* Product-type tiles sit right under the hero */
.dc-home-tiles { margin-top: 28px; }
.dc-home-tiles--types { margin-top: 14px; }

/* Shop by device */
.dc-devices { margin-block: 40px; }
.dc-devices__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .dc-devices__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } .dc-devices { margin-block: 56px; } }
.dc-device {
	display: grid; align-content: space-between; gap: 18px; min-height: 120px; padding: 18px;
	position: relative; overflow: hidden; isolation: isolate;
	border-radius: var(--r-lg); background: var(--white); color: var(--black); text-decoration: none;
	border: 1px solid var(--black); transition: transform .2s var(--ease), box-shadow .2s;
}
.dc-device:hover { color: var(--black); text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
/* Button image: pinned right, full height; on narrow phones the left edge is cropped and the text may overlap it slightly. */
.dc-device__img { position: absolute; top: 0; right: 0; z-index: -1; width: auto; max-width: none; height: 100%; object-fit: cover; object-position: right center; }
.dc-device__name { font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -.01em; }
.dc-device__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--black); }
.dc-device__cta .dc-icon { width: 16px; height: 16px; }

/* Featured reviews */
.dc-home-reviews { margin-block: 48px; }
.dc-home-reviews .dc-carousel__track { grid-auto-columns: 85%; }
@media (min-width: 700px) { .dc-home-reviews .dc-carousel__track { grid-auto-columns: calc((100% - 2 * 14px) / 3); } }
.dc-review-card {
	display: grid; align-content: start; gap: 10px; padding: 20px;
	border: var(--card-border); border-radius: var(--r-lg); box-shadow: var(--card-shadow); background: var(--white);
}
.dc-review-card__text { font-size: 15px; line-height: 1.6; }
.dc-review-card__who { display: grid; gap: 4px; font-size: 13px; }

/* Trust strip */
.dc-trust { margin-top: 0; background: var(--g50); border-block: 1px solid var(--g100); }
.dc-trust__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; padding-block: 32px; }
@media (min-width: 900px) { .dc-trust__list { grid-template-columns: repeat(4, 1fr); } }
.dc-trust__list li { display: grid; justify-items: center; gap: 6px; text-align: center; }
.dc-trust__list .dc-icon { width: 30px; height: 30px; margin-bottom: 4px; }
.dc-trust__list strong { font-size: 15px; }
.dc-trust__list span { font-size: 13px; color: var(--g600); }
.home .dc-footer { margin-top: 0; }
@media (min-width: 1000px) {
	.dc-home-tiles--styles .dc-carousel--tiles .dc-carousel__track { grid-auto-columns: calc((100% - 7 * 14px) / 8); }
	.dc-home-tiles--types .dc-carousel--tiles .dc-carousel__track { grid-auto-columns: calc((100% - 5 * 14px) / 6); }
}
.dc-home-tiles--styles { margin-top: 48px; }

/* Drop shadow so the white hero text stays readable over busy photos */
.dc-hero__title, .dc-hero__sub { text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 2px 8px rgba(0,0,0,.8), 0 4px 24px rgba(0,0,0,.7), 0 0 40px rgba(0,0,0,.45); }
/* Featured Reviews use the review cards (reviews.css) */
.dc-home-reviews .dc-carousel__track { align-items: start; }
@media (min-width: 1000px) { .dc-home-reviews .dc-carousel__track { grid-auto-columns: calc((100% - 3 * 14px) / 4); } }
.dc-home-reviews .dc-rcard { height: 100%; }
.dc-home-reviews__all { margin: 18px 0 0; text-align: center; }
.dc-home-reviews__all a { font-size: 14px; font-weight: 600; color: var(--black); text-decoration: underline; text-underline-offset: 3px; }