/**

* Clics Modernos
*
* Devices Page — Slider
  */

/* ============================================================
SLIDER
============================================================ */

.devices-slider {
padding-bottom: var(--section-spacing-md);
}

.devices-slider__inner {
position: relative;
}

.devices-slider__viewport {
position: relative;
overflow: hidden;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-2xl);
background-color: var(--color-card);
box-shadow: var(--shadow-sm);
}

.devices-slider__track {
display: flex;
width: 100%;
transition: transform var(--duration-slow) var(--ease-apple);
will-change: transform;
}

/* ============================================================
SLIDE
============================================================ */

.devices-slide {
position: relative;
flex: 0 0 100%;
width: 100%;
min-width: 100%;
visibility: hidden;
opacity: 0;
transition:
opacity var(--duration-base) var(--ease-standard),
visibility var(--duration-base) var(--ease-standard);
}

.devices-slide.is-active {
visibility: visible;
opacity: 1;
}

.devices-slide__content {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
min-height: 32rem;
padding: clamp(2rem, 5vw, 5rem);
}

.devices-slide__copy {
position: relative;
z-index: 1;
width: min(100%, 31rem);
}

.devices-slide__eyebrow {
display: block;
margin-bottom: var(--space-4);
color: var(--color-muted-foreground);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.devices-slide__title {
max-width: 28rem;
margin: 0;
color: var(--color-card-foreground);
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 3rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.035em;
}

.devices-slide__description {
max-width: 27rem;
margin-top: var(--space-5);
color: var(--color-muted-foreground);
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.65;
}

.devices-slide__action {
margin-top: var(--space-8);
}

/* ============================================================
MEDIA
============================================================ */

.devices-slide__media {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 24rem;
padding: var(--space-4);
}

.devices-slide__image {
width: min(100%, 32rem);
max-height: 27rem;
margin-inline: auto;
object-fit: contain;
object-position: center;
transition: transform 600ms var(--ease-apple);
}

.devices-slide.is-active .devices-slide__image {
transform: scale(1);
}

/* ============================================================
CONTROLS
============================================================ */

.devices-slider__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
margin-top: var(--space-6);
}

.devices-slider__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-full);
background-color: var(--color-background);
color: var(--color-foreground);
transition:
transform var(--transition-base),
background-color var(--transition-base),
border-color var(--transition-base),
color var(--transition-base),
opacity var(--transition-base);
}

.devices-slider__arrow:hover {
transform: translateY(-2px);
border-color: var(--color-accent);
background-color: var(--color-accent);
color: var(--color-accent-foreground);
}

.devices-slider__arrow:active {
transform: translateY(0) scale(0.97);
}

.devices-slider__arrow:disabled {
cursor: not-allowed;
opacity: 0.4;
transform: none;
}

.devices-slider__pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}

.devices-slider__dot {
width: 0.5rem;
height: 0.5rem;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background-color: var(--color-border);
transition:
width var(--transition-base),
background-color var(--transition-base),
transform var(--transition-base);
}

.devices-slider__dot:hover {
transform: scale(1.15);
background-color: var(--color-muted-foreground);
}

.devices-slider__dot.is-active {
width: 1.5rem;
background-color: var(--color-accent);
}

/* ============================================================
TABLET
============================================================ */

@media (max-width: 1023px) {

.devices-slide__content {
min-height: 28rem;
padding: var(--space-10);
}

.devices-slide__media {
min-height: 21rem;
}

.devices-slide__image {
max-height: 23rem;
}

}

/* ============================================================
MOBILE
============================================================ */

@media (max-width: 639px) {

.devices-slide__content {
grid-template-columns: 1fr;
min-height: 0;
padding: var(--space-8) var(--space-6);
}

.devices-slide__media {
order: -1;
min-height: 15rem;
padding: var(--space-2) 0 var(--space-8);
}

.devices-slide__image {
width: min(100%, 20rem);
max-height: 17rem;
}

.devices-slide__copy {
width: 100%;
}

.devices-slide__title {
max-width: 100%;
font-size: 1.75rem;
}

.devices-slide__description {
max-width: 100%;
margin-top: var(--space-4);
}

.devices-slide__action {
margin-top: var(--space-6);
}

.devices-slider__controls {
gap: var(--space-4);
margin-top: var(--space-5);
}

.devices-slider__arrow {
width: 2.5rem;
height: 2.5rem;
}

}

/* ============================================================
REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

.devices-slider__track,
.devices-slide,
.devices-slide__image,
.devices-slider__arrow,
.devices-slider__dot {
transition: none;
}

}