.dc-fspot,
.dc-fspot *,
.dc-fspot *::before,
.dc-fspot *::after{box-sizing:border-box}
.dc-fspot{
  --dc-fspot-max:1280px;
  --dc-fspot-heading-gap:32px;
  --dc-fspot-card-h:326px;
  --dc-fspot-card-radius:24px;
  --dc-fspot-card-bg:#F7F7F7;
  --dc-fspot-content-left:32px;
  --dc-fspot-content-top:54px;
  --dc-fspot-image-w:451px;
  --dc-fspot-image-h:254px;
  --dc-fspot-image-top:44px;
  --dc-fspot-image-right:32px;
  --dc-fspot-image-gap:32px;
  --dc-fspot-image-radius:24px;
  --dc-fspot-image-x:50%;
  --dc-fspot-image-y:50%;
  --dc-fspot-badge-left:32px;
  --dc-fspot-badge-top:-14px;
  --dc-fspot-badge-h:40px;
  --dc-fspot-badge-radius:7px;
  --dc-fspot-badge-pad-x:12px;
  --dc-fspot-badge-bg:#F47135;
  --dc-fspot-badge-fold:#B54C1B;
  --dc-fspot-badge-color:#fff;
  --dc-fspot-badge-icon:20px;
  --dc-fspot-badge-gap:4px;
  --dc-fspot-date-icon:16px;
  --dc-fspot-date-gap:8px;
  --dc-fspot-date-title-gap:14px;
  --dc-fspot-title-desc-gap:10px;
  --dc-fspot-desc-gap:8px;
  --dc-fspot-desc-more-gap:10px;
  --dc-fspot-more:#FF9600;
  --dc-fspot-more-hover:#E88900;
  --dc-fspot-more-icon:16px;
  --dc-fspot-more-gap:6px;
  --dc-fspot-nav-top:32px;
  --dc-fspot-nav-icon:24px;
  --dc-fspot-nav-gap:28px;
  --dc-fspot-dot-gap:8px;
  --dc-fspot-dot:8px;
  --dc-fspot-dot-active:12px;
  --dc-fspot-nav-color:#FF9600;
  --dc-fspot-dot-opacity:.2;
  --dc-fspot-slide-duration:420ms;
  --dc-fspot-enter-duration:620ms;
  --dc-fspot-stagger:90ms;
  --dc-fspot-enter-offset:24px;
  width:100%;
  margin:0;
  overflow:visible;
}
.dc-fspot__inner{width:min(100%,var(--dc-fspot-max));min-width:0;margin:0 auto}
.dc-fspot__heading{margin:0 0 var(--dc-fspot-heading-gap);padding:0;overflow-wrap:anywhere}
.dc-fspot__carousel,.dc-fspot__stage{min-width:0}
.dc-fspot__stage{position:relative}
.dc-fspot__slide{display:none;min-width:0;margin:0;padding:0}
.dc-fspot__slide.is-active{display:block}
.dc-fspot__card{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:var(--dc-fspot-card-h);
  overflow:visible;
  background:var(--dc-fspot-card-bg);
  border-radius:var(--dc-fspot-card-radius);
}
.dc-fspot__copy{
  position:relative;
  z-index:2;
  min-width:0;
  min-height:var(--dc-fspot-card-h);
  padding:var(--dc-fspot-content-top) calc(var(--dc-fspot-image-right) + var(--dc-fspot-image-w) + var(--dc-fspot-image-gap)) 28px var(--dc-fspot-content-left);
}
.dc-fspot__badge{position:absolute;z-index:5;top:var(--dc-fspot-badge-top);left:var(--dc-fspot-badge-left);height:var(--dc-fspot-badge-h);display:flex;align-items:flex-start}
.dc-fspot__badge-fold{position:absolute;top:0;left:0;width:9px;height:14px;background:var(--dc-fspot-badge-fold);clip-path:polygon(100% 0,100% 100%,0 100%)}
.dc-fspot__badge-main{position:relative;left:9px;display:inline-flex;align-items:center;height:var(--dc-fspot-badge-h);padding:0 var(--dc-fspot-badge-pad-x);gap:var(--dc-fspot-badge-gap);color:var(--dc-fspot-badge-color);background:var(--dc-fspot-badge-bg);border-radius:0 var(--dc-fspot-badge-radius) var(--dc-fspot-badge-radius) var(--dc-fspot-badge-radius);white-space:nowrap}
.dc-fspot__badge-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--dc-fspot-badge-icon);height:var(--dc-fspot-badge-icon);flex:0 0 var(--dc-fspot-badge-icon);color:currentColor}
.dc-fspot__badge-icon svg,.dc-fspot__badge-icon i,.dc-fspot__badge-icon img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;color:currentColor;fill:currentColor}
.dc-fspot__date{display:flex;align-items:center;gap:var(--dc-fspot-date-gap);min-width:0}
.dc-fspot__date-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--dc-fspot-date-icon);height:var(--dc-fspot-date-icon);flex:0 0 var(--dc-fspot-date-icon)}
.dc-fspot__date-icon svg,.dc-fspot__date-icon i,.dc-fspot__date-icon img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;color:currentColor}
.dc-fspot__title{margin:var(--dc-fspot-date-title-gap) 0 0;padding:0;overflow-wrap:anywhere}
.dc-fspot__title a,.dc-fspot__title a:visited{color:inherit;text-decoration:none;background:none;box-shadow:none}
.dc-fspot__descriptions{display:grid;gap:var(--dc-fspot-desc-gap);margin-top:var(--dc-fspot-title-desc-gap)}
.dc-fspot__description{margin:0;padding:0}
.dc-fspot__more,.dc-fspot__more:visited{display:inline-flex;align-items:center;gap:var(--dc-fspot-more-gap);margin-top:var(--dc-fspot-desc-more-gap);padding:0;color:var(--dc-fspot-more);background:none;border:0;text-decoration:none;box-shadow:none;transition:color .22s ease}
.dc-fspot__more-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--dc-fspot-more-icon);height:var(--dc-fspot-more-icon);flex:0 0 var(--dc-fspot-more-icon);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.dc-fspot__more-icon svg,.dc-fspot__more-icon i,.dc-fspot__more-icon img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;color:currentColor;fill:currentColor}
.dc-fspot__image{position:absolute;z-index:1;top:var(--dc-fspot-image-top);right:var(--dc-fspot-image-right);display:block;width:var(--dc-fspot-image-w);height:var(--dc-fspot-image-h);overflow:hidden;border-radius:var(--dc-fspot-image-radius);background:#ededed;text-decoration:none;box-shadow:none}
.dc-fspot__image img,.dc-fspot__image-placeholder{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:100%;min-height:100%;max-width:none}
.dc-fspot__image img{object-fit:cover;object-position:var(--dc-fspot-image-x) var(--dc-fspot-image-y)}
.dc-fspot__image-placeholder{background:linear-gradient(135deg,#eee,#e2e2e2)}
.dc-fspot__navigation{display:flex;align-items:center;justify-content:center;gap:var(--dc-fspot-nav-gap);margin-top:var(--dc-fspot-nav-top)}
.dc-fspot button.dc-fspot__nav,
.dc-fspot button.dc-fspot__dot{
  appearance:none!important;
  -webkit-appearance:none!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  min-height:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--dc-fspot-nav-color)!important;
  cursor:pointer;
  font:inherit;
  line-height:1;
  text-decoration:none!important;
}
.dc-fspot button.dc-fspot__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--dc-fspot-nav-icon);height:var(--dc-fspot-nav-icon);flex:0 0 var(--dc-fspot-nav-icon);transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .22s ease}
.dc-fspot__nav svg{display:block;width:100%;height:100%;color:currentColor}
.dc-fspot__dots{display:flex;align-items:center;justify-content:center;gap:var(--dc-fspot-dot-gap)}
.dc-fspot button.dc-fspot__dot{width:var(--dc-fspot-dot);height:var(--dc-fspot-dot);flex:0 0 var(--dc-fspot-dot);border-radius:999px!important;background:var(--dc-fspot-nav-color)!important;opacity:var(--dc-fspot-dot-opacity);transition:width .22s ease,opacity .22s ease,transform .22s ease}
.dc-fspot button.dc-fspot__dot.is-active{width:var(--dc-fspot-dot-active);flex-basis:var(--dc-fspot-dot-active);opacity:1}
.dc-fspot__nav:focus-visible,.dc-fspot__dot:focus-visible,.dc-fspot__more:focus-visible,.dc-fspot__title a:focus-visible,.dc-fspot__image:focus-visible{outline:3px solid color-mix(in srgb,var(--dc-fspot-nav-color) 42%,white);outline-offset:3px}
.dc-fspot__empty{padding:28px;border:1px dashed rgba(34,34,34,.18);border-radius:16px;background:#fafafa;color:#666;text-align:center}

@media (hover:hover) and (pointer:fine){
  .dc-fspot__more:hover{color:var(--dc-fspot-more-hover)}
  .dc-fspot__more:hover .dc-fspot__more-icon{transform:translateX(3px)}
  .dc-fspot button.dc-fspot__nav:hover{transform:scale(1.08)}
  .dc-fspot button.dc-fspot__dot:hover{opacity:.72;transform:scale(1.08)}
}

/* Progressive enhancement: content is visible by default. It is hidden only after JS confirms animation can run. */
.dc-fspot.dc-fspot--animate.is-js-ready:not(.is-inview) .dc-fspot__reveal{opacity:0;transform:translate3d(0,var(--dc-fspot-enter-offset),0)}
.dc-fspot.dc-fspot--animate.is-js-ready .dc-fspot__reveal{transition:opacity var(--dc-fspot-enter-duration) cubic-bezier(.22,1,.36,1),transform var(--dc-fspot-enter-duration) cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--dc-fspot-order,0) * var(--dc-fspot-stagger))}
.dc-fspot.dc-fspot--animate.is-js-ready.is-inview .dc-fspot__reveal{opacity:1;transform:translate3d(0,0,0)}
.dc-fspot__slide.is-entering .dc-fspot__card{animation:dc-fspot-slide-in var(--dc-fspot-slide-duration) cubic-bezier(.22,1,.36,1) both}
@keyframes dc-fspot-slide-in{from{opacity:.28;transform:translate3d(14px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}



/* Responsive remains part of the existing Spotlight card/carousel. */
@media (max-width:1599px) and (min-width:1200px){
  .dc-fspot{--dc-fspot-image-w:clamp(390px,29.4vw,451px);--dc-fspot-image-h:clamp(220px,16.6vw,254px);--dc-fspot-content-left:clamp(24px,2.1vw,32px);--dc-fspot-image-right:clamp(24px,2.1vw,32px);--dc-fspot-image-gap:clamp(22px,2vw,32px)}
}
@media (max-width:1199px) and (min-width:901px){
  .dc-fspot{--dc-fspot-image-w:42%;--dc-fspot-image-h:clamp(210px,22vw,238px);--dc-fspot-image-gap:22px;--dc-fspot-content-left:24px;--dc-fspot-image-right:24px}
  .dc-fspot__copy{padding-left:24px;padding-top:68px}
  .dc-fspot__badge{top:16px;left:24px;height:auto;max-width:calc(58% - 48px);align-items:flex-start}
  .dc-fspot__badge-fold{display:none}
  .dc-fspot__badge-main{left:0;max-width:100%;min-height:36px;height:clamp(36px,var(--dc-fspot-badge-h),40px);border-radius:0 var(--dc-fspot-badge-radius) var(--dc-fspot-badge-radius) 0;overflow:hidden}
  .dc-fspot__badge-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:900px){
  .dc-fspot,.dc-fspot__inner,.dc-fspot__carousel,.dc-fspot__stage,.dc-fspot__slide,.dc-fspot__card,.dc-fspot__copy{min-width:0}
  .dc-fspot__card{display:flex;flex-direction:column;min-height:0;padding:0 0 28px;overflow:hidden;border-radius:min(var(--dc-fspot-card-radius),20px)}
  .dc-fspot__image{order:1;position:relative;top:auto;right:auto;width:calc(100% - 32px);height:auto;aspect-ratio:16/9;margin:16px 16px 0;border-radius:min(var(--dc-fspot-image-radius),18px)}
  .dc-fspot__copy{order:2;min-height:0;padding:26px 24px 0}
  .dc-fspot__badge{top:16px;left:16px;height:auto;max-width:calc(100% - 32px);align-items:flex-start}
  .dc-fspot__badge-fold{display:none}
  .dc-fspot__badge-main{left:0;max-width:100%;min-height:36px;height:clamp(36px,var(--dc-fspot-badge-h),40px);border-radius:0 var(--dc-fspot-badge-radius) var(--dc-fspot-badge-radius) 0;overflow:hidden}
  .dc-fspot__badge-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dc-fspot__heading,.dc-fspot__title,.dc-fspot__description{overflow-wrap:anywhere}
  .dc-fspot__navigation{margin-top:24px;gap:min(var(--dc-fspot-nav-gap),22px)}
  .dc-fspot button.dc-fspot__nav{width:48px;height:48px;min-width:48px;min-height:48px;padding:10px!important}
  .dc-fspot button.dc-fspot__dot{min-width:12px!important;min-height:12px!important}
}
@media (max-width:767px){
  .dc-fspot__heading{margin-bottom:24px}
  .dc-fspot__card{padding-bottom:24px;border-radius:min(var(--dc-fspot-card-radius),18px)}
  .dc-fspot__image{width:calc(100% - 24px);margin:12px 12px 0;border-radius:min(var(--dc-fspot-image-radius),14px)}
  .dc-fspot__copy{padding:22px 16px 0}
  .dc-fspot__badge{left:12px;top:12px;max-width:calc(100% - 24px)}
  .dc-fspot__badge-main{max-width:100%;overflow:hidden}
  .dc-fspot__more{min-height:44px;margin-top:8px}
  .dc-fspot__navigation{gap:16px;margin-top:20px}
}
@media (max-width:420px){
  .dc-fspot__description:nth-child(n+2){display:none}
  .dc-fspot__badge-main{height:36px;font-size:13px}
  .dc-fspot__badge{height:36px}
}
@media (hover:none),(pointer:coarse){
  .dc-fspot__more:active{color:var(--dc-fspot-more-hover)}
  .dc-fspot button.dc-fspot__nav:active{transform:scale(.96)}
}
@media (prefers-reduced-motion:reduce){
  .dc-fspot *, .dc-fspot *::before, .dc-fspot *::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .dc-fspot__reveal{opacity:1!important;transform:none!important}
}
