/* ===== Custom Insights (maps to Astra variables) ===== */
:root{
    --ci-brand: var(--ast-global-color-0);
    --ci-text: inherit;
    --ci-border: color-mix(in oklab, var(--ci-brand) 70%, white);
    --ci-card-radius: 4px;
    --ci-shadow: 0 1px 0 rgba(0,0,0,.06);

    --ci-card-height: 280px;       /* tweak to taste */
    --ci-title-lines: 2;
    --ci-excerpt-lines: 3;

    --insight-offset-desktop: 96px;  /* e.g., 80px header + a little breathing room */
    --insight-offset-mobile: 72px;

    --ci-tag-height: 36px;

        /* tweak freely without PHP changes */
    --ci-handbook-media-height: 180px;   /* desktop image area height */
    --ci-handbook-media-height-sm: 160px;/* mobile image area height */
    --ci-handbook-title-pad: 12px 14px;  /* padding inside bottom bar */
}


/* Set all card text to true black and remove underlines */
.ci-insights, .ci-insights a { color: #000; text-decoration: none !important; }
.ci-card__link { text-decoration: none !important; }

/* Switcher */
.ci-switcher{
    display: flex;
    justify-content: center;
    border-radius: 9999px;
    //background: color-mix(in oklab, var(--ci-brand) 10%, white);
    padding: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3) inset, 0 1px 2px rgba(0,0,0,.1);
    margin: 8px auto 18px;
    /* new: shrink-wrap + no inner gap */
    width:max-content;              /* shrink to content */
    max-width:100%;                 /* safety on tiny screens */
    gap:0;                          /* buttons touch each other */
}

.ci-switcher .ci-switch,
.ci-switcher .ci-switch:hover,
.ci-switcher .ci-switch:focus{
  text-decoration: none !important;
}


.ci-switcher .ci-switch,
.ci-switcher .ci-switch:visited{
    text-decoration:none !important;
    min-width:160px; padding:12px 18px;
    font-weight:600; transition: background-color .18s, color .18s, box-shadow .18s;
    border:1px solid var(--ci-brand);
    background:#fff; color:var(--ci-brand);
    border-radius:0;                 /* sharp interior corners */
    box-shadow: 0 1px 2px rgba(0,0,0,.06);  /* "popped up" */
}

.ci-switcher .ci-switch:first-child{ border-radius:9999px 0 0 9999px; }
.ci-switcher .ci-switch:last-child{  border-radius:0 9999px 9999px 0; }
.ci-switcher .ci-switch + .ci-switch{ margin-left:-1px; } /* collapse seam */


.ci-switcher .ci-switch.active,
.ci-switcher .ci-switch.active:visited{
    background:var(--ci-brand); color:#fff;
  /* "pressed in" */
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.24),
    inset 0 -10px 18px rgba(0,0,0,.20),
    0 0 0 1px var(--ci-brand);
}
.ci-switcher .ci-switch:not(.active):hover{ filter: brightness(0.98); }
.ci-switcher .ci-switch:focus-visible{ outline:2px solid color-mix(in oklab, var(--ci-brand) 60%, white); outline-offset:2px; }


/* Remove dotted focus outlines */
.ci-switcher .ci-switch:focus,
.ci-switcher .ci-switch:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
.ci-switcher .ci-switch::-moz-focus-inner{ border:0; } /* Firefox tweak */



/* Filters (details/summary) */
.ci-filters{
    border: 1px solid var(--ast-border-color, #e3e3e3);
    border-radius: 6px;
    background: #fff;
    margin: 0 0 20px;
    box-shadow: var(--ci-shadow);
    overflow: hidden;
}
.ci-filters > summary{
    display:flex; align-items:center; justify-content:space-between;
    cursor: pointer;
    list-style: none;
    padding: 10px 14px;
    background: color-mix(in oklab, var(--ci-brand) 15%, #777 0%);
    color: #fff;
    font-weight: 600;
}
.ci-filters > summary::-webkit-details-marker{ display:none; }
.ci-filters[open] > summary .caret{ transform: rotate(180deg); }
.ci-filters .caret{
    width: 12px; height: 12px;
    border-right: 2px solid rgba(255,255,255,.9);
    border-bottom: 2px solid rgba(255,255,255,.9);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.ci-filters form{ padding: 14px; }
.ci-filters-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.ci-field .ci-label{
    display:block; font-size:12px; opacity:.85; margin-bottom: 4px;
}
.ci-field input[type="text"],
.ci-field select{
    width:100%; padding:10px 12px; border:1px solid var(--ast-border-color, #e3e3e3);
    border-radius:6px; background:#fff; color:inherit;
}

.ci-filter-actions{
    display:flex; gap:10px; margin-top: 12px;
}
.ci-btn{
    padding: 8px 14px; border-radius: 6px; border: 1px solid var(--ci-brand);
    background: var(--ci-brand); color:#fff; text-decoration:none; display:inline-flex; align-items:center;
}
.ci-btn--ghost{
    background: transparent; color: var(--ci-brand);
}

/* Grid */
.ci-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}
@media (max-width: 1024px){
    .ci-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
    .ci-grid{ grid-template-columns: 1fr; }
}

/* Card */
.ci-card{
    position: relative;
    height: var(--ci-card-height);
    display: flex;
    border:1px solid var(--ci-border);
    border-radius: var(--ci-card-radius);
    background:#fff;
    box-shadow: var(--ci-shadow);
    overflow:hidden;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ci-card:hover{ transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.ci-card__link{ 
    display:block; 
    padding-bottom: calc(14px + var(--ci-tag-height)); /* keep your side/top paddings */ 
    color: inherit; 
    text-decoration: none; }

.ci-card__date{ font-size:12px; font-weight:700; margin-bottom: 8px; }
.ci-card__title{ font-size:20px; line-height:1.35; margin:0 0 8px; font-family: var(--font-serif, inherit); }
.ci-card__excerpt{ font-size:14px; line-height:1.6; color: var(--ast-global-color-2, inherit); margin-bottom: 36px; }

/* Tag bar at bottom */
.ci-card__tag{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0;                      /* kill the negative margins */
    background: var(--ci-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-top: 1px solid color-mix(in oklab, var(--ci-brand) 80%, black);
    /* optional: ensure text doesn’t wrap beyond one line */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

}

.ci-card__link{
  display: flex;
  flex-direction: column;
  padding: 14px;
  height: 100%;
}

/* Date */
.ci-card__date{ font-size:12px; font-weight:700; margin-bottom:8px; color:#000; }

/* Title: slightly bigger + use EB Garamond */
.ci-card__title{
  font-family: "EB Garamond", var(--font-serif, serif);
  font-size: 22px;               /* was 20px */
  line-height: 1.3;
  margin: 0 0 8px;
  display: -webkit-box;          /* clamp */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ci-title-lines);
  overflow: hidden;
}

/* Excerpt: clamp so heights stay equal */
.ci-card__excerpt{
  font-size: 14px;
  line-height: 1.6;
  color: #000;                   /* was a gray */
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ci-excerpt-lines);
  overflow: hidden;
}

/* Keep tag bar stuck to bottom */
.ci-card__tag{ margin-top: auto; }

/* Empty state */
.ci-empty{ opacity: .7; }

/* Pagination */
.ci-pagination .page-numbers{
    display:inline-flex; align-items:center; justify-content:center;
    padding: 6px 10px; margin: 0 4px; border:1px solid var(--ast-border-color,#e3e3e3);
    border-radius: 4px; text-decoration:none; color: inherit;
}
.ci-pagination .page-numbers.current{
    background: var(--ci-brand); color:#fff; border-color: var(--ci-brand);
}

/* Pagination cleanup */
.ci-pagination{ margin-top: 18px; text-align: center; }
.ci-pagination ul.page-numbers{
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important; /* in case the “border” was a bg edge */

    list-style: none;              /* remove bullets */
    display: inline-flex;          /* shrink to content + center via parent */
    gap: 8px;
    padding: 0;
    margin: 0;
}
.ci-pagination li{ list-style: none; margin: 0; padding: 0; }
.ci-pagination a.page-numbers,
.ci-pagination span.page-numbers{
    text-decoration: none;         /* no underline */
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 34px; height: 34px;
    padding: 0 10px;
    border: 1px solid var(--ast-border-color, #e3e3e3);
    border-radius: 6px;
    color: inherit;
    background: #fff;
}
.ci-pagination .page-numbers.current{
    background: var(--ast-global-color-0);
    color: #fff;
    border-color: var(--ast-global-color-0);
}

/* (Optional) some themes add borders on the container too */
.ci-pagination{ border: 0 !important; }
.ci-pagination .nav-links{ border: 0 !important; } /* if present */

/* (Optional) nuke decorative pseudo-lines if a theme adds them */
.ci-pagination ul.page-numbers::before,
.ci-pagination ul.page-numbers::after{
    content: none !important;
}


// INSIGHT ARTICLES TOP MARGIN PART //
/* Push the single Insight content below the header */
/* Desktop spacer */
@media (min-width: 769px){
    .single-insight .site-main::before{
        content:"";
        display:block;
        height: var(--insight-offset-desktop);
    }
}

/* Mobile spacer (if you still want it on mobile) */
@media (max-width: 768px){
    .single-insight .site-main::before{
        content:"";
        display:block;
        height: var(--insight-offset-mobile);
    }
}
.ast-transparent-header.single-insight .site-main::before,
.ast-theme-transparent-header.single-insight .site-main::before{
    content:"";
    display:block;
    height: var(--insight-offset-desktop);
}


.ci-grid.ci-loading { opacity:.6; pointer-events:none; filter: grayscale(20%); transition: opacity .2s; }








/* ============ HANDBOOK CARDS ONLY ============ */
/* Single source of truth for handbook sizing (News unaffected) */
:root{
  --ci-hb-media-h: 550px;   /* desktop image height */
  --ci-hb-title-h: 60px;    /* desktop title bar height */
}

/* Breakpoint steps (tweak to taste) */
@media (max-width: 1199.98px){
  :root{ --ci-hb-media-h: 400px; --ci-hb-title-h: 56px; }
}
@media (max-width: 1024.98px){
  :root{ --ci-hb-media-h: 370px; --ci-hb-title-h: 54px; }
}
/* Mobile: you liked desktop sizing stacked 1-per-row */
@media (max-width: 640px){
  :root{ --ci-hb-media-h: 550px; --ci-hb-title-h: 60px; }
}

/* Card container: force height = image + title (beats base .ci-card height) */
.ci-card--handbook{
  height: calc(var(--ci-hb-media-h) + var(--ci-hb-title-h)) !important;
  min-height: 0 !important;
  overflow: hidden;
  /* width: auto;  ← inherit from grid (don’t force widths; News unaffected) */
}

/* Remove base link padding reserved for News and stretch link */
.ci-card__link--handbook{
  padding: 0 !important;
  display: block;
  height: 100%;
  width: 100%;
}

/* Image block: fixed height box; A4 look via cover inside fixed height */
.ci-card--handbook .ci-card__media{
  height: var(--ci-hb-media-h) !important;
  width: 100%;
  background: #f4f4f4;
  border-bottom: 1px solid var(--ci-border);
  overflow: hidden;
}
.ci-card--handbook .ci-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* clean crop inside the fixed-height box */
  display: block;
}

/* Title bar: fixed height so total = media + title */
.ci-card--handbook .ci-card__bar{
  height: var(--ci-hb-title-h) !important;
  padding: 12px 16px;
  background: #fff;
  color: inherit;
  border-top: 1px solid var(--ci-border);
  display: flex;
  align-items: center;
}

/* Title styling */
.ci-card--handbook .ci-card__title--handbook{
  margin: 0;
  font-family: "EB Garamond", var(--font-serif, serif);
  font-size: 20px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ci-title-lines, 2);
  overflow: hidden;
}

/* Hide News-only bits inside handbook */
.ci-card--handbook .ci-card__date,
.ci-card--handbook .ci-card__excerpt,
.ci-card--handbook .ci-card__tag{
  display: none !important;
}



/* Handbooks: keep A4 proportion regardless of grid stretch (News unaffected) */
:root{
  --hb-media-h: 550px;                 /* desktop image height */
  --hb-title-h: 60px;                  /* desktop title bar height */
  --hb-a4-w: calc(var(--hb-media-h) * 210 / 297);  /* A4 width from height */
}

/* breakpoint steps (tweak as needed) */
@media (max-width: 1199.98px){ :root{ --hb-media-h: 400px; --hb-title-h: 56px; --hb-a4-w: calc(var(--hb-media-h) * 210 / 297); } }
@media (max-width: 1024.98px){ :root{ --hb-media-h: 370px; --hb-title-h: 54px; --hb-a4-w: calc(var(--hb-media-h) * 210 / 297); } }
/* you chose desktop sizing on mobile; keep it, or change --hb-media-h to 400px if too tall */
@media (max-width: 640px){ :root{ --hb-media-h: 550px; --hb-title-h: 60px; --hb-a4-w: calc(var(--hb-media-h) * 210 / 297); } }

/* Lock handbook dimensions to A4 width; center so no edge clipping; News untouched */
.ci-card--handbook{
  /* total height = image + title */
  height: calc(var(--hb-media-h) + var(--hb-title-h)) !important;
  min-height: 0 !important;

  /* width cannot exceed A4 width derived from height;
     but can be smaller (e.g., in a narrow column) */
  width: min(100%, var(--hb-a4-w));
  max-width: var(--hb-a4-w);

  margin-inline: auto;          /* center the card within its grid cell */
  overflow: hidden;
}

/* Remove base link padding and stretch inner link */
.ci-card__link--handbook{
  padding: 0 !important;
  display: block; height: 100%; width: 100%;
}

/* Image block: fixed height box; A4 width is enforced by the card’s max-width */
.ci-card--handbook .ci-card__media{
  height: var(--hb-media-h) !important;
  width: 100%;
  background: #f4f4f4;
  border-bottom: 1px solid var(--ci-border);
  overflow: hidden;
}
.ci-card--handbook .ci-card__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Title bar: fixed height so total = media + title */
.ci-card--handbook .ci-card__bar{
  height: var(--hb-title-h) !important;
  padding: 12px 16px;
  background: #fff; color: inherit;
  border-top: 1px solid var(--ci-border);
  display: flex; align-items: center;
}

/* Hide News-only bits inside handbook */
.ci-card--handbook .ci-card__date,
.ci-card--handbook .ci-card__excerpt,
.ci-card--handbook .ci-card__tag{ display: none !important; }