/* ==========================================================================
   Shared ESTC components
   Department cards (homepage, departments index) and the director portrait
   composition (homepage, "Mot du directeur" page).
   ========================================================================== */

/* ----------------------------------------------------------------------
   Department cards — markup: mysite/includes/dept_card.html
   ---------------------------------------------------------------------- */

/* Each department carries its own colour: --c1 (light) → --c2 (deep) for the visual,
   --ink for text accents on white. The theme class comes from get_home_departments(). */
.estc-dept {
    --c1: #2563b8;
    --c2: #0f2f66;
    --ink: #1f4fa3;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 0 28px 0 0;
    box-shadow: 0 1px 0 rgba(11, 31, 51, .06), 0 10px 30px -18px rgba(11, 31, 51, .25);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}

.estc-dept--info { --c1: #2563b8; --c2: #0f2f66; --ink: #1f4fa3; }
.estc-dept--meca { --c1: #556b80; --c2: #1f2b38; --ink: #3d4f63; }
.estc-dept--elec { --c1: #d99a1e; --c2: #8a5206; --ink: #a8680a; }
.estc-dept--proc { --c1: #14978c; --c2: #08504a; --ink: #0d7a71; }
.estc-dept--mgmt { --c1: #b3303a; --c2: #5e0f15; --ink: #9b1c24; }
.estc-dept--digi { --c1: #7c4fc0; --c2: #36205e; --ink: #6a3fa0; }

.estc-dept:hover,
.estc-dept:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 1px 0 rgba(11, 31, 51, .06), 0 28px 50px -24px var(--c2);
}

.estc-dept__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 20% 0%, var(--c1), transparent 70%),
        linear-gradient(150deg, var(--c1), var(--c2));
    color: #fff;
}

/* pattern_05 drawn as crisp white lines (mask), fading towards the bottom-right */
.estc-dept__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .16);
    -webkit-mask:
        url('../../images/patterns/pattern_05.png') center / 96px repeat,
        linear-gradient(160deg, #000 20%, transparent 85%);
    -webkit-mask-composite: source-in;
    mask:
        url('../../images/patterns/pattern_05.png') center / 96px repeat,
        linear-gradient(160deg, #000 20%, transparent 85%);
    mask-composite: intersect;
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}

.estc-dept:hover .estc-dept__visual::before {
    transform: scale(1.12) rotate(2deg);
}

.estc-dept__num {
    position: absolute;
    top: 18px;
    left: 22px;
    font-family: var(--estc-font-heading);
    font-size: 15px;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .75);
}

.estc-dept__num::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-left: 10px;
    vertical-align: middle;
    background: rgba(255, 255, 255, .5);
}

/* Oversized icon bleeding off the corner */
.estc-dept__watermark {
    position: absolute;
    right: -24px;
    bottom: -34px;
    font-size: 190px;
    color: #fff;
    opacity: .08;
    transform: rotate(-12deg);
    transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .5s;
}

.estc-dept:hover .estc-dept__watermark {
    opacity: .14;
    transform: rotate(-4deg) scale(1.06);
}

/* Frosted badge holding the icon, with a thin outer ring */
.estc-dept__badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: 36px;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), background-color .4s;
}

.estc-dept__badge::after {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .3);
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

.estc-dept:hover .estc-dept__badge {
    transform: scale(1.06);
    background-color: rgba(255, 255, 255, .22);
}

.estc-dept:hover .estc-dept__badge::after {
    transform: rotate(90deg);
}

.estc-dept__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px 26px 26px;
}

/* Accent bar in the department colour, grows across on hover */
.estc-dept__body::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 3px;
    background: var(--ink);
    transition: width .6s cubic-bezier(.16, 1, .3, 1);
}

.estc-dept:hover .estc-dept__body::before {
    width: 100%;
}

.estc-dept__pole {
    font-family: var(--estc-font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
}

.estc-dept__name {
    font-family: var(--estc-font-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--estc-heading);
}

.estc-dept__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    font-family: var(--estc-font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--estc-muted);
    transition: color .3s, gap .3s;
}

.estc-dept__more i {
    font-size: 12px;
}

.estc-dept:hover .estc-dept__more {
    gap: 14px;
    color: var(--ink);
}

/* ----------------------------------------------------------------------
   Director portrait — markup: mysite/includes/director_portrait.html
   ---------------------------------------------------------------------- */

/* ---- Portrait composition ----
   The figure reserves --off on the right/bottom for the zellige panel behind the photo;
   a gold outline sits offset the other way. */
.estc-portrait {
    --off: 32px;
    position: relative;
    margin: 0;
    padding: 0 var(--off) var(--off) 0;
}

.estc-portrait::before {
    content: '';
    position: absolute;
    inset: var(--off) 0 0 var(--off);
    background:
        url('../../images/patterns/pattern_05.png') repeat,
        var(--estc-primary);
    background-size: 110px, auto;
    background-blend-mode: soft-light;
    border-bottom-right-radius: 48px;
}

.estc-portrait::after {
    content: '';
    position: absolute;
    inset: calc(var(--off) * -.5) calc(var(--off) * 1.5) calc(var(--off) * 1.5) calc(var(--off) * -.5);
    border: 1px solid #c9a227;
    border-top-left-radius: 56px;
    pointer-events: none;
}

.estc-portrait__frame {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top-left-radius: 48px;
    box-shadow: 0 24px 48px -18px rgba(11, 31, 51, .45);
}

/* The uploaded portrait carries a thin red/black border: scale it just past the frame edge */
.estc-portrait__frame img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 580px;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

.estc-portrait:hover .estc-portrait__frame img {
    transform: scale(1.07);
}

.estc-portrait__name {
    position: absolute;
    left: 0;
    bottom: var(--off);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 30px 16px;
    background: var(--estc-secondary);
    border-top-right-radius: 28px;
    box-shadow: inset 0 3px 0 #c9a227;
}

.estc-portrait__name strong {
    font-family: var(--estc-font-heading);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .5px;
    color: #fff;
}

.estc-portrait__name span {
    font-family: var(--estc-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #e2c46a;
}

@media (max-width: 640px) {
    /* Phones: compact rows, colour tile on the left, text on the right */
    .estc-departments__grid {
        gap: 14px;
    }

    .estc-dept {
        flex-direction: row;
        border-radius: 0 20px 0 0;
    }

    .estc-dept__visual {
        flex: 0 0 104px;
        height: auto;
        min-height: 112px;
    }

    .estc-dept__num,
    .estc-dept__watermark,
    .estc-dept__badge::after {
        display: none;
    }

    .estc-dept__badge {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .estc-dept__body {
        justify-content: center;
        gap: 4px;
        padding: 16px 18px;
    }

    .estc-dept__body::before {
        width: 3px;
        height: 100%;
    }

    .estc-dept:hover .estc-dept__body::before {
        width: 3px;
    }

    .estc-dept__pole {
        font-size: 10.5px;
    }

    .estc-dept__name {
        font-size: 18px;
    }

    .estc-dept__more {
        margin-top: 4px;
        padding-top: 0;
        font-size: 12.5px;
    }

    .estc-portrait {
        --off: 18px;
    }

    .estc-portrait__frame,
    .estc-portrait::after {
        border-top-left-radius: 32px;
    }

    .estc-portrait__name {
        padding: 12px 20px 11px;
    }

    .estc-portrait__name strong {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .estc-dept,
    .estc-dept *,
    .estc-dept__visual::before,
    .estc-portrait__frame img {
        transition: none;
    }
}