/* CSS FOR Team & Company Recognition (homepage teaser + /about/our-team) */

/* No small "eyebrow" label component existed anywhere on the site before this,
   so this introduces one — sized/colored to match the accent word treatment
   already used inside .home-title headings (#b23a1f) and set in the heading
   font (Rubik) so it reads as part of the same type system. */
.team-eyebrow {
    color: #b23a1f;
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Story cards extend the existing .blog-menu card (image + stacked text)
   used by the homepage case-study grid — same col-lg-4/col-md-6 reflow,
   just with an extra description line between the headline and link. */
.team-story-card .team-eyebrow {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Small muted date line, used once story cards started spanning multiple
   years and needed a visible timestamp to make "newest to oldest" legible. */
.team-date {
    font-size: 13px;
    color: #8a94a6;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.team-modal .team-date {
    margin-top: 4px;
    margin-bottom: 0;
}

/* Every story card image sits in the same fixed-ratio box so the grid reads
   evenly regardless of what shape photo/graphic was supplied. The ratio
   (1650:859) is the native ratio of the Baton Rouge CEO Roundtable photo,
   the widest image in the set, specifically so that one never gets cropped;
   narrower photos are the ones that give a little at the edges instead. */

/* Badges, certificates, and illustrated graphics carry text/logos that
   object-fit: cover would risk slicing off, so these letterbox instead
   (shown in full, centered, on a gradient fill) rather than crop. */
.team-badge-frame {
    display: block;
    aspect-ratio: 1650 / 859;
    background: linear-gradient(135deg, #25476a, #333366);
    border-radius: 5px;
    overflow: hidden;
}

.team-badge-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
}

/* Candid event photos use the same box but crop-to-fill instead of
   letterboxing, so the grid has no gradient bars on ordinary photos. */
.team-photo-frame {
    display: block;
    aspect-ratio: 1650 / 859;
    border-radius: 5px;
    overflow: hidden;
}

.team-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Opt-in modifier for a photo that shouldn't be cropped to fill the box
   (e.g. a portrait photo the user cropped themselves) — shows the full
   image letterboxed on white instead of cover-cropping it. */
.team-photo-frame.contain-white {
    background-color: #fff;
}

.team-photo-frame.contain-white img {
    object-fit: contain;
}

.team-story-card .casestudy-title {
    margin-bottom: 0.5rem;
}

.team-story-card .team-story-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #576a7e;
}

.team-story-card img,
.team-story-card .casestudy-title {
    cursor: default;
}

/* Any image that IS wrapped in a real link (the homepage teaser's photo
   links to the Our Team page; has-modal cards' photo opens the modal)
   should still show a pointer, overriding the cursor:default default above. */
.team-story-card a img {
    cursor: pointer;
}

/* Homepage teaser cards have no link on the title itself (only the photo
   and the "Read More" button below are clickable), so explicitly block any
   hover color change here rather than relying on it simply not being styled. */
.team-story-card:not(.has-modal):hover .casestudy-title,
.team-story-card:not(.has-modal):focus-within .casestudy-title {
    color: #242524;
}

/* Cards that open a modal (the /about/our-team grid) only have two real
   click targets: the photo link and the "Read More" link. The eyebrow,
   date, and description text aren't wrapped in a link, so cursor/color
   hover cues are scoped to just those two links instead of the whole
   card — otherwise plain text looks clickable when it isn't. */
.team-story-card.has-modal img {
    cursor: pointer;
}

.team-story-card.has-modal a:first-child:hover ~ div .casestudy-title,
.team-story-card.has-modal a:first-child:focus ~ div .casestudy-title {
    color: #b23a1f;
}

/* Story modals use Bootstrap's stock Modal component (data-bs-toggle="modal"
   + bootstrap.bundle.min.js), which is the lowest-friction way to get focus
   trapping / Esc / backdrop-click close for free instead of hand-rolling all
   of that. BUT: this site's bootstrap.min.css is a trimmed build with the
   unused-elsewhere .modal/.modal-backdrop/.modal-dialog/.btn-close component
   CSS stripped out (confirmed by grep — file is ~29KB vs. Bootstrap's normal
   ~200KB+), even though the JS bundle ships the full Modal component. So the
   base modal CSS below is required for the modal to render/position/stack
   correctly — the JS alone (open/close/focus-trap) works without it, but the
   dialog has no positioning, no backdrop, and sits behind the fixed nav. */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }

    .modal-lg {
        max-width: 800px;
    }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .5rem;
    outline: 0;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: .5;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.5rem - 1px);
    border-top-right-radius: calc(.5rem - 1px);
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: .5;
    flex-shrink: 0;
    margin: -.5rem -.5rem -.5rem auto;
}

.btn-close:hover {
    color: #000;
    opacity: .75;
}

body.modal-open {
    overflow: hidden;
}

.team-modal .modal-content {
    border: 0;
    border-radius: 8px;
    overflow: hidden;
}

.team-modal .modal-header {
    border-bottom: 0;
    padding: 20px 24px 0;
}

.team-modal .modal-body {
    padding: 16px 32px 32px;
}

.team-modal .modal-body img {
    border-radius: 5px;
}

/* Margin lives on the frame (picture), not the img: the frame clips overflow
   for the fixed-ratio box, and a child's margin can get trapped inside an
   overflow:hidden parent instead of pushing the next sibling down. Matched
   to modal-body's 16px top padding so the gap above and below the image
   box is symmetric, with the paragraph's own top margin zeroed so it can't
   add extra space on top of this. */
.team-modal .modal-body picture {
    margin-bottom: 16px;
}

.team-modal .modal-body p {
    margin-top: 0;
}

.team-modal .modal-title .team-eyebrow {
    margin-top: 0;
}

.team-modal .btn-close:focus {
    box-shadow: 0 0 0 .2rem rgba(178, 58, 31, .35);
}

/* Multi-image switcher for the handful of story modals that have more than
   one photo. Only used where a modal actually has 2+ images (not every
   story) — a plain img-swap rather than Bootstrap Carousel, since the
   site's trimmed bootstrap.min.css doesn't ship Carousel's CSS either. */
.team-image-switcher {
    position: relative;
    margin-bottom: 16px;
}

.team-image-switcher picture {
    display: none;
    margin-bottom: 0;
}

.team-image-switcher picture.active {
    display: block;
}

/* The site's trimmed materialdesignicons.min.css doesn't include any
   chevron/arrow glyphs (only the handful of icons already used elsewhere
   on the site), so these arrows are drawn with CSS borders instead of an
   icon font — no glyph to go missing. */
.team-image-switcher-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(108, 117, 125, .85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    cursor: pointer;
    z-index: 2;
}

.team-image-switcher-btn:hover,
.team-image-switcher-btn:focus {
    background: rgba(108, 117, 125, 1);
}

.team-image-switcher-btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: #fff;
    border-width: 0 2px 2px 0;
}

.team-image-switcher-prev {
    left: 10px;
}

.team-image-switcher-prev::before {
    transform: rotate(135deg);
    margin-left: 3px;
}

.team-image-switcher-next {
    right: 10px;
}

.team-image-switcher-next::before {
    transform: rotate(-45deg);
    margin-right: 3px;
}

.team-image-switcher-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.team-image-switcher-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    cursor: pointer;
}

.team-image-switcher-dots button.active {
    background: #fff;
}