/* =============================================================================
   DIGISPHERE PREMIUM HERO SLIDER — Frontend Styles
   Prefix: dphs-
   ============================================================================= */

/* --- Google Font Import ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;600;700&family=Oswald:wght@400;600&family=Playfair+Display:wght@400;700&display=swap');

/* --- CSS Reset / Base ------------------------------------------------------ */
.dphs-hero *,
.dphs-hero *::before,
.dphs-hero *::after {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}

/* --- Hero Section ---------------------------------------------------------- */
.dphs-hero {
	position:        relative;
	/* Full device-width break-out from any parent container */
	width:           100vw;
	left:            50%;
	right:           50%;
	margin-left:     -50vw;
	margin-right:    -50vw;
	min-height:      100vh;   /* slides are position:absolute — need explicit height */
	background-color: var(--dphs-bg-color, #0c0c0c);
	display:         flex;
	align-items:     center;
	overflow: hidden;
		/* Allow content to push out if needed on mobile */
		transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		will-change: height;
}

/* --- Slide Stacking (multi-slide) ---------------------------------------- */
.dphs-hero__slide {
	position:       absolute;
	inset:          0;
	width:          100%;
	min-height:     100%;
	display:        flex;
	align-items:    center;
	opacity:        0;
	pointer-events: none;
	z-index: 1;
}

.dphs-hero__slide.is-active {
	opacity:        1;
	pointer-events: auto;
	z-index: 2;
}

/* --- Decorative Background Text ------------------------------------------- */
.dphs-hero__bg-text {
	position:    absolute;
	inset:       0;
	display:     flex;
	align-items: center;
	justify-content: center;
	font-family: var(--dphs-bg-font, sans-serif);
	font-size:   clamp(200px, 30vw, 500px);
	font-weight: 900;
	color:       #ffffff;
	opacity:     0.06;
	letter-spacing: -0.04em;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	will-change: transform;
	z-index: 0;
	}

	.dphs-hero__bg-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
}

/* --- Three-Column Grid ----------------------------------------------------- */
.dphs-hero__grid {
	position: relative;
	z-index:  2;
	width:    100%;
	display:  grid;
	grid-template-columns: 1fr 1.4fr 1fr;
	grid-template-areas:   "left center right";
	align-items: center;
	gap:      0;
}

/* --- Grid Columns ---------------------------------------------------------- */
.dphs-hero__col {
	display:     flex;
	align-items: center;
}

.dphs-hero__col--left   { grid-area: left;   justify-content: flex-end;   }
.dphs-hero__col--center { grid-area: center; justify-content: center;     }
.dphs-hero__col--right  { grid-area: right;  justify-content: flex-start; }

/* --- Image Wrappers -------------------------------------------------------- */
.dphs-hero__img-wrapper {
	position: relative;
	width:    100%;
	max-width: 340px;
	will-change: transform;
}

.dphs-hero__img-wrapper--left  { margin-right: -24px; }
.dphs-hero__img-wrapper--right { margin-left:  -24px; }

.dphs-hero__img {
	display:       block;
	width:         100%;
	height:        auto;
	max-height:    85vh;
	object-fit:    contain;
	object-position: bottom center;
	filter: drop-shadow(0 40px 60px rgba(111, 111, 111, 0.1));
}

/* Placeholder if no image is set */
.dphs-hero__img-wrapper--placeholder {
	min-height:      350px;
	border:          2px dashed rgba(255,255,255,0.15);
	border-radius:   12px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           rgba(255,255,255,0.3);
	font-size:       13px;
	font-family:     'Montserrat', sans-serif;
}

/* --- Center Content -------------------------------------------------------- */
.dphs-hero__content {
	display:     flex;
	flex-direction: column;
	align-items: center;
	text-align:  center;
	padding:     60px 40px;
	gap:         20px;
}

/* --- Eyebrow --------------------------------------------------------------- */
.dphs-hero__eyebrow {
	font-family:    'Montserrat', sans-serif;
	font-size:      12px;
	font-weight:    600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color:          var(--dphs-color-eyebrow, rgba(255,255,255,0.5));
	display:        flex;
	align-items:    center;
	gap:            10px;
}

.dphs-hero__eyebrow::before,
.dphs-hero__eyebrow::after {
	content:          '';
	display:          block;
	width:            32px;
	height:           1px;
	background-color: rgba(255,255,255,0.3);
}

/* --- Heading Mask (for GSAP reveal) --------------------------------------- */
.dphs-hero__heading-mask {
	overflow: hidden;
}

.dphs-hero__heading {
	font-family:    'Montserrat', sans-serif;
	font-size: clamp(26px, 3.5vw, 48px);
	font-weight:    700;
	color:          var(--dphs-color-heading, #ffffff);
	line-height:    1.1;
	letter-spacing: -0.02em;
}

/* Gradient accent on heading */
.dphs-hero__heading span {
	background:              linear-gradient(135deg, #d4af37, #f7e98e, #d4af37);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip:         text;
}

/* --- Description ----------------------------------------------------------- */
.dphs-hero__description {
	font-family:  'Montserrat', sans-serif;
	font-size:    15px;
	font-weight:  300;
	line-height:  1.8;
	color:        var(--dphs-color-desc, rgba(255,255,255,0.55));
	max-width:    380px;
}

/* --- Tables in Description ----------------------------------------------- */
.dphs-hero__description table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 14px;
	color: inherit;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.dphs-hero__description th,
.dphs-hero__description td {
	padding: 12px;
	text-align: left;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.dphs-hero__description th {
	background: rgba(255, 255, 255, 0.05);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 11px;
}

.dphs-hero__description tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.02);
}
/* --- Features List --------------------------------------------------------- */
.dphs-hero__features {
	list-style:     none;
	display:        flex;
	flex-wrap:      wrap;
	justify-content: center;
	gap:            10px 20px;
}

.dphs-hero__feature-item {
	display:      flex;
	align-items:  center;
	gap:          6px;
	font-family:  'Montserrat', sans-serif;
	font-size:    12px;
	font-weight:  600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color:        var(--dphs-color-features, rgba(255,255,255,0.65));
}

.dphs-hero__feature-icon {
	color:     #d4af37;
	font-size: 8px;
}

/* --- CTA Button ------------------------------------------------------------ */
.dphs-hero__cta {
	display:     inline-flex;
	align-items: center;
	gap:         10px;
	padding:     15px 38px;
	background:  var(--dphs-color-cta-bg, #d4af37);
	color:       var(--dphs-color-cta-text, #0c0c0c);
	font-family: 'Montserrat', sans-serif;
	font-size:   13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 50px;
	border:      none;
	cursor:      pointer;
	transition:  filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow:  0 8px 30px rgba(0,0,0,0.25);
	margin-top:  8px;
}

.dphs-hero__cta:hover {
	filter:      brightness(1.15);
	transform:   translateY(-2px);
	box-shadow:  0 14px 40px rgba(0,0,0,0.35);
	color:       var(--dphs-color-cta-text, #0c0c0c);
}

.dphs-hero__cta-arrow {
	display:    inline-block;
	transition: transform 0.3s ease;
}

.dphs-hero__cta:hover .dphs-hero__cta-arrow {
	transform: translateX(4px);
}

/* --- Decorative golden orbs (ambient glow) --------------------------------- */
.dphs-hero::before,
.dphs-hero::after {
	content:       '';
	position:      absolute;
	border-radius: 50%;
	pointer-events: none;
	opacity:       0.12;
	filter:        blur(80px);
}

.dphs-hero::before {
	width:      500px;
	height:     500px;
	background: radial-gradient(circle, #d4af37, transparent 70%);
	top:        -100px;
	left:       -100px;
}

.dphs-hero::after {
	width:      400px;
	height:     400px;
	background: radial-gradient(circle, #8b5cf6, transparent 70%);
	bottom:     -80px;
	right:      -80px;
}

/* =============================================================================
   RESPONSIVE — Tablet / Mobile (≤ 1024px)
   ============================================================================= */
@media (max-width: 1024px) {

	/* Hero container: auto height to fit stacked content */
	.dphs-hero {
		max-height: none;
		min-height: 100svh;
		height: auto;
		align-items: flex-start;
		padding-bottom: 0;
			/* Content handles its own padding */
			overflow: hidden;
			/* Allow content to flow naturally during height transitions */
		}

		.dphs-hero__slide {
			position: absolute;
			min-height: 100%;
		}

		.dphs-hero__slide.is-active {
			position: relative;
			min-height: 100svh;
			height: auto;
	}

	/* --- Grid: images side-by-side on top, content full-width below --- */
	.dphs-hero__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows:    45vh auto;
		grid-template-areas:
			"left    right"
			"center  center";
		gap: 0;
		align-items: stretch;
	}

	/* --- Image columns fill their 45vh row ----------------------------- */
	.dphs-hero__col--left,
	.dphs-hero__col--right {
		justify-content: center;
		align-items:     flex-end;
		overflow:        hidden;
	}

	.dphs-hero__col--left  { align-items: flex-end;   }
	.dphs-hero__col--right { align-items: flex-end;   }

	.dphs-hero__img-wrapper {
		max-width:  100%;
		width:      100%;
		height:     100%;
		margin:     0;
	}

	.dphs-hero__img-wrapper--left,
	.dphs-hero__img-wrapper--right {
		margin: 0;
	}

	.dphs-hero__img {
		width:          100%;
		height: auto;
			min-height: 35vh;
		max-height:     45vh;
		object-fit: contain;
			object-position: bottom center;
			padding: 20px;
			/* Give cards some breathing room */
	}

	/* --- Mobile image override (shown only on mobile) ------------------- */
	.dphs-hero__img--mobile-only {
		display: block;
	}
	.dphs-hero__img--desktop-only {
		display: none;
	}

	/* --- Center content: full width, pushed below images ---------------- */
	.dphs-hero__col--center {
		grid-column: 1 / -1;
		align-self: start;
			/* Prevent stretching into navigation area */
	}

	.dphs-hero__content {
		width:   100%;
		padding: 30px 2rem 120px;
			/* Even larger bottom gap */
		gap:     16px;
		display: flex;
			flex-direction: column;
		align-items: center;
		text-align:  center;
	}

	/* --- Typography --------------------------------------------------------- */
	.dphs-hero__eyebrow {
		font-size: 11px;
	}

	.dphs-hero__heading {
		font-size: clamp(28px, 6vw, 38px);
	}

	.dphs-hero__description {
		font-size: 16px;
		max-width:  100%;
	}

	.dphs-hero__feature-item {
		font-size: 11px;
	}

	/* --- CTA: full-width touch target ----------------------------------- */
	.dphs-hero__cta {
		width: auto;
			min-width: 200px;
			max-width: 280px;
			margin: 0 auto;
		justify-content: center;
		padding:         18px 24px;
		font-size:       14px;
	}

	/* --- Decorative background text ------------------------------------ */
	.dphs-hero__bg-text {
		font-size:  clamp(160px, 45vw, 220px);
		top:        50%;
		transform:  translateY(-50%);
		inset:      unset;
		left:       0;
		right:      0;
	}

	/* --- Placeholder images on mobile ---------------------------------- */
	.dphs-hero__img-wrapper--placeholder {
		min-height: 100%;
		border-radius: 0;
	}
}

/* =============================================================================
   RESPONSIVE — Small phones (≤ 480px)
   ============================================================================= */
@media (max-width: 480px) {

	.dphs-hero__grid {
		grid-template-rows: 38vh auto;
	}

	.dphs-hero__img {
		max-height: 38vh;
	}

	.dphs-hero__heading {
		font-size: clamp(24px, 7vw, 34px);
	}

	.dphs-hero__features {
		flex-direction: row;
		align-items:    center;
	}
}

/* =============================================================================
   TOUCH DEVICES — Disable hover/mouse effects
   ============================================================================= */
@media (hover: none) {

	.dphs-hero__cta:hover {
		filter:    none;
		transform: none;
		box-shadow: 0 8px 30px rgba(0,0,0,0.25);
	}

	.dphs-hero__cta:hover .dphs-hero__cta-arrow {
		transform: none;
	}

	/* Active/tap state instead */
	.dphs-hero__cta:active {
		filter:    brightness(0.9);
		transform: scale(0.98);
	}
}

/* =============================================================================
   NAVIGATION — Arrow Buttons & Bullet Indicators
   ============================================================================= */

/* --- Arrow Buttons ---------------------------------------------------------- */
.dphs-hero__nav-arrow {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         1000;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           52px;
	height:          52px;
	background:      rgba(255,255,255,0.06);
	border:          1px solid rgba(255,255,255,0.25);
	border-radius:   50%;
	cursor:          pointer;
	color:           #ffffff;
	padding:         0;
	outline:         none;
	transition:      background 0.3s ease, border-color 0.3s ease;
	will-change:     transform;
}

.dphs-hero__nav-arrow--prev { left:  24px; }
.dphs-hero__nav-arrow--next { right: 24px; }

.dphs-hero__nav-arrow:hover {
	background:   rgba(255,255,255,0.14);
	border-color: #ffffff;
}

/* GSAP handles the x-nudge; this resets when not hovered (fallback only) */
.dphs-hero__nav-arrow--prev:not(:hover) { transform: translateY(-50%) translateX(0); }
.dphs-hero__nav-arrow--next:not(:hover) { transform: translateY(-50%) translateX(0); }

.dphs-hero__nav-arrow:focus-visible {
	outline:        2px solid rgba(255,255,255,0.7);
	outline-offset: 3px;
}

.dphs-hero__nav-arrow:disabled {
	opacity:        0.25;
	cursor:         not-allowed;
	pointer-events: none;
}

.dphs-hero__nav-arrow svg {
	display:        block;
	width:          20px;
	height:         20px;
	flex-shrink:    0;
	pointer-events: none;
}

/* --- Bullet Indicators ------------------------------------------------------ */
.dphs-hero__bullets {
	position:    absolute;
	bottom:      22px;
	left:        50%;
	transform:   translateX(-50%);
	z-index:     1000;
	display:     flex;
	align-items: center;
	gap:         10px;
}

.dphs-hero__bullet {
	flex-shrink:   0;
	width:         12px;
	height:        12px;
	border-radius: 50%;
	border:        2px solid #ffffff;
	background:    rgba(255,255,255,0);  /* transparent — GSAP animates this */
	cursor:        pointer;
	padding:       0;
	outline:       none;
	will-change:   transform, background-color;
}

.dphs-hero__bullet.is-active {
	background: rgba(255,255,255,1);
}

.dphs-hero__bullet:focus-visible {
	outline:        2px solid rgba(255,255,255,0.7);
	outline-offset: 3px;
}

/* --- Mobile: hide arrows, enlarge bullets ----------------------------------- */
@media (max-width: 1024px) {

	.dphs-hero__nav-arrow {
		display: none; /* rely on swipe gestures */
	}

	.dphs-hero__bullet {
		width:  16px;
		height: 16px;
	}

	.dphs-hero__bullets {
		gap:    15px;
		bottom: 24px;
	}
}