/* =====================================================
   ASA CORPORATE OFFICERS & MANAGEMENT TEAM
   VERSION 1.6.0
   Shortcode: [asa_corporate_management]

   REVISION:
   - Adds full-width Hero Banner inside the same dashboard.
   - Hero follows the approved About Us behavior:
     background image + centered title + separate responsive heights.
   ===================================================== */

.asa-cmt-page,
.asa-cmt-page * {
    box-sizing: border-box;
}

/* Break the shortcode out of a boxed WordPress content wrapper. */
.asa-cmt-page {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}

/* =====================================================
   HERO BANNER
   Mirrors the approved About Us hero behavior.
   ===================================================== */

.asa-cmt-hero {
    position: relative;
    width: 100%;
    height: var(--asa-cmt-hero-h-d, 430px) !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f68d2e;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    isolation: isolate;
}

/*
 * A subtle readability layer. This is intentionally restrained so
 * the uploaded hero artwork remains dominant.
 */
.asa-cmt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(76, 9, 0, 0.65);
    pointer-events: none;
}

.asa-cmt-hero--no-image::before {
    display: none;
}

.asa-cmt-hero__content {
    position: relative;
    z-index: 98;
    width: min(90%, 1520px);
    margin: 0 auto;
    padding: 24px 0;
    text-align: center;
}

.asa-cmt-hero__title {
		z-index: 99 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: clamp(38px, 4vw, 58px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

/* =====================================================
   TEAM SECTION
   ===================================================== */

.asa-cmt-team {
    position: relative;
    width: 100%;
}

.asa-cmt-team__header {
    position: relative;
    width: 100%;
    padding-top: var(--asa-team-header-top-d, 42px);
    padding-bottom: var(--asa-team-header-bottom-d, 28px);
    background: var(--asa-team-header-bg, #ffffff);
}

.asa-cmt-team__header-inner {
    width: min(86%, var(--asa-team-header-max, 1600px));
    margin: 0 auto;
    text-align: var(--asa-team-header-align, left);
}

.asa-cmt-team__title {
    margin: 0;
    padding: 0;
    color: var(--asa-team-title-color, #222222);
    font-size: var(--asa-team-title-d, 64px);
    font-weight: var(--asa-team-title-weight, 700);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.asa-cmt-team__subtitle {
    margin-top: var(--asa-team-title-sub-gap, 6px);
    color: var(--asa-team-subtitle-color, #111111);
    font-size: var(--asa-team-subtitle-d, 52px);
    font-weight: var(--asa-team-subtitle-weight, 400);
    font-style: var(--asa-team-subtitle-style, italic);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.asa-cmt-team__intro {
    width: min(100%, var(--asa-team-intro-max, 1500px));
    margin-top: var(--asa-team-sub-intro-gap, 42px);
    color: var(--asa-team-intro-color, #777777);
    font-size: var(--asa-team-intro-d, 22px);
    font-weight: var(--asa-team-intro-weight, 400);
    line-height: 1.65;
    letter-spacing: -0.01em;
}

/* Keep the description anchored naturally to the chosen header alignment. */
.asa-cmt-team[style*="--asa-team-header-align:center"] .asa-cmt-team__intro {
    margin-left: auto;
    margin-right: auto;
}

.asa-cmt-team[style*="--asa-team-header-align:right"] .asa-cmt-team__intro {
    margin-left: auto;
    margin-right: 0;
}

.asa-cmt-team__header-rule {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--asa-team-rule-height, 4px);
    background: var(--asa-team-rule-bg, linear-gradient(90deg, #6d0000 0%, #6d0000 68%, #f68d2e 68%, #f68d2e 100%));
}

.asa-cmt-team__body {
    width: 100%;
    padding-top: var(--asa-team-body-top-d, 48px);
    padding-bottom: var(--asa-team-body-bottom-d, 72px);
    background: var(--asa-team-body-bg, #f7f5ef);
}

.asa-cmt-team__inner {
    width: min(86%, var(--asa-team-content-max, 1400px));
    margin: 0 auto;
}


/* =====================================================
   MANAGEMENT TEAM DEPARTMENTS
   Each department has its own header + member settings.
   ===================================================== */

.asa-cmt-departments,
.asa-cmt-department {
    position: relative;
    width: 100%;
}

.asa-cmt-department__header {
    width: 100%;
    padding-top: var(--asa-dept-pad-top-d, 70px);
    padding-bottom: var(--asa-dept-pad-bottom-d, 70px);
    background: var(--asa-dept-header-bg, #ffffff);
}

.asa-cmt-department__header-inner {
    width: min(86%, var(--asa-team-content-max, 1400px));
    margin: 0 auto;
    text-align: center;
}

.asa-cmt-department__title {
    margin: 0;
    padding: 0;
    color: var(--asa-dept-title-color, #000000);
    font-size: var(--asa-dept-title-d, 46px);
    font-weight: var(--asa-dept-title-weight, 400);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.asa-cmt-department__body {
    width: 100%;
    padding-top: var(--asa-team-body-top-d, 48px);
    padding-bottom: var(--asa-team-body-bottom-d, 72px);
    background: var(--asa-team-body-bg, #f7f5ef);
}

.asa-cmt-department__inner {
    width: min(86%, var(--asa-team-content-max, 1400px));
    margin: 0 auto;
}

/* =====================================================
   DEPARTMENT WITHOUT-PHOTO MEMBER MODE
   ===================================================== */

/*
 * Only Department Groups use this mode.
 * With Photo departments remain completely unchanged.
 *
 * Without Photo:
 * - no photo wrapper is rendered
 * - every member card has the same dashboard-controlled height
 * - border radius is department-controlled
 * - content is vertically centered
 */
.asa-cmt-department--without-photo .asa-cmt-grid {
    align-items: stretch;
}

.asa-cmt-department--without-photo .asa-cmt-member {
    height: var(--asa-dept-text-card-h-d, 150px);
    min-height: var(--asa-dept-text-card-h-d, 150px);
    border-radius: var(--asa-dept-text-card-radius, 0px);
    overflow: hidden;
    background: var(--asa-member-bg, #ffffff);
}

.asa-cmt-department--without-photo .asa-cmt-member__content {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    overflow: hidden;
}

/* =====================================================
   MEMBER GRID
   ===================================================== */

.asa-cmt-grid {
    display: grid;
    grid-template-columns: repeat(var(--asa-team-cols-d, 4), minmax(0, 1fr));
    gap: var(--asa-team-gap, 30px);
    align-items: start;
}

/* =====================================================
   MEMBER CARD
   ===================================================== */

.asa-cmt-member {
    position: relative;
    width: 100%;
    max-width: var(--asa-member-max, 320px);
    margin: 0 auto;
    background: transparent;
    overflow: hidden;
}

/*
 * The photo is always flush to the top-left of the card.
 * V1.4: each member can set an independent photo background color
 * and opacity from the dashboard. PHP applies that value inline to
 * this wrapper, so opacity affects ONLY the background behind a
 * transparent/cut-out portrait and never fades the portrait itself.
 */
.asa-cmt-member__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 6;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

.asa-cmt-member__img {
    position: absolute;
		z-index: 10;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    object-position: 0 0;
}

/* =====================================================
   PHOTO → DETAILS COLORED ACCENT GAP
   - Rendered only when a member has both a photo and details.
   - Height and color are controlled per Team Section.
   - Set height to 0 in the dashboard to hide it completely.
   ===================================================== */

.asa-cmt-member__photo-detail-gap {
    display: block;
    width: 100%;
    height: var(--asa-member-photo-gap-height, 8px);
    min-height: 0;
    margin: 0;
    padding: 0;
    background: var(--asa-member-photo-gap-color, #f68d2e);
    pointer-events: none;
}


.asa-cmt-member__detail-gap {
    width: 100%;
    height: var(--asa-member-detail-gap-h, 8px);
    min-height: 0;
    margin: 0;
    padding: 0;
    background: var(--asa-member-detail-gap-color, #f68d2e);
    flex: 0 0 auto;
}

.asa-cmt-member__content {
    position: relative;
		z-index: 9;
    padding: var(--asa-member-content-pad, 22px);
    text-align: center;
    background: var(--asa-member-bg, #ffffff);
}

/*
 * V1.5 TRUE PHOTO TRANSPARENCY
 * ---------------------------------------------------------
 * The member card itself stays transparent behind photographed
 * members. This allows the RGBA photo background set in PHP to
 * genuinely reveal/blend with the Team Section background.
 *
 * The configured Member Container Background is retained on the
 * name/position area and on text-only members.
 */
.asa-cmt-member--has-photo {
    background: transparent !important;
}

.asa-cmt-member--text-only {
    background: var(--asa-member-bg, #ffffff);
}

.asa-cmt-member--has-photo .asa-cmt-member__photo {
    isolation: isolate;
}

.asa-cmt-member__name {
    margin: 0;
    padding: 0;
    color: var(--asa-member-name-color, #111111);
    font-size: var(--asa-member-name-d, 18px);
    font-weight: var(--asa-member-name-weight, 700);
    line-height: 1.22;
}

.asa-cmt-member__position {
    margin: 7px 0 0;
    padding: 0;
    color: var(--asa-member-position-color, #666666);
    font-size: var(--asa-member-position-d, 14px);
    font-weight: var(--asa-member-position-weight, 400);
    line-height: 1.45;
}

/*
 * IMPORTANT:
 * When no photo is uploaded, PHP outputs NO photo wrapper at all.
 * Therefore this card contains only the name/position block and no
 * empty/reserved photo area can appear.
 */
.asa-cmt-member--text-only .asa-cmt-member__content {
    width: 100%;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1024px) {

    .asa-cmt-department__header {
        padding-top: var(--asa-dept-pad-top-t, 58px);
        padding-bottom: var(--asa-dept-pad-bottom-t, 58px);
    }

    .asa-cmt-department__title {
        font-size: var(--asa-dept-title-t, 38px);
    }

    .asa-cmt-department__body {
        padding-top: var(--asa-team-body-top-t, 42px);
        padding-bottom: var(--asa-team-body-bottom-t, 60px);
    }

    .asa-cmt-department--without-photo .asa-cmt-member {
        height: var(--asa-dept-text-card-h-t, 150px);
        min-height: var(--asa-dept-text-card-h-t, 150px);
    }

    .asa-cmt-hero {
        height: var(--asa-cmt-hero-h-t, 350px) !important;
    }

    .asa-cmt-hero__title {
        font-size: clamp(34px, 5vw, 48px) !important;
    }

    .asa-cmt-team__header {
        padding-top: var(--asa-team-header-top-t, 36px);
        padding-bottom: var(--asa-team-header-bottom-t, 24px);
    }

    .asa-cmt-team__title {
        font-size: var(--asa-team-title-t, 50px);
    }

    .asa-cmt-team__subtitle {
        font-size: var(--asa-team-subtitle-t, 42px);
    }

    .asa-cmt-team__intro {
        font-size: var(--asa-team-intro-t, 20px);
    }

    .asa-cmt-team__body {
        padding-top: var(--asa-team-body-top-t, 42px);
        padding-bottom: var(--asa-team-body-bottom-t, 60px);
    }

    .asa-cmt-grid {
        grid-template-columns: repeat(var(--asa-team-cols-t, 2), minmax(0, 1fr));
    }

    .asa-cmt-member__name {
        font-size: var(--asa-member-name-t, 17px);
    }

    .asa-cmt-member__position {
        font-size: var(--asa-member-position-t, 14px);
    }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    .asa-cmt-department__header {
        padding-top: var(--asa-dept-pad-top-m, 44px);
        padding-bottom: var(--asa-dept-pad-bottom-m, 44px);
    }

    .asa-cmt-department__header-inner,
    .asa-cmt-department__inner {
        width: min(90%, var(--asa-team-content-max, 1400px));
    }

    .asa-cmt-department__title {
        font-size: var(--asa-dept-title-m, 30px);
        line-height: 1.18;
    }

    .asa-cmt-department__body {
        padding-top: var(--asa-team-body-top-m, 34px);
        padding-bottom: var(--asa-team-body-bottom-m, 48px);
    }

    .asa-cmt-department--without-photo .asa-cmt-member {
        height: var(--asa-dept-text-card-h-m, 140px);
        min-height: var(--asa-dept-text-card-h-m, 140px);
    }

    .asa-cmt-hero {
        height: var(--asa-cmt-hero-h-m, 270px) !important;
    }

    .asa-cmt-hero__content {
        width: 90%;
    }

    .asa-cmt-hero__title {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1.12 !important;
    }

    .asa-cmt-team__inner {
        width: min(90%, var(--asa-team-content-max, 1400px));
    }

    .asa-cmt-team__header-inner {
        width: min(90%, var(--asa-team-header-max, 1600px));
    }

    .asa-cmt-team__header {
        padding-top: var(--asa-team-header-top-m, 30px);
        padding-bottom: var(--asa-team-header-bottom-m, 20px);
    }

    .asa-cmt-team__title {
        font-size: var(--asa-team-title-m, 38px);
        line-height: 1.06;
    }

    .asa-cmt-team__subtitle {
        font-size: var(--asa-team-subtitle-m, 32px);
        line-height: 1.08;
    }

    .asa-cmt-team__intro {
        font-size: var(--asa-team-intro-m, 17px);
        line-height: 1.6;
    }

    .asa-cmt-team__body {
        padding-top: var(--asa-team-body-top-m, 34px);
        padding-bottom: var(--asa-team-body-bottom-m, 48px);
    }

    .asa-cmt-grid {
        grid-template-columns: repeat(var(--asa-team-cols-m, 1), minmax(0, 1fr));
    }

    .asa-cmt-member__name {
        font-size: var(--asa-member-name-m, 17px);
    }

    .asa-cmt-member__position {
        font-size: var(--asa-member-position-m, 14px);
    }
}


/* =====================================================
   V1.8.1 HOTFIX — DEPARTMENT TEXT-ONLY CARDS
   ===================================================== */

/*
 * Stronger selectors ensure theme/card CSS cannot override the uniform
 * height or radius chosen in the department dashboard.
 */
.asa-cmt-page .asa-cmt-department--without-photo .asa-cmt-grid {
    align-items: stretch !important;
}

.asa-cmt-page .asa-cmt-department--without-photo .asa-cmt-member {
    display: flex;
    flex-direction: column;
    height: var(--asa-dept-text-card-h-d, 150px) !important;
    min-height: var(--asa-dept-text-card-h-d, 150px) !important;
    max-height: var(--asa-dept-text-card-h-d, 150px) !important;
    border-radius: var(--asa-dept-text-card-radius, 0px) !important;
    overflow: hidden !important;
    background: var(--asa-member-bg, #ffffff) !important;
}

.asa-cmt-page .asa-cmt-department--without-photo .asa-cmt-member__content {
    flex: 1 1 auto;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit !important;
    background: var(--asa-member-bg, #ffffff) !important;
}

@media (max-width: 1024px) {
    .asa-cmt-page .asa-cmt-department--without-photo .asa-cmt-member {
        height: var(--asa-dept-text-card-h-t, 150px) !important;
        min-height: var(--asa-dept-text-card-h-t, 150px) !important;
        max-height: var(--asa-dept-text-card-h-t, 150px) !important;
    }
}

@media (max-width: 767px) {
    .asa-cmt-page .asa-cmt-department--without-photo .asa-cmt-member {
        height: var(--asa-dept-text-card-h-m, 140px) !important;
        min-height: var(--asa-dept-text-card-h-m, 140px) !important;
        max-height: var(--asa-dept-text-card-h-m, 140px) !important;
    }
}