/* ---------- Modal base ---------- */
/* .blog-modal {
    position: fixed;
    inset: 0;
    display: none;
    
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    padding: 20px;
    transition: opacity 220ms ease;
} */

/* .blog-modal-content {
    width: min(980px, 96%);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 24px 60px rgba(6, 12, 20, 0.45);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
} */

/* Close */
/* .modal-close-btn {
    position: absolute;
    right: 12px;
    top: 10px;
    font-size: 26px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #333;
} */

/* -------- Image wrap (arrows inside) -------- */
.modal-image-wrap {
    position: relative;
    width: 100%;
    border-radius: 12px;
        border-left: 2px solid var(--orange-yellow-crayola);

    overflow: hidden;
    /* background: var(--bg-gradient-jet);; */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* figure holds image centered */
.modal-figure {
    width: 100%;
    max-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

/* main image */
.modal-figure img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    user-select: none;
    transition: opacity 260ms ease, transform 240ms ease;
    opacity: 1;
    transform-origin: center center;
    will-change: transform, opacity;
    cursor: zoom-in;
    border-radius: 10px;
    background: var(--bg-gradient-jet);;
    box-shadow: 0 8px 20px rgba(9, 30, 66, 0.06);
}

/* fade */
.modal-figure img.fade {
    opacity: 0;
}

/* zoomed state */
.modal-figure img.zoomed {
    transform: scale(2);
    cursor: grab;
}

/* arrows inside image area */
.slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    /* background: var(--light-gray); */
    color: var(--text);
    border: none;
    padding: 10px 12px;
    font-size: 20px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 160ms ease, transform 120ms ease;
}

.slide-btn:active {
    transform: translateY(-50%) scale(0.98);
}

.left-slide-btn {
    left: 10px;
}

.right-slide-btn {
    right: 10px;
}

/* hide arrows on very small screens? keep them small */
@media (max-width:520px) {
    .slide-btn {
        padding: 8px;
        font-size: 18px;
        width: 36px;
        height: 36px;
    }

    
}

.cl-btn{
    top:1rem;
    right:1rem;
}

/* ---------- Thumbnails (points) ---------- */
.image-thumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 6px;
    margin-top: 8px;
}

.image-thumbs::-webkit-scrollbar {
    height: 6px;
}

.image-thumbs::-webkit-scrollbar-thumb {
    background: var(--bg-gradient-jet);;
    border-radius: 6px;
}

.image-thumbs button {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(9, 30, 66, 0.04);
    transition: transform 140ms ease, box-shadow 140ms ease;
    overflow: hidden;
    width: 50px;
    height: 30px;
    /* rectangular preview */
    flex: 0 0 auto;
}

.image-thumbs button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-thumbs button.active {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 28px rgba(9, 30, 66, 0.12);
    outline: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

/* ---------- Meta & signature ---------- */
/* .blog-modal-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    margin-top: 6px;
} */

/* .h3.modal-title {
    margin: 6px 0 8px;
    font-size: 20px;
    color: #111;
}

.service-item-text {
    color: #444;
    line-height: 1.6;
    margin-bottom: 6px;
} */

.signature-box {
    margin-top: 2rem;
    padding: 12px;
    background: var(--bg-gradient-jet);
    border-left: 4px solid var(--orange-yellow-crayola);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.signature-box img {
    width: 40%;
    height: auto;
    object-fit: contain;
}

/* .people-model-content {
   max-width: 60rem !important;
    width: 90% !important;
} */

.blog-modal-content.people-modal-content,
.people-modal-content.blog-modal-content {
  /* use min/max to remain responsive */
  max-width: 50rem !important;
  width: min(90%, 50rem) !important;
  box-sizing: border-box !important;
  padding-left: 40px; /* optional: adjust padding if you want different feel */
  padding-right: 40px;
}

.people-cat {
    font-size: var(--fs-4);
}

.people-h {
    font-size: var(--fs-1)
}

.people-text {
    font-size: var(--fs-8);
}

/* .span-text {
    font-weight: var(--fw-6);
    font-style: italic;
    color: var(--orange-yellow-crayola) !important;
} */

#peopleModalText .span-text,
#modalText .span-text,
.blog-modal-content .span-text {
  color: var(--orange-yellow-crayola) !important;
  font-weight: var(--fw-6);
  font-style: italic;
  display: inline !important;
}



@media (max-width:1250px) {
    .people-text {
    font-size: var(--fs-7)
}
#peopleModalText .span-text,
#modalText .span-text,
.blog-modal-content .span-text {
  color: var(--orange-yellow-crayola) !important;
  font-weight: var(--fw-6);
  font-style: italic;
  display: inline !important;
}
}

/* smaller screens: stack nicely */
@media (max-width:720px) {

    .image-thumbs button {
        width: 30px;
        height: 20px;
    }

    .signature-box img{
        width: 85%;
        }


    /* .h3.modal-title {
        font-size: 18px;
    } */
}

/* keep hidden-modal-img hidden on main page */
.hidden-modal-img {
    display: none !important;
}

/* subtle hover */
.image-thumbs button:hover {
    transform: translateY(-3px);
}

@media (min-width: 580px) {
    .sidebar-people, article {
        padding: 15px;
    }   

}