/* Apotheon Events Calendar — scoped under .aec-app to survive theme (Divi) resets */
.aec-app{
  --obsidian:#1A1B1A; --cream:#E5DEDB; --bronze:#C69846;
  --ink:#242220; --muted:#6c675f; --line:#e4ded2; --card:#ffffff; --soft:#f7f4ee;
  max-width:1240px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
}
.aec-app *{ box-sizing:border-box; }
/* Divi applies its heading webfont to h1–h6; it can fail on some mobile browsers and
   fall back to a serif. Force the calendar's own headings to the system sans stack. */
.aec-app h1,.aec-app h2,.aec-app h3,.aec-app h4,.aec-app h5,.aec-app h6,
.aec-app .aec-card-title,.aec-app .aec-m-title{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
/* This stylesheet only loads on pages that use [apotheon_events], so it's safe to relax
   Divi's default 80% content container here (removes the excessive side gutters). */
body #main-content .container{ width:92%; max-width:1320px; }
@media(max-width:980px){ body #main-content .container{ width:94%; } }

/* toolbar */
.aec-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.aec-toolbar-left{ display:flex; align-items:center; gap:8px; }
.aec-arrow,.aec-today{ font-family:inherit; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:8px; height:38px; padding:0 12px; font-size:15px; line-height:1; }
.aec-arrow{ width:38px; padding:0; font-size:20px; }
.aec-today{ font-weight:600; }
.aec-arrow:hover,.aec-today:hover{ border-color:var(--bronze); color:var(--bronze); }
.aec-title{ font-size:20px; font-weight:700; color:var(--obsidian); margin-left:6px; }

.aec-view-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.aec-view-btn{ font-family:inherit; cursor:pointer; border:0; background:var(--card); color:var(--muted);
  padding:0 16px; height:38px; font-size:14px; font-weight:600; letter-spacing:.02em; }
.aec-view-btn+.aec-view-btn{ border-left:1px solid var(--line); }
.aec-view-btn.active{ background:var(--obsidian); color:#fff; }

/* FullCalendar theming */
.aec-app .fc{ --fc-border-color:var(--line); --fc-page-bg-color:var(--card);
  --fc-today-bg-color:#fbf6ec; --fc-neutral-bg-color:var(--soft);
  --fc-list-event-hover-bg-color:var(--soft); --fc-event-border-color:transparent; }
.aec-app .fc a{ color:inherit; text-decoration:none; }
.aec-app .fc .fc-col-header-cell-cushion{ padding:8px 4px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.aec-app .fc-daygrid-day-number{ font-size:13px; color:var(--muted); padding:6px; }
.aec-app .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{ color:var(--bronze); font-weight:700; }

/* events */
.aec-app .fc-event{ cursor:pointer; border-radius:6px; padding:1px 2px; font-weight:600; }
.aec-app .fc-daygrid-event{ padding:2px 6px; }
.aec-app .fc-event-title{ font-weight:600; }
.aec-app .aec-has-incl{ box-shadow:inset 3px 0 0 var(--bronze); }
/* month view: stack time (row 1) over a full-width title (row 2) — no narrow-column wrap */
.aec-app .fc-daygrid-event{ white-space:normal; }
.aec-app .fc-daygrid-block-event .fc-event-main-frame{ display:block; }   /* was flex row */
.aec-app .fc-daygrid-block-event .fc-event-time{ display:block; white-space:normal; overflow:visible;
  font-size:11px; font-weight:700; opacity:.92; margin:0 0 1px; }
.aec-app .fc-daygrid-block-event .fc-event-title-container{ display:block; }
.aec-app .fc-daygrid-block-event .fc-event-title,
.aec-app .fc-daygrid-event .fc-event-title{ display:block; white-space:normal; overflow:visible; line-height:1.2; font-size:12px; }
.aec-app .fc-daygrid-block-event{ padding:3px 6px; }
/* week view: concurrent events overlap full-width (later on top) instead of splitting to half columns */
.aec-app .fc-timegrid-event-harness{ inset-inline:0 !important; left:0 !important; right:0 !important; }
.aec-app .fc-timegrid-event{ box-shadow:0 0 0 1px rgba(255,255,255,.5); }  /* subtle edge so stacked blocks read apart */

/* list view */
.aec-app .fc-list{ border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.aec-app .fc-list-day-cushion{ background:var(--soft) !important; }
.aec-app .fc-list-event td{ padding:14px 12px; }
.aec-app .fc-list-event-title a{ font-weight:700; color:var(--obsidian); }
.aec-app .fc-list-event-time{ color:var(--muted); }

.aec-incl-pill{ display:inline-block; margin-left:10px; background:var(--bronze); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:999px; vertical-align:middle; }

/* filter bar (interactive, replaces the old legend) */
.aec-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 2px 16px; }
.aec-fchip{ font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:999px; padding:6px 13px; font-size:13px; font-weight:600; line-height:1; transition:all .12s ease; }
.aec-fchip .aec-fdot{ width:10px; height:10px; border-radius:50%; background:var(--c); display:inline-block; }
.aec-fchip:hover{ border-color:var(--c); }
.aec-fchip.active{ background:var(--c); border-color:var(--c); color:#fff; }
.aec-fchip.active .aec-fdot{ background:#fff; }
.aec-incl-note{ display:inline-flex; align-items:center; gap:7px; margin-left:auto; font-size:12px; color:var(--muted); }
@media(max-width:600px){ .aec-incl-note{ margin-left:0; width:100%; } }

/* modal */
/* The modal renders OUTSIDE .aec-app (shared via wp_footer), so it must carry the palette
   variables itself — otherwise var(--card)/var(--ink)/etc. are undefined (transparent bg). */
.aec-modal{ --obsidian:#1A1B1A; --cream:#E5DEDB; --bronze:#C69846; --ink:#242220; --muted:#6c675f; --line:#e4ded2; --card:#ffffff; --soft:#f7f4ee;
  position:fixed; inset:0; z-index:1000000; display:flex; align-items:flex-start; justify-content:center; padding:210px 20px 24px; }
/* modal headings: match the calendar's system-sans (Divi's heading webfont can fall back to serif) */
.aec-modal .aec-m-title{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.aec-modal-backdrop{ position:absolute; inset:0; background:rgba(20,20,18,.66); }
.aec-modal-card{ position:relative; background:var(--card); border-radius:16px; max-width:520px; width:100%;
  max-height:90vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.4); }
/* Desktop: top-align the modal JUST BELOW the site header (~200px) so a tall event grows
   DOWNWARD with internal scroll instead of pushing its top — and the close button — up behind
   the fixed Divi header (which sits above the modal in its own stacking context, so raising
   z-index alone can't fix it — the card must start below the header). +36px for the WP admin bar.
   (Placed AFTER the base .aec-modal-card rule so these max-heights win on source order.) */
@media(min-width:601px){
  .aec-modal-card{ max-height:calc(100vh - 240px); }
  body.admin-bar .aec-modal{ padding-top:246px; }
  body.admin-bar .aec-modal-card{ max-height:calc(100vh - 276px); }
}
.aec-modal-close{ position:absolute; top:10px; right:12px; z-index:2; background:rgba(0,0,0,.5); color:#fff; border:0;
  width:34px; height:34px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; }
.aec-m-img img{ width:100%; display:block; aspect-ratio:16/9; height:auto; object-fit:cover; }
.aec-modal-body{ padding:0 0 22px; overflow-y:auto; min-height:0; }
.aec-m-badges{ display:flex; gap:8px; flex-wrap:wrap; padding:16px 22px 0; }
.aec-cat-badge{ color:#fff; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.aec-incl-badge{ background:var(--obsidian); color:var(--bronze); font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:999px; }
.aec-m-title{ font-size:26px; font-weight:800; color:var(--obsidian); margin:12px 22px 4px; line-height:1.15; }
.aec-m-when{ margin:0 22px; color:var(--bronze); font-weight:700; font-size:15px; }
.aec-m-loc{ margin:8px 22px 0; color:var(--muted); font-size:14px; }
.aec-m-desc{ margin:14px 22px 0; color:var(--ink); font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.aec-m-desc p{ margin:0 0 .7em; }
.aec-m-desc p:last-child{ margin-bottom:0; }
.aec-m-desc a{ color:var(--bronze); text-decoration:underline; overflow-wrap:anywhere; }
.aec-m-incl{ font-weight:700; font-size:14px; color:var(--ink); margin:18px 22px 0; line-height:1.35; }
.aec-register{ display:block; margin:10px 22px 0; text-align:center; background:var(--bronze); color:#fff !important;
  font-weight:700; padding:14px; border-radius:8px; font-size:16px; }
.aec-register:hover{ filter:brightness(1.06); }

/* add to calendar */
.aec-atc{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 22px 4px; }
.aec-atc-label{ flex:0 0 100%; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 8px; }
.aec-atc-btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--soft);
  color:var(--ink) !important; border-radius:8px; padding:8px 13px; font-size:13px; font-weight:600; }
.aec-atc-btn:hover{ border-color:var(--bronze); color:var(--bronze) !important; }

/* Summary (card list) view */
.aec-nav{ display:inline-flex; gap:8px; }
.aec-summary{ display:flex; flex-direction:column; gap:10px; }
.aec-card{ display:flex; gap:16px; padding:14px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; cursor:pointer; transition:box-shadow .14s ease,border-color .14s ease,transform .14s ease; }
.aec-card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.08); border-color:var(--bronze); transform:translateY(-1px); }
.aec-card-thumb{ position:relative; flex:0 0 210px; width:210px; align-self:stretch; min-height:150px; border-radius:9px; overflow:hidden; background:var(--soft); }
.aec-card-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.aec-card-thumb-empty{ display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--c) 16%, #fff); }
.aec-card-thumb-empty span{ font-size:40px; font-weight:800; color:var(--c); font-family:Georgia,serif; }
.aec-card-body{ flex:1 1 auto; min-width:0; }
/* top row: date on the left, category badges on the right, top-aligned. Flex (not float)
   so a 2nd/3rd badge stacks on the right WITHOUT pushing the date down or leaving a gap. */
.aec-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:5px; }
.aec-card-cats{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; flex:0 0 auto; max-width:58%; }
.aec-cat-chip{ color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.aec-card-when{ flex:1 1 auto; min-width:0; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
/* keep the date and the time each on one line -> wraps cleanly to 2 lines max, never mid-date */
.aec-when-d, .aec-when-t{ white-space:nowrap; }
.aec-card-title{ margin:0 0 5px; font-size:19px; font-weight:800; color:var(--obsidian); line-height:1.2; }
.aec-card-desc{ clear:right; margin:0; font-size:14px; line-height:1.5; color:var(--muted);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.aec-card-incl{ clear:right; font-weight:700; font-size:12.5px; color:var(--ink); margin-top:8px; line-height:1.3; }
.aec-card-reg{ clear:right; display:block; color:var(--bronze); font-weight:700; font-size:14px; margin-top:8px; }
.aec-star{ color:var(--bronze); }
.aec-empty{ padding:44px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }

/* Loading skeleton (shown while the events feed loads — avoids a blank white flash) */
.aec-app{ min-height:60vh; }
.aec-loading{ display:grid; gap:14px; }
.aec-skel-card{ display:flex; gap:14px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.aec-skel-thumb{ flex:0 0 160px; height:90px; border-radius:8px; }
.aec-skel-lines{ flex:1; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.aec-skel-lines span{ height:12px; border-radius:6px; }
.aec-skel-lines span:nth-child(1){ width:38%; } .aec-skel-lines span:nth-child(2){ width:82%; } .aec-skel-lines span:nth-child(3){ width:58%; }
.aec-skel-thumb, .aec-skel-lines span{ background:linear-gradient(90deg,#ececec 25%,#f6f6f6 37%,#ececec 63%); background-size:400% 100%; animation:aec-shim 1.3s ease-in-out infinite; }
@keyframes aec-shim{ 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
@media (prefers-reduced-motion: reduce){ .aec-skel-thumb,.aec-skel-lines span{ animation:none; } }
@media (max-width:600px){ .aec-skel-thumb{ flex-basis:96px; height:64px; } }

/* List "Load more" */
.aec-loadmore-wrap{ display:flex; justify-content:center; margin:22px 0 6px; }
.aec-loadmore{ appearance:none; cursor:pointer; border:1px solid var(--bronze); background:transparent;
  color:var(--bronze); font-weight:700; font-size:15px; letter-spacing:.02em; padding:13px 30px; border-radius:8px; }
.aec-loadmore:hover{ background:var(--bronze); color:#fff; }
.aec-loadmore-count{ font-weight:600; opacity:.8; margin-left:4px; }

@media(max-width:600px){
  .aec-toolbar{ gap:8px; }
  .aec-title{ margin:0; }
  .aec-view-toggle,.aec-nav{ display:none; }        /* mobile = list view only */
  .aec-card{ gap:12px; padding:10px; }
  .aec-card{ overflow:hidden; }                                        /* guard: never let a long line cause page h-scroll */
  .aec-card-thumb{ flex-basis:112px; width:112px; min-height:112px; }   /* wider -> better image crop; balanced against the one-line included text below */
  .aec-card-title{ font-size:16px; }
  .aec-card-desc{ -webkit-line-clamp:2; font-size:13px; }
  /* mobile: stack the header so the date always gets its own full-width line (no collision
     with the badges, no gap). Badges sit on their own row above the date. */
  .aec-card-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .aec-card-cats{ order:-1; max-width:100%; justify-content:flex-start; }
  .aec-card-when{ width:100%; }                     /* narrower -> date/time gets room */
  .aec-cat-chip{ font-size:9.5px; padding:2px 7px; letter-spacing:.03em; }
  /* shrink chips programmatically when multiple would otherwise wrap */
  .aec-card-cats[data-count="2"] .aec-cat-chip{ font-size:9px; padding:2px 6px; letter-spacing:.02em; }
  .aec-card-cats[data-count="3"] .aec-cat-chip,
  .aec-card-cats[data-count="4"] .aec-cat-chip{ font-size:8px; padding:2px 5px; letter-spacing:.01em; }
  .aec-fchip{ font-size:12px; padding:5px 11px; }
  /* smaller date/time so each unit fits its (badge-narrowed) column */
  .aec-card-when{ font-size:11px; letter-spacing:.02em; }
  /* shrink the included-badge text so it fits on one line on mobile */
  .aec-card-incl{ font-size:9px; letter-spacing:-.1px; white-space:nowrap; }
  /* push the modal below the site's fixed announcement bar so the X is tappable */
  .aec-modal{ align-items:flex-start; padding-top:150px; padding-bottom:24px; }
  .aec-modal-card{ max-height:calc(100vh - 180px); }
}

/* =====================================================================
   Featured Events banner  ([apotheon_featured])
   A distinct, full-bleed dark band with Apotheon's display type. Structurally
   our own; aesthetic (Druk/Teko display, bronze-on-obsidian) tuned to match the
   site so it reads as one system with the hero + calendar below it.
   NOTE: not scoped under .aec-app (it's its own section).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600&family=Oswald:wght@600;700&display=swap');
@font-face{ font-family:'DrukBoldAEC'; font-display:swap;
  src:url('https://apotheonrange.com/wp-content/uploads/et-fonts/DrukText-Bold-Trial.otf') format('opentype'); }

.aec-featured-wrap{
  --f-bg:#14130f; --f-card:#1c1a14; --f-cream:#e3ddcf; --f-bronze:#b58a4d; --f-line:rgba(197,152,70,.26);
  --f-display:'DrukBoldAEC','Oswald','Arial Narrow',Impact,sans-serif;
  --f-teko:'Teko','Oswald',-apple-system,Helvetica,Arial,sans-serif;
  position:relative; left:50%; width:100vw; margin-left:-50vw; margin-bottom:34px;
  background:var(--f-bg); color:var(--f-cream); overflow:hidden;
}
.aec-featured-wrap *{ box-sizing:border-box; }
.aec-featured-wrap::before{  /* faint bronze wash top-left, matches hero mood */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%, rgba(181,138,77,.10), transparent 60%);
}
.aec-featured-inner{ position:relative; max-width:1240px; margin:0 auto; padding:54px 24px 58px; }

/* header */
.aec-featured-head{ position:relative; margin-bottom:28px; }
.aec-featured-eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 8px;
  font-family:var(--f-teko); text-transform:uppercase; letter-spacing:.24em; font-weight:600;
  color:var(--f-bronze); font-size:clamp(13px,1.4vw,17px); line-height:1; }
.aec-featured-num{ font-family:var(--f-teko); font-size:1.05em; letter-spacing:.08em;
  padding-right:12px; border-right:1px solid var(--f-line); opacity:.85; }
.aec-featured-title{ margin:0; font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  color:var(--f-cream); font-size:clamp(32px,5vw,60px); line-height:.94; letter-spacing:.01em; }
.aec-featured-sub{ margin:14px 0 0; max-width:56ch; color:rgba(227,221,207,.68);
  font-size:15px; line-height:1.55; }
.aec-featured-all{ position:absolute; right:0; bottom:2px; font-family:var(--f-teko);
  text-transform:uppercase; letter-spacing:.16em; font-weight:600; font-size:15px; color:var(--f-bronze);
  text-decoration:none; border:1px solid var(--f-line); border-radius:8px; padding:9px 16px; transition:.2s; }
.aec-featured-all:hover{ border-color:var(--f-bronze); background:rgba(181,138,77,.1); }

/* strip: desktop responsive grid */
.aec-featured-strip{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.aec-featured-strip[data-count="1"]{ grid-template-columns:minmax(290px,560px); }
.aec-featured-strip[data-count="2"]{ grid-template-columns:repeat(2,minmax(290px,1fr)); }

/* card */
.aec-feat-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--f-card); border:1px solid var(--f-line); border-radius:14px; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.aec-feat-card:hover{ transform:translateY(-4px); border-color:var(--f-bronze);
  box-shadow:0 20px 44px rgba(0,0,0,.45); }
.aec-feat-media{ position:relative; aspect-ratio:16/10; background:#000; overflow:hidden; }
.aec-feat-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.aec-feat-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,11,8,.6), transparent 45%); }
.aec-feat-date{ position:absolute; left:14px; bottom:14px; z-index:1;
  font-family:var(--f-teko); font-weight:600; letter-spacing:.12em; font-size:15px; color:var(--f-cream);
  background:rgba(12,11,8,.6); border:1px solid var(--f-line); border-radius:6px; padding:4px 10px 2px;
  backdrop-filter:blur(3px); }
.aec-feat-body{ display:flex; flex-direction:column; gap:11px; flex:1; padding:18px 20px 20px; }
.aec-feat-cats{ display:flex; flex-wrap:wrap; gap:6px; }
.aec-featured-wrap .aec-cat-chip{ display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; color:#fff; line-height:1.5; white-space:nowrap; }
.aec-feat-title{ margin:0; font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  color:var(--f-cream); font-size:21px; line-height:1.06; letter-spacing:.01em; }
.aec-feat-desc{ margin:0; color:rgba(227,221,207,.62); font-size:13.5px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.aec-feat-link{ margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-teko); text-transform:uppercase; letter-spacing:.16em; font-weight:600;
  font-size:14px; color:var(--f-bronze); }
.aec-feat-card:hover .aec-feat-link{ gap:11px; }

/* loading skeleton */
.aec-feat-skel{ pointer-events:none; }
.aec-feat-skel .aec-feat-media{ background:linear-gradient(90deg,#211f18,#2a2820,#211f18); background-size:200% 100%; animation:aec-feat-sh 1.3s linear infinite; }
.aec-feat-sk-line{ height:12px; border-radius:6px; background:#242219; display:block; }
.aec-feat-sk-line:nth-child(1){ width:70%; } .aec-feat-sk-line:nth-child(2){ width:45%; }
@keyframes aec-feat-sh{ from{background-position:200% 0;} to{background-position:-200% 0;} }

/* mobile: swipeable horizontal scroll-snap (no JS carousel needed) */
@media(max-width:720px){
  .aec-featured-inner{ padding:38px 0 42px; }
  .aec-featured-head{ padding:0 18px; margin-bottom:20px; }
  .aec-featured-all{ position:static; display:inline-block; margin-top:14px; }
  .aec-featured-strip,
  .aec-featured-strip[data-count="1"],
  .aec-featured-strip[data-count="2"]{
    display:flex; grid-template-columns:none; overflow-x:auto; gap:14px;
    padding:0 18px 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .aec-featured-strip::-webkit-scrollbar{ height:0; }
  .aec-feat-card{ flex:0 0 84%; scroll-snap-align:start; }
}
@media(prefers-reduced-motion:reduce){
  .aec-feat-card,.aec-feat-card:hover{ transition:none; transform:none; }
  .aec-feat-skel .aec-feat-media{ animation:none; }
}