/* ASK Responsive Showcase - self-contained frontend styles */
.ask-rs-wrap {
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	font-family:inherit;
}

.ask-rs-wrap,
.ask-rs-wrap * {
	box-sizing:border-box;
}

.ask-rs-panels {
	display:flex;
	width:100%;
	height:420px;
	overflow:hidden;
	background:#fff;
	border:0 !important;
	outline:0 !important;
	box-shadow:none;
}

.ask-rs-panel {
	position:relative;
	flex:1 1 0;
	min-width:0;
	height:100%;
	overflow:hidden;
	background:#111;
	border:0 !important;
	border-right:1px solid rgba(255,255,255,.8) !important;
	outline:0 !important;
	transition:flex-basis .45s cubic-bezier(.22,.61,.36,1), flex-grow .45s cubic-bezier(.22,.61,.36,1), min-width .45s cubic-bezier(.22,.61,.36,1);
}
.ask-rs-panel:last-child {
	border-right:0 !important;
}

/* Closed/default state: show the first image as the full panel image. */
.ask-rs-preview {
	position:absolute;
	inset:0;
	z-index:1;
	background-color:#eee;
	background-image:none;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	transition:opacity .25s ease;
}

.ask-rs-panel::after {
	content:"";
	position:absolute;
	inset:0;
	z-index:2;
	background:linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0) 38%);
	pointer-events:none;
}

.ask-rs-tab {
	position:absolute;
	inset:0;
	z-index:6;
	width:100%;
	height:100%;
	padding:0;
	border:0 !important;
	outline:0 !important;
	background:transparent;
	color:#fff;
	cursor:pointer;
	text-align:center;
	font:inherit;
}
.ask-rs-tab span {
	position:absolute;
	left:50%;
	bottom:30px;
	transform:translateX(-50%);
	white-space:nowrap;
	font-size:17px;
	line-height:1;
	font-weight:700;
	text-shadow:0 1px 4px rgba(0,0,0,.85);
}

/* When one panel is hovered, the other panels become narrow vertical tabs. */
@media (min-width:768px) {
	.ask-rs-panels.has-hover .ask-rs-panel:not(.is-hovered) .ask-rs-tab span {
		top:50%;
		left:50%;
		bottom:auto;
		transform:translate(-50%, -50%) rotate(-90deg);
	}
}

/* Only the hovered panel opens on desktop. */
@media (min-width:768px) {
	.ask-rs-panel:hover {
		flex:7 1 0;
	}
	.ask-rs-panel:hover .ask-rs-preview,
	.ask-rs-panel:hover > .ask-rs-tab {
		opacity:0;
		pointer-events:none;
	}
	.ask-rs-panel:hover::after {
		display:none;
	}
}

.ask-rs-panel-inner {
	position:relative;
	z-index:4;
	display:grid;
	grid-template-columns:minmax(260px, 50%) minmax(0, 50%);
	width:100%;
	height:100%;
}

/* Keep the detail layout hidden until the panel is hovered on desktop. */
@media (min-width:768px) {
	.ask-rs-panel-inner {
		display:none;
	}
	.ask-rs-panel:hover .ask-rs-panel-inner {
		display:grid;
	}
}

.ask-rs-copy {
	padding:28px 28px 24px;
	overflow:auto;
	background:#fff;
}
.ask-rs-copy h3 {
	margin:0 0 14px;
	font-size:24px;
	line-height:1.15;
	font-weight:600;
	color:#17245f;
}
.ask-rs-content {

}
.ask-rs-content p { margin:0 0 13px; }
.ask-rs-content ul { margin:0 0 13px 18px; padding:0; }
.ask-rs-content li { margin:0 0 10px; }
.ask-rs-content li::marker { color:#ef3e2f; }

.ask-rs-buttons {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:16px;
}
.ask-rs-button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:110px;
	min-height:36px;
	padding:8px 16px;
	text-decoration:none;
	font-size:12px;
	font-weight:600;
	color:#fff;
	background:#ff5a3d;
	border:1px solid #ff5a3d;
	border-radius:4px;
}
.ask-rs-button:hover,
.ask-rs-button:focus { color:#fff; background:#e84b30; }
.ask-rs-button-outline { color:#ff5a3d; background:#fff; }
.ask-rs-button-outline:hover,
.ask-rs-button-outline:focus { color:#fff; background:#ff5a3d; }

.ask-rs-media {
	position:relative;
	min-width:0;
	height:100%;
	overflow:hidden;
	background:#eee;
}
.ask-rs-slides { width:100%; height:100%; position:relative; }
.ask-rs-slide {
	position:absolute;
	inset:0;
	opacity:0;
	visibility:hidden;
	transition:opacity .35s ease;
}
.ask-rs-slide.is-current { opacity:1; visibility:visible; }
.ask-rs-slide img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.ask-rs-dots {
	position:absolute;
	left:50%;
	bottom:14px;
	z-index:4;
	display:flex;
	gap:5px;
	transform:translateX(-50%);
}
.ask-rs-dot {
	width:8px;
	height:8px;
	padding:0;
	border:1px solid #fff !important;
	border-radius:50%;
	background:transparent;
	box-shadow:0 1px 3px rgba(0,0,0,.5);
	cursor:pointer;
}
.ask-rs-dot.is-current { background:#fff; }
.ask-rs-no-image {
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	color:#777;
	text-align:center;
}

@media (max-width:900px) and (min-width:768px) {
	.ask-rs-panels { height:380px; }
	.ask-rs-copy { padding:22px 20px; }
	.ask-rs-copy h3 { font-size:22px; }
	.ask-rs-panel-inner { grid-template-columns:minmax(220px,45%) minmax(0,55%); }
}

/* Mobile/touch: stacked accordion. Images remain visible and the first item opens. */
@media (max-width:767px) {
	.ask-rs-wrap { max-width:100%; }
	.ask-rs-panels {
		display:block;
		height:auto;
		overflow:visible;
		box-shadow:none;
	}
	.ask-rs-panel {
		display:block;
		width:100%;
		min-width:0;
		height:auto;
		flex:none;
		overflow:hidden;
		background:#fff;
		border:0 !important;
		border-bottom:1px solid #ddd !important;
	}
	.ask-rs-panel:not(.is-active) {
		height:58px;
	}
	.ask-rs-panel:not(.is-active) .ask-rs-preview { display:none; }
	.ask-rs-panel.is-active { height:auto; }
	.ask-rs-tab {
		position:relative;
		display:flex;
		align-items:center;
		justify-content:flex-start;
		height:58px;
		min-height:58px;
		padding:0 14px;
		color:#ff4d36;
		background:#fff;
		text-align:left;
	}
	.ask-rs-tab span {
		position:static;
		transform:none;
		white-space:normal;
		font-size:20px;
		font-weight:500;
		text-shadow:none;
	}
	.ask-rs-panel.is-active > .ask-rs-tab { display:none; }
	.ask-rs-panel.is-active::after { display:none; }
	.ask-rs-panel.is-active .ask-rs-preview { display:none; }
	.ask-rs-panel.is-active .ask-rs-panel-inner {
		display:flex;
		flex-direction:column;
		width:100%;
		height:auto;
	}
	.ask-rs-media {
		order:0;
		width:100%;
		height:240px;
		min-height:240px;
	}
	.ask-rs-copy {
		order:1;
		padding:18px 14px 20px;
		overflow:visible;
	}
	.ask-rs-copy h3 { margin-bottom:10px; }
	.ask-rs-buttons { margin-top:12px; }
	.ask-rs-button { min-height:34px; }
}

@media (max-width:480px) {
	.ask-rs-media { height:220px; min-height:220px; }
	.ask-rs-tab span { font-size:18px; }
}