/* ================= Root variables (overridden inline by shortcode) ================= */
.cafs{
  --gap:16px;

  /* layout (filters/results) */
  --cafs-sidebar: 375px;
  --cafs-gap: 50px;

  /* results grid columns */
  --cafs-cols-desktop: 3;   /* ≥1200px */
  --cafs-cols-laptop: 2;    /* 900–1199px */
  --cafs-cols-tablet: 1;    /* 600–899px */
  --cafs-cols-mobile: 1;    /* <600px */

  /* card layout */
  --cafs-card-pad: 36px;
  --cafs-video-media-w: 210px; /* left rail width for VIDEO cards */
}

/* lock typography vs Elementor */
.cafs, .cafs *{ font-family: "Raleway", Sans-serif !important; }

/* ================= Page layout: filters + results ================= */
.cafs:has(.cafs__filters){
  display: grid;
  grid-template-columns: var(--cafs-sidebar) 1fr;
  column-gap: var(--cafs-gap);
  align-items: start;
}

/* ================= Filters ================= */
.cafs__filters{ display:grid; gap:var(--gap); }
.cafs-group{ padding: 32px; background: #0084C8; }
.cafs-group__title{ margin:0 0 10px; font-weight:700 !important; font-size:27px !important; color:#fff !important; }
.cafs-group__options--stack{ display:grid; }

.cafs-row{
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  padding: 16px 0px 16px 12px; border-bottom: 1px solid #fff; cursor: pointer;
}
.cafs-row__label{ font-size:19px; color:#fff; font-weight: 400 !important;}
.cafs-row__ctrl{ display:inline-grid; place-items:center; min-width:28px; min-height:28px; }
.cafs-row input[type="radio"], .cafs-row input[type="checkbox"]{ position:absolute; opacity:0; pointer-events:none; }

.cafs-checkbox{ width:18px; height:18px; border:2px solid #fff; border-radius:4px; }
.cafs-row--checkbox input:checked + .cafs-checkbox{ border-color:#111; box-shadow: inset 0 0 0 6px #111; }

.cafs-radio-dot{ width:18px; height:18px; border:2px solid #fff; border-radius:999px; }
.cafs-row--radio input:checked + .cafs-radio-dot,
.cafs-row--radio-multi input:checked + .cafs-radio-dot{ border-color:#fff; box-shadow: inset 0 0 0 6px #fff; }

.cafs-pill{ padding:6px 10px; border:1px solid #d0d0d0; border-radius:999px; background:#fff; cursor:pointer; }
.cafs-pill.is-active{ border-color:#111; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); }

.cafs__actions{ margin-top:6px; }
.cafs-reset{ padding:32px; padding-top: 0; padding-bottom: 0; background:transparent !important; cursor:pointer; color:#0084C8 !important; font-weight: 700 !important; font-size: 16px !important;}

/* ================= Results grid ================= */
.cafs__results{ margin-top:20px; }
.cafs-list{
  display:grid;
  gap:20px;
  grid-template-columns: repeat(var(--cafs-cols-desktop), 1fr);
  align-items: stretch; /* NEW: ensure equal card heights per row for aligned buttons */
}
@media (max-width:1199.98px){
  .cafs-list{ grid-template-columns: repeat(var(--cafs-cols-laptop), 1fr); }
}
@media (max-width:899.98px){
  .cafs-list{ grid-template-columns: repeat(var(--cafs-cols-tablet), 1fr); }
}
@media (max-width:599.98px){
  .cafs-list{ grid-template-columns: repeat(var(--cafs-cols-mobile), 1fr); }
}

/* ================= Card base ================= */
.cafs-card{
  background:#fff;
  overflow:hidden;
  box-shadow: 4px 3px 30px #00000029;
  height: 100%; /* NEW: make each card fill the grid row height */
}
.cafs-card__inner{
  display:grid;
  gap: 24px;
  padding: var(--cafs-card-pad);
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr; /* NEW: second row flexes so actions can sit at bottom */
  height: 100%;
}

/* ---------- FILE layout ---------- */
/* media = only row 1, shrinks to SVG; header row 1 col 2; actions row 2 spans both columns */
.cafs-card--type-file .cafs-card__media{
  grid-column:1; grid-row:1;
  justify-self:start; align-self:start;
  display:inline-block; width:auto; height:auto;
  margin:0; padding:0; background:transparent; overflow:visible; border-radius:0;
}
.cafs-card--type-file .cafs-card__header{  grid-column:2; grid-row:1; }
.cafs-card--type-file .cafs-card__actions{ grid-column:1 / -1; grid-row:2; } /* full-width button row */

/* ---------- VIDEO layout ---------- */
.cafs-card--type-video .cafs-card__media{
  grid-column:1; grid-row:1 / span 2; align-self:stretch;
  width: var(--cafs-video-media-w); max-width: var(--cafs-video-media-w);
  margin: calc(var(--cafs-card-pad) * -1) 0 calc(var(--cafs-card-pad) * -1) calc(var(--cafs-card-pad) * -1);
  overflow:hidden;
}
.cafs-card--type-video .cafs-card__header{  grid-column:2; grid-row:1; }
.cafs-card--type-video .cafs-card__actions{ grid-column:2; grid-row:2; }

/* ---------- Media visuals ---------- */
.cafs-card__media{ overflow:hidden; }
.cafs-media-thumb{ display:block; width:100%; height:100% !important; object-fit:cover; }

/* FILE svg compact, top-left */
.cafs-media-icon{ display:block; height:auto; }
.cafs-media-icon__svg{ display:block; height:40px; width:auto; margin:0; color:#111; }

/* ---------- Content ---------- */
.cafs-card__title{
  margin:0 0 6px;
  font-size:18px !important; line-height:1.25;
  color:#0084C8 !important; font-weight:700 !important;
}
.cafs-card__meta{ color:#606060; font-size:17px !important; }
.cafs-card__terms{ color:#005069; }
.cafs-card__actions{ align-self:end; } /* button sits at the bottom of the card */
.cafs-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: 14px 22px; font-weight: 700;
  border:2px solid #F39200 !important; background: transparent !important; color:#005069 !important; text-decoration:none;
  transition: all .3s ease;
  font-size: 14px;
  text-transform: uppercase;
}
.cafs-btn:hover {
  background: #F39200 !important;
}

/* ================= Pagination ================= */
.cafs-pagination{ display:flex; gap:8px; justify-content:center; margin-top:20px; }
.cafs-page, .cafs-loadmore{  display:inline-flex; align-items:center; gap:.5rem;
  padding: 14px 22px; font-weight: 700;
  border:2px solid #F39200 !important; background: transparent !important; color:#005069 !important; text-decoration:none;
  transition: all .3s ease;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
}
  .cafs-page, .cafs-loadmore:hover {
     background: #F39200 !important;
  }
.cafs-page.is-active{ background:#111; color:#fff; border-color:#111; }

/* ================= Responsive overrides (add after your base CSS) ================= */

/* ====== Large desktop (≥1400px) — keep your base look, tiny refinements if wanted ====== */
@media (min-width:1400px){
  /* optional breathing room; comment out if you prefer exact base values */
  /* .cafs{ --cafs-card-pad: 40px; --cafs-video-media-w: 220px; } */
}

/* ====== Desktop (1200–1399px) ====== */
@media (max-width:1399.98px) and (min-width:1200px){
  .cafs{
    --cafs-sidebar: 350px;
    --cafs-gap: 46px;
    --cafs-card-pad: 34px;
    --cafs-video-media-w: 200px;
  }
  
  .cafs-group{ padding: 30px; }
  .cafs-reset{ padding: 30px; padding-top: 0; padding-bottom: 0;}
  .cafs-group__title{ font-size:25px !important; }
  .cafs-row{ padding: 14px 0 14px 12px; }
  .cafs-row__label{ font-size:18px; }
  .cafs-card__title{ font-size:17px !important; }
  .cafs-card__meta{ font-size:16px !important; }
  .cafs-btn{ padding: 13px 20px; font-size: 13.5px; }
  .elementor-134 .elementor-element.elementor-element-78f721a {
    width:55% !important;
  }
}

/* ====== Laptop (992–1199px) ====== */
@media (max-width:1199.98px) and (min-width:992px){
  .cafs{
    --cafs-sidebar: 320px;
    --cafs-gap: 42px;
    --cafs-card-pad: 30px;
    --cafs-video-media-w: 190px;
  }
  .cafs-group{ padding: 28px; }
  .cafs-reset{ padding: 28px; padding-top: 0; padding-bottom: 0;}
  .cafs-group__title{ font-size:24px !important; }
  .cafs-row{ padding: 12px 0 12px 10px; }
  .cafs-row__label{ font-size:17px; }

  .cafs-list{ gap:18px; }

  .cafs-card__inner{ gap:20px; }
  .cafs-card__title{ font-size:16.5px !important; }
  .cafs-card__meta{ font-size:15px !important; }

  .cafs-btn{ padding: 12px 18px; font-size: 13px; }
  .elementor-134 .elementor-element.elementor-element-78f721a {
    width:70% !important;
  }
}

/* ====== Tablet (768–991px) ====== */
@media (max-width:991.98px) and (min-width:768px){
  /* Stack filters above results for comfort */
  .cafs:has(.cafs__filters){
    grid-template-columns: 1fr;
    row-gap: 28px; /* keep spacing between filters/results */
    column-gap: 0;
  }
  .cafs{
    --cafs-card-pad: 26px;
    --cafs-video-media-w: 180px;
  }

  .cafs-group{ padding: 24px; }
  .cafs-reset{ padding: 24px; padding-top: 0; padding-bottom: 0;}
  .cafs-group__title{ font-size:22px !important; }
  .cafs-row{ padding: 12px 0 12px 10px; }
  .cafs-row__label{ font-size:16px; }

  .cafs-list{ gap:18px; }

  .cafs-card__inner{ gap:18px; }
  .cafs-card__title{ font-size:16px !important; }
  .cafs-card__meta{ font-size:14.5px !important; }

  .cafs-btn{ padding: 12px 18px; font-size: 12.5px; }
}

/* ====== Small tablet / phablet (600–767px) ====== */
@media (max-width:767.98px) and (min-width:600px){
  .cafs{
    --cafs-card-pad: 22px;
    --cafs-video-media-w: 172px;
    --cafs-sidebar: 100% !important;
  }

  .cafs-group{ padding: 22px; }
  .cafs-reset{ padding: 22px; padding-top: 0; padding-bottom: 0;}
  .cafs-group__title{ font-size:20px !important; }
  .cafs-row{ padding: 11px 0 11px 10px; }
  .cafs-row__label{ font-size:15.5px; }

  .cafs-list{ gap:16px; }

  .cafs-card__inner{ gap:16px; }
  .cafs-card__title{ font-size:15.5px !important; }
  .cafs-card__meta{ font-size:14px !important; }

  .cafs-btn{ padding: 11px 16px; font-size: 12px; }
}

/* ====== Phones (<600px) ====== */
@media (max-width:599.98px){
  .cafs{
    --cafs-card-pad: 18px;
    --cafs-video-media-w: 165px;
    --cafs-sidebar: 100% !important;
  }

  .cafs-group{ padding: 20px; }
  .cafs-reset{ padding: 20px; padding-top: 0; padding-bottom: 0;}
  .cafs-group__title{ font-size:19px !important; }
  .cafs-row{ padding: 10px 0 10px 8px; }
  .cafs-row__label{ font-size:15px; }

  .cafs-list{ gap:14px; }

  .cafs-card__inner{ gap:14px; }
  .cafs-card__title{ font-size:15px !important; }
  .cafs-card__meta{ font-size:13.5px !important; }

  .cafs-btn{ padding: 10px 14px; font-size: 11.5px; }
}

/* ====== Very small phones (≤360px) — optional safety ====== */
@media (max-width:360px){
  .cafs{
    --cafs-card-pad: 16px;
    --cafs-video-media-w: 150px;
    --cafs-sidebar: 100% !important;
  }
  .cafs-btn{ padding: 9px 12px; font-size: 11px; }
}

.cafs-card__meta{
  display: block;            /* no flex/line-clamp tricks */
  overflow: visible;
  white-space: normal;       /* allow wrapping */
  word-break: keep-all;      /* don't split words (for Latin scripts) */
  overflow-wrap: break-word; /* wrap long tokens if absolutely needed */
  hyphens: auto;             /* optional: nicer hyphenation where supported */
}

/* Keep (optional) title clamp if you like; or remove this to allow full wrapping */
.cafs-card__title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Case Studies Template */
/* ============================
   Case Studies pack (cslist)
   Base layout + typography
   ============================ */

/* Shared font */
.cslist { --cs-font: "Raleway", Sans-serif; }
.cslist, .cslist * { font-family: var(--cs-font); }

/* List wrapper (items grid) */
.cslist__list {
  display: grid;
  gap: 28px; /* spacing between rows (items) */
}

/* Card */
.cslist__item {
  --cslist-pad: 42px; /* card padding; also used by bleed */
  background: #fff;
  box-shadow: 4px 3px 30px #00000029;
  padding: var(--cslist-pad);
  overflow: hidden; /* needed for flush image corners */
}

/* 3-column internal grid (base) */
.cslist__grid {
  display: grid;
  grid-template-columns: minmax(304px, 2fr) 3fr 2fr;  /* media | content | partner */
  gap: 30px;
  align-items: center;
}

/* Columns */
.cslist__col { min-width: 0; } /* prevent overflow */
.cslist__col--media { align-self: stretch; display: flex; align-items: center; }
.cslist__col--content { align-self: center; }
.cslist__col--partner { align-self: center; justify-self: end; }

/* Left image: bleed to edges (no padding on that side) */
.cslist__col--media {
  margin-left: calc(-1 * var(--cslist-pad));
  margin-top: calc(-1 * var(--cslist-pad));
  margin-bottom: calc(-1 * var(--cslist-pad));
}
.cslist__img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 304px;
  min-height: 228px;
  object-fit: cover;
  border-radius: 0;
}
.cslist__img--placeholder {
  width: 100%;
  height: 100%;
  min-width: 304px;
  min-height: 228px;
  background: #F3F5F7;
  border-radius: 0;
}

/* Middle content */
.cslist__title {
  margin: 0 0 8px 0;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0084C8 !important;
}
.cslist__subtitle {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #005069 !important;
  font-weight: 400;
}
.cslist__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin: 0 0 14px 0;
  font-size: 17px;
  color: #606060;
}
.cslist__date { white-space: nowrap; }
.cslist__in { opacity: .9; }
.cslist__term { color: #F39200; }

/* Button */
.cslist__actions { margin-top: 4px; }
.cslist__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 14px 22px;
  font-weight: 700;
  border: 2px solid #F39200 !important;
  background: transparent !important;
  color: #005069 !important;
  text-decoration: none;
  transition: all .3s ease;
  font-size: 14px;
  text-transform: uppercase;
}
.cslist__btn:hover { background: #F39200 !important; }

/* Right logo */
.cslist__partner-logo {
  display: block;
  max-width: 180px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
}
/* If partner images come raw */
.cslist__col--partner img {
  max-width: 192px;
  max-height: 54px;
  object-fit: cover;
}

/* ============================
   Responsive tiers
   ============================ */

/* ≤1280px: smaller desktops */
@media (max-width: 1280px) {
  .cslist__item { --cslist-pad: 36px; }
  .cslist__grid {
    grid-template-columns: minmax(304px, 1.8fr) 2.6fr 1.6fr;
    gap: 24px;
  }
  /* keep min image size; relax the visual height a touch if needed */
  .cslist__img { /* still min-height: 228px */ }
}

/* ≤1024px: laptops */
@media (max-width: 1024px) {
  .cslist__item { --cslist-pad: 28px; }
  .cslist__grid {
    grid-template-columns: minmax(304px, 1.3fr) 1.7fr 1fr; /* media | content | partner */
    gap: 20px;
  }
  .cslist__col--partner {
    grid-column: auto;
    justify-self: end;
    margin-top: 0;
  }
  .cslist__partner-logo { max-width: 170px; max-height: 72px; }
  .cslist__meta { font-size: 16px; } /* light scale */
}

/* ≤768px: tablets */
@media (max-width: 768px) {
  .cslist__item { --cslist-pad: 22px; }
  .cslist__grid {
    grid-template-columns: minmax(304px, 1fr) 1fr;
    gap: 16px;
  }
  .cslist__partner-logo { max-width: 160px; max-height: 64px; }
  .cslist__subtitle { font-size: 17px; } /* light scale */
  .cslist__meta { font-size: 15.5px; }
  .cslist__btn { padding: 12px 18px; }
}

/* ≤600px: phones */
@media (max-width: 600px) {
  .cslist__item { --cslist-pad: 16px; }
  .cslist__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* keep the hero image spanning full width on phones: bleed left+right too */
  .cslist__col--media {
    margin-left: calc(-1 * var(--cslist-pad));
    margin-right: calc(-1 * var(--cslist-pad));
  }
  .cslist__img,
  .cslist__img--placeholder {
    min-width: 0;          /* allow narrow phones */
    min-height: 228px;     /* keep requested height */
  }
  .cslist__partner-logo { max-width: 160px; max-height: 60px; }
  .cslist__subtitle { font-size: 16px; }
  .cslist__meta { font-size: 15px; }
  .cslist__btn { padding: 11px 16px; font-size: 13.5px; }
}

/* ====== Desktop (1200–1399px) ====== */
@media (max-width:1399.98px) and (min-width:1200px){
  .elementor-786 .elementor-element.elementor-element-f306688 {
    width: 48% !important;
  }
}

@media (max-width:1392px) {
  .cslist__item { --cslist-pad: 20px; }
}

@media (max-width: 768px) {
  .cslist__item { --cslist-pad: 20px; }

  /* single column stack */
  .cslist__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* keep the hero image flush full-width (bleed both sides when stacked) */
  .cslist__col--media {
    margin-left: calc(-1 * var(--cslist-pad));
    margin-right: calc(-1 * var(--cslist-pad));
    margin-top: calc(-1 * var(--cslist-pad));
    margin-bottom: 0; /* content below adds its own spacing */
  }

  /* smaller image bounds at this viewport */
  .cslist__img,
  .cslist__img--placeholder {
    min-width: 0;          /* allow narrow phones/tablets */
    min-height: 200px;     /* down from 228px */
  }

  /* partner logo goes under content, align left by default */
  .cslist__col--partner {
    grid-column: auto;     /* ensure normal flow in single column */
    justify-self: start;
    margin-top: 6px;
  }
  .cslist__partner-logo { max-width: 160px; max-height: 64px; }

  /* keep your text sizes largely intact; only tighten buttons a touch */
  .cslist__btn { padding: 12px 18px; }
  .cslist__meta { font-size: 15.5px; }
  .cslist__subtitle { font-size: 17px; }
}

/* ≤600px: further tighten padding and image height for phones */
@media (max-width: 600px) {
  .cslist__item { --cslist-pad: 16px; }

  .cslist__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cslist__col--media {
    margin-left: calc(-1 * var(--cslist-pad));
    margin-right: calc(-1 * var(--cslist-pad));
    margin-top: calc(-1 * var(--cslist-pad));
    margin-bottom: 0;
  }

  .cslist__img,
  .cslist__img--placeholder {
    min-width: 0;
    min-height: 180px;   /* a bit shorter for phones */
  }

  .cslist__partner-logo { max-width: 150px; max-height: 60px; }
  .cslist__btn { padding: 11px 16px; font-size: 13.5px; }
  .cslist__meta { font-size: 15px; }
  .cslist__subtitle { font-size: 16px; }
}