/* Featured Topics */
:root {
  --ft-primary: #003366;
  --ft-bg: #ffffff;
  --ft-card-bg: #ffffff;
  --ft-card-border: rgba(16, 24, 40, .3);
  --ft-heading: #1f2937;
  --ft-text: #000;
  --ft-muted: #00416A;
  --ft-accent: #0a66ff;
  --ft-accent-soft: rgba(10, 102, 255, .12);
  --ft-shadow: 0 4px 16px rgba(2, 6, 23, .06), 0 16px 48px rgba(2, 6, 23, .06);
  /* Fluid horizontal padding for card width control */
  --ft-hpad-min: 0.75rem;
  --ft-hpad-max: 2rem;
  --ft-hpad: clamp(var(--ft-hpad-min), 3vw, var(--ft-hpad-max));
  /* Header side paddings via clamp (arrows sit on header sides) */
  --ft-main-pad-left: clamp(0.95rem, 4vw, 2rem);
  --ft-main-pad-right: clamp(0.95rem, 4vw, 2rem);
}

.ft-container { margin: 0 0 1rem 0; border-radius: 10px; overflow: hidden; background: inherit; box-sizing: border-box; width: 100%; }
.ft-header { background: transparent; padding: .9rem 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.ft-header h2 { margin: 0; color: var(--ft-heading); text-align: center; flex: 1 1 auto; font-style: italic; font-weight: 500; }
.ft-header__side { flex: 0 0 auto; display: inline-flex; align-items: center; min-width: 44px; justify-content: center; }

.ft-viewport { position: relative; }
.ft-main { display: block; padding: .5rem 0 1rem; box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; touch-action: pan-y; transition: height .3s ease; }
.ft-track { display: flex; width: 100%; will-change: transform; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.ft-track { gap: 0; margin: 0; }
.ft-topic { background: var(--ft-card-bg); border: 0.0625rem solid var(--ft-card-border); border-radius: 0.75rem; padding: 1.125rem; margin: .75rem auto; box-sizing: border-box; width: 100%; }
.ft-topic a { color: var(--ft-primary);}
.ft-topic a:hover, .ft-topic a *:hover { color: var(--ft-muted); text-decoration: underline; }
.ft-topic-name { margin: 0 0 .4rem 0; font-weight: 400; font-style: italic; }
.ft-topic-link { text-decoration: inherit; }
.ft-topic-link:hover { text-decoration: underline; color: var(--ft-accent); }
.ft-meta { font-size: 0.9375rem; color: var(--ft-primary); margin: .25rem 0 .5rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ft-meta_category, .ft-meta_topic_author { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ft-meta__item { display: inline-flex; align-items: center; gap: .25rem; }
.ft-meta__sep { color: #cbd5e1; display: none; }
.ft-description p { margin-bottom: .5rem; color: var(--ft-text); font-size: clamp(0.9375rem, calc(0.4vw + 0.8rem), 1rem); line-height: 1.5; word-break: break-word; display: inline-block; }
.ft-description a { pointer-events: none; color: var(--ft-text); }
.ft-description p * { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.ft-footer { font-size: 0.9375rem; color: var(--ft-primary); margin: .5rem 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.ft-footer_last_post_meta, .ft-footer_statistics { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap;}
.ft-lastlink { margin-left: .25rem; }
.ft-meta .icon, .ft-footer .icon { color: var(--ft-primary); font-size: 0.9375rem; }
.ft-meta a, .ft-footer a { font-weight: inherit; line-height: 1;}
.ft-description img, .ft-description a:has(img) {display: none}

/* Carousel slides (active slide is shown via JS) */
.ft-slide { flex: 0 0 100%; width: 100%; flex-direction: column; box-sizing: border-box; min-width: 0; max-width: 100%; }

/* Carousel height + overflow handling (applied once JS initialises) */
.ft-main.ft-carousel-ready {
  overflow: hidden;
  max-height: 32vh;
}
@supports (height: 1dvh) {
  .ft-main.ft-carousel-ready {
    max-height: 32dvh;
  }
}
.ft-main.ft-carousel-ready .ft-track,
.ft-main.ft-carousel-ready .ft-slide {
  height: 100%;
}
.ft-main.ft-carousel-ready .ft-topic {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.ft-main.ft-carousel-ready .ft-description {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin-right: -.25rem;
  padding: 0;
  padding-right: .25rem;
}
.ft-main.ft-carousel-ready .ft-description::-webkit-scrollbar {
  width: .5rem;
}
.ft-main.ft-carousel-ready .ft-description::-webkit-scrollbar-thumb {
  background-color: rgba(31, 41, 55, .25);
  border-radius: 1rem;
}
.ft-main.ft-carousel-ready .ft-description::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Navigation */
.ft-container { position: relative; }
.ft-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:0; padding: 0 1rem; box-sizing: border-box; }
.ft-arrow { border: 1px solid var(--ft-card-border); background: #fff; color: var(--ft-heading); border-radius: 999px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.08); min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; }
/* Embla-like ring dots (visual parity) */
.ft-dot { position: relative; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; }
.ft-dot::before { content: ''; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .3); background: transparent; transition: box-shadow .2s ease, transform .2s ease; }
.ft-dot.is-active::before, .ft-dot[aria-current="true"]::before { box-shadow: inset 0 0 0 1px #28313F; transform: scale(1.05); }
/* Stronger overrides to avoid theme collisions */
/* Dot sizing (no !important) */
.ft-container .ft-nav .ft-dot { width: 1.8rem; height: 1.8rem; padding: 0; background: transparent; border: 0; }
.ft-container .ft-nav .ft-dot::before { width: 1rem; height: 1rem; }

/* Focus and hover states */
.ft-arrow { color: #536482; }
.ft-arrow:hover { background: #368AD2; color: #fff; border-color: #368AD2; }
.ft-arrow:focus { outline: none; }
.ft-arrow:focus-visible { outline: none; box-shadow: 0 0 0 0.1875rem #A8D8FF, var(--ft-shadow); }
.ft-dot:hover::before { box-shadow: inset 0 0 0 2px #28313F; }
.ft-dot:focus { outline: none; }
.ft-dot:focus-visible::before { outline: none; box-shadow: inset 0 0 0 2px #28313F, 0 0 0 2px #A8D8FF; }

/* Responsive */
@media (max-width: 1024px) {
  .ft-main { padding: .5rem 0 1rem; }
  .ft-main.ft-carousel-ready { max-height: 32vh; }
  .ft-topic { margin: .5rem auto; padding: .75rem; }
  .ft-topic-name { }
  @supports (height: 1dvh) {
    .ft-main.ft-carousel-ready { max-height: 32dvh; }
  }
}
@media (max-width: 768px) {
  .ft-header h2 { }
  .ft-main { padding: .5rem 0 .75rem; min-height: 265px; }
  .ft-topic { padding: .75rem; }
  .ft-header { padding-left: 0; padding-right: 0; }
  .ft-meta_category { display: none; }
  .ft-footer_last_post_meta { display: none; }
}