/* ========================================
   PAGE SHELL
   ======================================== */
body{background:var(--color-blue-light)}
#main{padding-bottom:1.5rem}
@media (min-width: 768px){
#main{padding-bottom:3rem}
}

@media (max-width: 767.98px){
.rail{border-top:0}
#selection,
.rail-group,
#selection + .rail,
.rail + .rail{margin-top:0.5rem}
}

/* ========================================
   AD
   ======================================== */
#ad-single iframe{aspect-ratio:728 / 90;max-width:728px}

/* ========================================
   RAIL GROUP — CHAPTER MARKER
   ======================================== */
.rail-group > header{padding:1.25rem 1rem 1rem}
@media (min-width: 768px){
.rail-group > header{padding:1.25rem 0}
}

.rail-group > header h2{color:var(--color-text-main);font-family:var(--font-display);font-size:1.375rem;font-weight:var(--font-weight-display);letter-spacing:-0.02em;line-height:1.15}
@media (min-width: 768px){
.rail-group > header h2{font-size:1.75rem}
}

.rail-group > header h2::after{background-color:var(--color-primary);border-radius:var(--radius-full);content:"";display:block;height:0.1875rem;margin-top:0.5rem;width:2rem}

.rail-group > header p{color:var(--color-text-muted);font-size:0.8125rem;margin-top:0.5rem}
@media (min-width: 768px){
.rail-group > header p{font-size:var(--font-size-reading)}
}

/* ========================================
   RAIL
   ======================================== */
.rail header h2{line-height:1.25;min-width:0}

.rail header a{font-size:0.75rem;margin-top:0.125rem}
@media (min-width: 768px){
.rail header a{font-size:0.875rem}
}

.rail .alt-carousel{margin-right:-1rem;padding-right:1rem}
@media (min-width: 768px){
.rail .alt-carousel{margin-right:0;padding-right:0}
}

.rail .alt-card{flex:0 0 clamp(13rem, 20vw, 15rem)}

/* ========================================
   CAROUSEL ARROWS
   ======================================== */
.rail__viewport{position:relative}
.rail__arrow{display:none}

@media (min-width: 768px){
.rail__arrow{align-items:center;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:50%;box-shadow:var(--shadow-card);color:var(--color-text-main);display:flex;height:2.5rem;justify-content:center;position:absolute;top:calc(50% - 0.25rem);transition:background-color 0.15s, color 0.15s, opacity 0.2s;translate:0 -50%;width:2.5rem;z-index:var(--z-raised)}
.rail__arrow:hover{background-color:var(--color-blue-soft);color:var(--color-blue)}
.rail__arrow:disabled{opacity:0;pointer-events:none}
.rail__arrow--prev{left:0.5rem}
.rail__arrow--next{right:0.5rem}
.rail__arrow .material-symbols-outlined{font-size:20px}
}