#idom-featured { padding: 0 0 15px; background: #fff; }
#idom-featured [hidden] { display: none !important; }
#idom-featured :focus-visible { outline: 3px solid #f69222; outline-offset: 4px; }
.featured-viewport { position: relative; overflow: hidden; touch-action: pan-y pinch-zoom; }
.featured-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 46px; height: 54px; padding: 0; border: 1px solid #ffffff55; border-radius: 5px; color: #fff; background: #10183ba6; backdrop-filter: blur(5px); font-size: 18px; opacity: 0; pointer-events: none; transition: opacity .2s,background .2s; }
.featured-arrow--prev { left: 16px; }
.featured-arrow--next { right: 16px; }
#idom-featured:hover .featured-arrow, #idom-featured:has(:focus-visible) .featured-arrow { opacity: 1; pointer-events: auto; }
.featured-arrow:hover { background: #14176ced; }
.featured-panel { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 7px; height: 510px; animation: featured-appear .35s ease-out; }
.featured-tile { position: relative; display: block; min-width: 0; overflow: hidden; border-radius: 8px; background: #17204d; color: #fff; isolation: isolate; }
.featured-tile--lead { grid-row: span 2; }
.featured-tile img { display: block; position: absolute; inset: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; z-index: -2; }
.featured-tile:hover img { transform: scale(1.04); }
.featured-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,#0c174022 0%,#0c174044 20%,#0c1740cf 76%,#0c1740ed 100%); }
.featured-tile--lead::before { background: linear-gradient(180deg,#101b3622 0%,#101b3612 25%,#101b36c9 69%,#101b36f0 100%); }
.featured-tile--logo img { object-fit: contain; background: #ecf6fa; }
.featured-tile--book img { object-fit: contain; object-position: 88% center; padding: 13px; background: #182052; }
.featured-tile--book::before { background: linear-gradient(90deg,#10183be6 0%,#10183b8c 50%,#10183b22 100%),linear-gradient(0deg,#10183bea,transparent 95%); }
.featured-tile-content { position: absolute; inset: auto 0 0; padding: 20px; }
.featured-tile--lead .featured-tile-content { padding: 30px; }
.featured-tile-category { display: inline-block; color: #fff; background: #159ad4; border-radius: 3px; font-size: 10px; font-weight: 600; padding: 4px 7px; line-height: 1.3; margin-bottom: 10px; }
.featured-tile-category--study { background: #f69222; color: #1b2352; }
.featured-tile-category--event { background: #fff; color: #14176c; }
.featured-tile-category--book { background: #5865b9; }
.featured-tile h2, .featured-tile h3 { color: #fff; margin: 0 0 10px; line-height: 1.25; font-weight: 650; text-wrap: pretty; }
.featured-tile h2 { font-size: 35px; letter-spacing: -.025em; }
.featured-tile h3 { font-size: 20px; letter-spacing: -.012em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.featured-tile p { color: #e6ebf4; font-size: 13px; line-height: 1.65; margin: 0 0 13px; max-width: 480px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-tile-meta { display: block; color: #d0d9ec; font-size: 10px; line-height: 1.5; }
.featured-tile--lead .featured-tile-meta { font-size: 11px; }
.featured-bottom { position: relative; display: flex; justify-content: center; align-items: center; margin: 10px 16px 0; min-height: 23px; }
.featured-counter { color: #8a92a6; font-size: 11px; font-variant-numeric: tabular-nums; }
.featured-counter { position: absolute; left: 0; }
.featured-counter strong { color: #14176c; font-weight: 600; }
.featured-dots { display: flex; gap: 6px; }
.featured-dots button { border: 0; padding: 8px 5px; background: transparent; border-radius: 5px; }
.featured-dots button::before { content: ''; display: block; width: 23px; height: 3px; border-radius: 3px; background: #dce5ed; transition: background .2s; }
.featured-dots button[aria-pressed="true"]::before { background: #f69222; }
@keyframes featured-appear { from { opacity: .35; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 992px) {
  #idom-featured .featured-shell { width: 100%; max-width: none; padding: 0; }
  .featured-panel { height: clamp(485px,36vw,640px); }
  .featured-tile { border-radius: 0; }
}
@media (max-width: 1199px) {
  .featured-panel { min-height: 485px; }
  .featured-tile-content { padding: 17px; }
  .featured-tile--lead .featured-tile-content { padding: 25px; }
  .featured-tile h2 { font-size: 31px; }
  .featured-tile h3 { font-size: 18px; }
}
@media (max-width: 991px) {
  .featured-tile-content { padding: 13px; }
  .featured-tile--lead .featured-tile-content { padding: 22px; }
  .featured-tile h2 { font-size: 29px; }
  .featured-tile h3 { font-size: 16px; }
  .featured-tile-category { font-size: 9px; padding: 3px 6px; }
  .featured-tile-meta { font-size: 9px; }
}
@media (max-width: 767px) {
  #idom-featured { padding: 0 0 15px; }
  .featured-arrow { width: 34px; height: 44px; font-size: 14px; }
  .featured-arrow--prev { left: 8px; }
  .featured-arrow--next { right: 8px; }
  .featured-panel { height: auto; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 315px repeat(2,215px); gap: 6px; }
  .featured-tile--lead { grid-row: auto; grid-column: span 2; }
  .featured-tile--lead .featured-tile-content { padding: 22px; }
  .featured-tile h2 { font-size: 29px; }
  .featured-tile h3 { font-size: 16px; }
  .featured-tile p { font-size: 12px; }
  .featured-tile--lead .featured-tile-meta { font-size: 10px; }
  .featured-tile-content { padding: 14px; }
  .featured-bottom { margin-top: 13px; }
}
@media (max-width: 359px) {
  .featured-panel { grid-template-rows: 310px repeat(2,225px); }
  .featured-tile-content { padding: 11px; }
  .featured-tile h3 { font-size: 15px; }
  .featured-tile h2 { font-size: 27px; }
}
@media (hover: none) {
  .featured-arrow { opacity: .8; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .featured-panel { animation: none; }
  #idom-featured * { transition: none !important; }
}
