/* =========================================================
   Calico Impact Grid v1.1.0
   ========================================================= */

:root {
    --cig-teal:     #49b7a3;
    --cig-teal-dk:  #337d6f;
    --cig-yellow:   #fec708;
    --cig-orange:   #ec6639;
    --cig-dark:     #012d2d;
    --cig-cream:    #eeefe1;
    --cig-sand:     #eeefe1;
    --cig-charcoal: #2a2a2a;
    --cig-mid:      #555;
    --cig-light:    #888;
    --cig-white:    #ffffff;
    --cig-radius:   6px;
    --cig-gap:      14px;
    --cig-shadow:   0 2px 12px rgba(0,0,0,.10);
    --cig-shadow-h: 0 6px 24px rgba(0,0,0,.18);
    --cig-font:     inherit;
    --cig-accent:   #49b7a3;
}

/* ----- Section heading (above each grid) ----- */

.cig-section-heading {
    margin: 40px 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #eeefe1;
}

.cig-section-heading:first-child {
    margin-top: 0;
}

.cig-section-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--cig-charcoal);
    line-height: 1.2;
}

.cig-section-sub {
    margin: 0;
    font-size: 14px;
    color: var(--cig-mid);
    line-height: 1.5;
}

/* ----- Grid ----- */

.cig-grid {
    margin: 0 auto;
}

.cig-sizer,
.cig-card {
    width: calc(33.333% - var(--cig-gap));
}

.cig-cols-2 .cig-sizer,
.cig-cols-2 .cig-card { width: calc(50% - var(--cig-gap)); }

.cig-cols-3 .cig-sizer,
.cig-cols-3 .cig-card { width: calc(33.333% - var(--cig-gap)); }

.cig-cols-4 .cig-sizer,
.cig-cols-4 .cig-card { width: calc(25% - var(--cig-gap)); }

/* Wide card spans 2 columns */
.cig-cols-3 .cig-card.cig-size-wide { width: calc(66.666% - var(--cig-gap)); }
.cig-cols-4 .cig-card.cig-size-wide { width: calc(50% - var(--cig-gap)); }
.cig-cols-2 .cig-card.cig-size-wide { width: calc(100% - var(--cig-gap)); }

.cig-card {
    float: left;
    margin-bottom: var(--cig-gap);
    border-radius: var(--cig-radius);
    overflow: hidden;
    box-shadow: var(--cig-shadow);
    background: var(--cig-white);
    font-family: var(--cig-font);
}

/* ----- Inner wrapper (link or div) ----- */

.cig-card-inner {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* ----- Slider ----- */

.cig-grid .cig-slider {
    position: relative !important;
    overflow: hidden !important;
    background: #111 !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
}

.cig-grid .cig-size-tall .cig-slider {
    aspect-ratio: 1 / 1 !important;
}

.cig-grid .cig-size-wide .cig-slider {
    aspect-ratio: 2 / 1 !important;
}

.cig-grid .cig-slider-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: 100% !important;
    /* Width = n * 100% set inline by PHP */
    transition: transform .35s ease !important;
    will-change: transform !important;
}

.cig-grid .cig-slide {
    /* Width = 100/n % set inline by PHP */
    flex-shrink: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.cig-grid .cig-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

.cig-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    color: #fff;
    border: none;
    width: 32px;
    height: 48px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    border-radius: 3px;
    opacity: 1;
    transition: background .2s;
}

.cig-slider-btn:hover { background: rgba(0,0,0,.7); }
.cig-slider-prev { left: 6px; }
.cig-slider-next { right: 6px; }

/* Dot indicators */
.cig-slider-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
}

.cig-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer;
    transition: background .2s, transform .2s;
    display: block;
}

.cig-dot-active {
    background: #fff;
    transform: scale(1.3);
}

/* ----- Media (single image) ----- */

.cig-media {
    position: relative;
    overflow: hidden;
    background: var(--cig-cream);
}

.cig-media img.cig-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Tall card single image */
.cig-size-tall .cig-media:not(.cig-slider) {
    padding-top: 100%;
}

.cig-size-tall .cig-media:not(.cig-slider) img.cig-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video */
.cig-video-wrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

/* YouTube Shorts and other vertical video -- 9:16 portrait */
.cig-video-wrap.cig-video-vertical {
    padding-bottom: 177.78%;
    max-width: 360px;
    margin: 0 auto;
}

.cig-video-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* ----- Caption bar ----- */

.cig-caption-bar {
    padding: 14px 16px 16px;
}

.cig-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cig-accent, var(--cig-teal));
    margin-bottom: 6px;
}

.cig-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cig-charcoal);
}

.cig-description {
    font-size: 13px;
    line-height: 1.6;
    color: var(--cig-mid);
    margin: 0;
}

.cig-description p { margin: 0 0 6px; }
.cig-description p:last-child { margin-bottom: 0; }

/* Hover-reveal description */
.cig-style-magazine .cig-description {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .3s ease;
    opacity: 0;
}

.cig-style-magazine .cig-card:hover .cig-description {
    max-height: 200px;
    opacity: 1;
}

/* Editorial style: description always visible */
.cig-style-editorial .cig-description {
    opacity: 1;
    max-height: none;
}

/* Minimal style: no caption bar, only on hover */
.cig-style-minimal .cig-caption-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
    color: #fff;
    padding: 32px 14px 14px;
    opacity: 0;
    transition: opacity .3s ease;
}

.cig-style-minimal .cig-card {
    position: relative;
}

.cig-style-minimal .cig-card:hover .cig-caption-bar { opacity: 1; }
.cig-style-minimal .cig-label { color: rgba(255,255,255,.8); }
.cig-style-minimal .cig-title { color: #fff; }

/* ----- Text / Quote cards ----- */

.cig-type-text .cig-card-inner {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cig-text-block {
    background: var(--cig-accent, var(--cig-teal));
    min-height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    box-sizing: border-box;
}

.cig-text-quote {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

/* ----- Word Map ----- */

.cig-word-map {
    background: var(--cig-cream);
    padding: 28px 20px;
    min-height: 200px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    box-sizing: border-box;
    width: 100%;
}

.cig-word {
    display: inline-block;
    line-height: 1.2;
    color: var(--cig-accent, var(--cig-teal));
    font-weight: 600;
    transition: color .2s, transform .2s;
    cursor: default;
}

.cig-word:hover { color: var(--cig-dark); transform: scale(1.08); }

.cig-word-size-1 { font-size: 11px; font-weight: 400; opacity: .5; }
.cig-word-size-2 { font-size: 13px; font-weight: 500; opacity: .65; }
.cig-word-size-3 { font-size: 16px; }
.cig-word-size-4 { font-size: 20px; }
.cig-word-size-5 { font-size: 26px; }
.cig-word-size-6 { font-size: 34px; }

/* Text / quote card -- auto-contrast text based on accent */
.cig-text-block {
    background: var(--cig-accent, var(--cig-teal));
    min-height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    box-sizing: border-box;
}

.cig-text-quote {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

/* Yellow accent needs dark text */
.cig-text-block[style*="#fec708"] .cig-text-quote,
.cig-text-block[style*="fec708"] .cig-text-quote { color: #012d2d; }

/* ----- Testimonial card ----- */

.cig-testimonial {
    width: 100%;
    box-sizing: border-box;
    padding: 28px 24px 24px;
    background: var(--cig-white);
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.cig-quote-mark {
    color: var(--cig-accent, var(--cig-teal));
    opacity: .35;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.cig-testimonial-quote {
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    color: var(--cig-charcoal);
    line-height: 1.6;
    margin: 0 0 20px;
    flex-grow: 1;
}

.cig-testimonial-attribution {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cig-testimonial-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cig-testimonial-name-block {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.cig-testimonial-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--cig-charcoal);
}

.cig-testimonial-role {
    font-size: 12px;
    color: var(--cig-mid);
}

/* Standalone word map shortcode */
.cig-word-map-standalone {
    border-radius: var(--cig-radius);
    box-shadow: var(--cig-shadow);
    margin: 24px 0;
}

/* ----- Responsive ----- */

@media ( max-width: 900px ) {
    .cig-cols-4 .cig-sizer,
    .cig-cols-4 .cig-card { width: calc(50% - var(--cig-gap)); }
    .cig-cols-4 .cig-card.cig-size-wide { width: calc(100% - var(--cig-gap)); }

    .cig-cols-3 .cig-sizer,
    .cig-cols-3 .cig-card { width: calc(50% - var(--cig-gap)); }
    .cig-cols-3 .cig-card.cig-size-wide { width: calc(100% - var(--cig-gap)); }
}

@media ( max-width: 560px ) {
    .cig-sizer,
    .cig-card,
    .cig-card.cig-size-wide { width: calc(100% - var(--cig-gap)) !important; }
}

/* ----- Read more button ----- */

.cig-read-more {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--cig-accent, var(--cig-teal));
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    transition: opacity .2s;
}

.cig-read-more:hover { opacity: .85; color: #fff !important; }

/* Yellow accent needs dark text on button */
[style*="--cig-accent:#fec708"] .cig-read-more,
[style*="--cig-accent: #fec708"] .cig-read-more { color: #012d2d !important; }

/* ----- PDF embed ----- */

.cig-pdf-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #f4f2ee;
    overflow: hidden;
}

.cig-pdf-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none; /* prevents the browser's PDF viewer from capturing scroll/click */
}

/* Transparent layer on top of the iframe. Blocks all interaction with the
   native PDF viewer (which ignores scrolling="no" and scrolls internally
   regardless), so the card always shows a static first-page preview. */
.cig-pdf-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

@media print {
    .cig-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        transform: none !important;
    }
    .cig-description { max-height: none !important; opacity: 1 !important; }
    .cig-caption-bar { opacity: 1 !important; position: relative !important; background: none !important; }
    .cig-label, .cig-title, .cig-description { color: var(--cig-charcoal) !important; }
    .cig-card-inner { text-decoration: none; }
    .cig-card:hover { transform: none; }
}