/* COR Insights gallery — v1.7.4
   ---------------------------------------------------------------------------
   The Insights posts were imported from continentaloffice.com and
   hbworkplaces.com with whatever markup they had, and several of them end in a
   long stack of consecutive images — ten in a row on "2025 Year of Impact",
   every one of them a phone photo at 3:4, which scrolls for six screens. Where
   three or more images sit back to back they are wrapped into one slider by
   cor_ig_wrap_runs() and this stylesheet dresses it.

   Deliberately NOT the project gallery's .cor-prj-* classes. That component is
   full-bleed (width:100vw with the green block rising behind it) and reads as a
   page section; inside a post the slider has to sit in the content column, so it
   carries its own box. The behaviour is the same because insights-gallery.js is
   the same logic as cor-projects.js — locked height, width follows each image's
   own ratio, snap, drag, a capped dot window.

   Palette comes from the Elementor globals, same as cor-projects.css, because
   the project stylesheet is NOT enqueued on a post and none of its --p-*
   variables exist here.
   ------------------------------------------------------------------------- */

.cor-ig {
    --ig-green: var(--e-global-color-primary, #1A4348);
    --ig-agave: var(--e-global-color-secondary, #259596);
    --ig-serif: "utile-display", "Utile Display", Georgia, serif;
    --ig-ease: cubic-bezier(.22, 1, .36, 1);
    /* Locked slide height. The project gallery's 39.2vw is measured against the
       full viewport; this one lives in the ~1493px content column, so it is
       pulled back to 32vw — at 1920 that is 614px, which puts about three of
       the 3:4 phone photos on screen at once and still shows a 2.19 panorama
       whole. */
    --ig-h: clamp(300px, 32vw, 620px);
    position: relative;
    margin: 50px 0;
}

.cor-ig * { box-sizing: border-box; }

/* 1) The track ------------------------------------------------------------- */

.cor-ig__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    scroll-behavior: smooth;
}
.cor-ig__track::-webkit-scrollbar { display: none; }
.cor-ig__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }

/* The slides are the post's own <figure> elements, moved rather than rebuilt, so
   the attachment markup and srcsets survive untouched. cor_ig_wrap_runs() strips
   `wp-block-image` from each one on the way in: it is what the theme and the
   CS-109 figure-spacing rule both hook, and neither should reach inside a
   slider. Stripping it is what keeps the rules on the figure itself free of
   !important; the two on the <img> below are a different fight, see there. */
.cor-ig__slide {
    --ratio: 1.5;
    flex: 0 0 auto;
    margin: 0;
    height: var(--ig-h);
    width: calc(var(--ig-h) * var(--ratio));
    max-width: 100%;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    background: #e9ebea;
    position: relative;
}
/* The link and the image fill the slide by being pinned to it, not by
   `height: 100%`. A percentage height resolves against the height the box
   computed from its own rules — so on the phone breakpoint below, where a slide
   is sized by aspect-ratio and then raised by min-height, a 100%-height image
   fills only the pre-clamp height and leaves a strip of the grey placeholder
   showing at the bottom. inset:0 has no such opinion. */
.cor-ig__slide a { position: absolute; inset: 0; display: block; cursor: zoom-in; }
/* height and border-radius carry !important, and it is not laziness. The
   Insights single template styles its post-content images from Elementor, which
   writes into post-20111.css:

     .elementor-20111 .elementor-element.elementor-element-f962a9f img
       { border-radius: 20px; max-width: 100%; height: auto; }

   That is (0,4,1). No class chain short of absurd beats a per-widget Elementor
   selector — `.cor-ig__slide a img` at (0,2,1) loses, which is how this was
   confirmed. Left alone it does two things: the image keeps its own 20px radius
   inside a slide clipped at 10px, and `height: auto` sends a clamped slide back
   to the image's intrinsic ratio, leaving a band of the grey placeholder under
   every landscape photo on a phone.

   Seventh instance of the cascade trap on this build — see the cascade-traps
   doc. width does not need it: nothing in that chain sets width. */
.cor-ig__slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    /* Where the box carries the image's own ratio, cover crops nothing — it is
       there for the half-pixel rounding, and for the phone breakpoint, where the
       height is deliberately clamped and cover is what absorbs it. */
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0 !important;
    user-select: none;
}
/* Source captions are kept in the DOM for screen readers and moved into the
   caption line under the track for everyone else. */
.cor-ig__slide figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 2) Caption line — only rendered when at least one slide has a caption ----- */

.cor-ig__cap {
    margin-top: 14px;
    min-height: 1.5em;
    font: 400 15px/1.5 var(--ig-serif);
    color: #2D2926;
    opacity: .75;
}

/* 3) Nav: dots left, arrows right ----------------------------------------- */

.cor-ig__nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.cor-ig__dots { display: flex; gap: 12px; }
.cor-ig__dot {
    width: 8px !important; height: 8px !important; padding: 0 !important;
    border-radius: 50% !important; background: #D9D9D6 !important;
    cursor: pointer; transition: background .2s, transform .2s;
}
.cor-ig__dot.is-active { background: var(--ig-green) !important; transform: scale(1.25); }
.cor-ig__dot:hover { background: var(--ig-agave) !important; }
/* The capped dot window — see windowDots() in insights-gallery.js. Ten images
   would otherwise draw ten dots, and the point of them is only to say "there
   are more"; the small dot at an end means there are more that way. */
.cor-ig__dot.is-hidden { display: none !important; }
.cor-ig__dot.is-edge { transform: scale(.625); }

.cor-ig__arrows { display: flex; gap: 1px; }
/* Hard resets — the theme styles every <button> (border, min-width, maroon). */
.cor-ig__btn, .cor-ig__btn:hover, .cor-ig__btn:focus,
.cor-ig__dot, .cor-ig__dot:hover, .cor-ig__dot:focus {
    background-image: none !important; border: 0 !important; box-shadow: none !important;
    text-shadow: none !important; outline: none; min-width: 0 !important; min-height: 0 !important;
    margin: 0 !important; line-height: 1 !important; -webkit-appearance: none; appearance: none;
}
.cor-ig__btn {
    width: 60px !important; height: 60px !important; border-radius: 50% !important;
    background: transparent !important; cursor: pointer; padding: 0 !important;
    font: 500 34px/1 var(--ig-serif) !important; color: var(--ig-agave) !important;
    transition: color .2s, transform .35s var(--ig-ease);
}
.cor-ig__btn:hover { color: var(--ig-green) !important; background: transparent !important; }
.cor-ig__btn:focus-visible { outline: 2px solid var(--ig-agave); outline-offset: 2px; }
.cor-ig__btn.cor-ig__next:hover { transform: translateX(6px); }
.cor-ig__btn.cor-ig__prev:hover { transform: translateX(-6px); }

/* 3b) CS-344: bleed off the right edge ------------------------------------ */

/* Jim: "Needs to be flush right." Every other carousel on the site starts on
the content margin and runs off the right edge of the window — the project
gallery and the Related Pages rails both do. This one stopped at the text
column and sliced the next photo in half on the column line, which reads as a
mistake rather than a hint that there is more. So the track runs out to the
window edge; the dots and arrows stay on the column, as they do on the rails.

calc(50% - 50vw) works because the post content column is centred in the
window. Any overshoot under a desktop scrollbar is clipped by the body's
overflow-x: clip, so it never adds a horizontal scroll.

Not below 640: on a phone a slide is one column wide (see 4 below), and a bled
track would make every slide wider than the screen. */
@media (min-width: 641px) {
	.cor-ig__track { margin-right: calc(50% - 50vw); }
}

/* The Elementor conversion (25 Sep) put each slider inside its own flex
container (.cor-ig-run, flex-direction: column, not stretched). A block in a
flex column that isn't stretched sizes to its content, and on a phone the
content is slides at flex-basis 100% of that same box — a circle that settled
at 3,422px on a 390 screen, one slide blown up ten times over. An explicit
width breaks the circle; min-width:0 stops a flex item refusing to shrink. */
.cor-ig { width: 100%; min-width: 0; align-self: stretch; }

/* 4) Small screens -------------------------------------------------------- */

/* Tablet keeps the locked-height model, with two numbers corrected against a
   768 render.

   The project gallery's `max-width: 88vw` does not port: that component is
   full-bleed, so 88vw is 88% of its own track. Here the track is inset by the
   content gutter — 618 wide at a 768 viewport — and an 88vw slide is 676, wider
   than the track can ever show. So the cap is the track, not the viewport.

   And the height then has to be small enough that the common ratio fits inside
   that cap, or every landscape hits it and crops. The track is about 80vw, so
   3:2 fits at 53.6vw of height; 52 leaves a margin. At 768 that puts a 3:2 at
   599 in a 618 track, and only the 2.19 panorama still crops. */
@media (max-width: 1024px) {
    .cor-ig { --ig-h: 52vw; margin: 40px 0; }
    .cor-ig__btn { width: 48px !important; height: 48px !important; font-size: 28px !important; }
    .cor-ig__dots { gap: 10px; flex-wrap: nowrap; }   /* the window is capped, so a row can never need to wrap */
}
/* On a phone the locked-height model inverts. At 390 the column is 330 wide and
   --ig-h would be about 300, so a 3:2 photo wants 456px of width, is capped, and
   loses a third of itself to the crop — and a 2.19 panorama loses more than
   half. Every landscape in these posts was being cut.

   So below 640 the slide is width-driven instead: one slide fills the column and
   the height follows the image. flex-basis rather than a vw figure, because the
   track is inset by the content gutter and a vw slide is wider than the track
   can ever show.

   The height is then bounded rather than free. Unbounded, a 3:4 phone photo runs
   to 440px while a panorama collapses to 151, and a row that swings between them
   reads as broken. min/max-height clamp the swing and object-fit absorbs the
   difference, so the only images cropped at all are the extremes, and lightly:

     0.75 portrait -> 440  (inside the cap, untouched)
     1.33          -> 248  (untouched)
     1.5           -> 220  -> 242, about 9% off the sides
     2.19 panorama -> 151  -> 242, the one real crop — but 151px of letterbox
                             on a phone is not worth protecting */
@media (max-width: 640px) {
    .cor-ig { margin: 30px 0; }
    .cor-ig__track { align-items: center; }
    .cor-ig__slide {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: var(--ratio);
        min-height: 62vw;
        max-height: 118vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cor-ig__track { scroll-behavior: auto; }
    .cor-ig__btn { transition: none !important; }
}