/* ==========================================================
   Leadership and Board page only
   ----------------------------------------------------------
   Loaded by resources/views/leadership-board.blade.php via
   @push('styles'), so it lands after site.css.
   ========================================================== */


/* ----------------------------------------------------------
   FOUNDER'S MESSAGE
   ----------------------------------------------------------
   The old page carried this block twice, once per breakpoint.
   It is written once here: the portrait floats beside the text
   on desktop and sits above it, centred, on mobile.
   ---------------------------------------------------------- */
.founder-message {
    padding: 10px;
}

.founder-message .founder-photo {
    float: left;
    margin: 0 17px 1px 0;
}

.founder-message .signature {
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .founder-message {
        text-align: center;
    }

    .founder-message .founder-photo {
        float: none;
        display: block;
        margin: 0 auto 15px;
    }

    .founder-message .signature {
        text-align: center;
    }
}


/* ----------------------------------------------------------
   TABS
   ---------------------------------------------------------- */
.list-item-down {
    position: relative;
    padding: 10px;
    background-color: #302c51;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin-bottom: 10px;
}

/* The little arrow under the active tab */
.list-item-down:after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #302c51 transparent transparent;
}

.nav-pills .nav-link {
    color: #ff6015;
}

.nav-pills .nav-link:hover {
    color: #dc4e0d;
}

.nav-pills .nav-link.active {
    background-color: transparent;
}


/* ----------------------------------------------------------
   TRUSTEE AND EXECUTIVE PORTRAITS
   ----------------------------------------------------------
   Sized the way zindagi-trust sizes them: a trustee portrait is
   fixed at 200px, an executive portrait fills its column with
   square corners. All the artwork is 200x200, so the rows stay
   even without cropping anything.
   ---------------------------------------------------------- */
.profile-photo .top img {
    display: block;
    height: auto;
    margin: 0 auto;
}

.profile-photo.trustee .top img {
    width: 200px;
    max-width: 100%;
}

.profile-photo.executive .top img {
    width: 100%;
    border-radius: 0;
}

.profile-photo .bottom {
    padding: 0;
    margin-top: 10px;
    text-align: center;
}

.profile-photo .bottom h6 {
    margin: 0;
}

.profile-photo .bottom span {
    font-size: 14px;
}

/* Two lines reserved for an executive's role. "Chief Academic Officer" fits
   on one line where the other two wrap onto a second, which left Zohra's card
   a line shorter than the two beside it. Reserving the space here keeps the
   three even whatever title is typed in later. */
.profile-photo.executive .bottom span {
    display: block;
    line-height: 1.5;
    min-height: 3em;
}

/* A trustee's biography: full width beside the portrait on desktop,
   centred underneath it on mobile. One block, not two. */
.profile-bio {
    font-size: 0.875em;
    padding: 1rem;
}

@media only screen and (max-width: 767px) {
    .profile-bio {
        text-align: center;
        padding: 0 0 1.5rem;
    }
}


/* ----------------------------------------------------------
   TEAM GRID
   ----------------------------------------------------------
   The photographs are 202x230 and border-radius: 50% on a
   non-square image draws an oval — which is how zindagi-trust
   shows them, so it is kept. The pictures are all the same size,
   so the ovals match each other.
   ---------------------------------------------------------- */
.our-team {
    padding: 20px 15px 30px;
    background: #fff;
    border-radius: 15px;
    text-align: center;
}

.our-team .pic {
    display: inline-block;
    background: #fff;
    padding: 10px;
    margin-bottom: 25px;
    transition: all 0.5s ease 0s;
}

.our-team:hover .pic {
    background: #ff6015;
    border-radius: 50%;
}

.our-team .pic img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.our-team .title {
    display: block;
    font-weight: 600;
    color: #2e282a;
    text-transform: uppercase;
    margin: 0 0 7px;
}

.our-team .post {
    display: block;
    color: #ff6015;
    text-transform: capitalize;
    margin-bottom: 15px;
}

/* Two lines reserved for the job title, so a one-line title does not leave
   its card shorter than the rest */
.our-team .post {
    min-height: 3em;
}

@media only screen and (max-width: 990px) {
    .our-team {
        margin-bottom: 30px;
    }
}


/* ----------------------------------------------------------
   TEAM TOGGLE BUTTONS
   ---------------------------------------------------------- */
.btn-orange {
    background-color: #ff6015;
    color: white;
    border: none;
}

.btn-orange:hover {
    background-color: #e65100;
    color: white;
}

.btn-toggle.active {
    background-color: #302c51 !important;
    color: white !important;
}



/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Everything below applies only while the page carries the
   premium theme (body.home-premium, set by the @section in
   the Blade file). Drop that one line and the page returns
   to the look it had before.
   ========================================================== */


/* ----------------------------------------------------------
   THE TEAM TOGGLE — the selected one has to look selected
   ----------------------------------------------------------
   .btn-toggle.active sets background-color: #302c51 to mark
   the open team. The theme gives .btn-orange a gradient
   background-IMAGE, and an image paints over a colour, so
   under the theme both buttons rendered the same orange and
   there was no way to tell which team was showing.

   Clearing the image lets the purple through, and an orange
   rim keeps it reading as part of the same pair.
   ---------------------------------------------------------- */
body.home-premium .btn-toggle.active,
body.home-premium .btn-toggle.active:hover {
    background-image: none;
    background-color: #302c51 !important;

    /* The orange rim is a box-shadow spread, not a border: a border would be
       counted in the button's size and make the selected one wider than the
       other. A shadow is drawn outside the box and changes no geometry. */
    box-shadow: 0 0 0 2px var(--accent), 0 8px 20px -10px rgba(255, 96, 21, 0.7);
}

/* ----------------------------------------------------------
   AND ITS SHAPE, WHICH THE THEME SHOULD NOT HAVE CHANGED
   ----------------------------------------------------------
   These are .btn-sm: 144x33 with a 0.2rem radius. The theme
   turns every .btn-orange into its 999px pill at 10px/30px and
   15px/700 type, which took them to 195x47 — a different
   control from the one the page was laid out around.

   The size and shape go back to Bootstrap's. The gradient and
   the hover — the sweep, the lift, the glow — are left alone,
   since those were the part worth keeping.
   ---------------------------------------------------------- */
body.home-premium .btn-toggle {
    padding: 6px 12px;
    border: 0;
    border-radius: 0.2rem;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
}


/* ----------------------------------------------------------
   THE TEAM CARDS
   ----------------------------------------------------------
   A portrait, a name and a role on bare background. They
   become the theme's card — hairline border, the theme's
   radius and shadow, and the same lift its cards use
   elsewhere — so the grid reads as a set of cards rather than
   a sheet of floating photographs.
   ---------------------------------------------------------- */
body.home-premium .our-team {
    height: 100%;
    padding: 26px 18px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}

body.home-premium .our-team:hover {
    transform: translateY(-7px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

/* A ring around the portrait, which the orange hover already in this file
   then fills. */
body.home-premium .our-team .pic {
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 50%;
}

body.home-premium .our-team h6 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.home-premium .our-team .post {
    font-size: 14px;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   SPACE BETWEEN THE ROWS OF THE TEAM GRID
   ----------------------------------------------------------
   .equal-cards makes every column a flex item so the cards
   match heights, but it adds no vertical spacing: with four
   per row the second row sat directly on the first. The
   margin matches the 24px Bootstrap already puts between the
   columns, so the gaps match in both directions.
   ---------------------------------------------------------- */
body.home-premium .team-section .equal-cards > [class*="col-"] {
    margin-bottom: 24px;
}


/* ----------------------------------------------------------
   THE ORANGE RULES
   ----------------------------------------------------------
   An inline style draws each as a 2px line across its whole
   container. The theme's own headings sit over a short centred
   bar instead; these match them. The inline style has to be
   beaten with !important — that is what inline means.
   ---------------------------------------------------------- */
body.home-premium .lb-rule {
    width: 72px;
    height: 4px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 0 !important;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
}


/* ----------------------------------------------------------
   THE FOUNDER'S MESSAGE PANEL
   ----------------------------------------------------------
   Bootstrap's .shadow and .rounded give it a 4px radius and a
   flat drop shadow. The theme's own radius and depth bring it
   into line with the cards further down the page.
   ---------------------------------------------------------- */
body.home-premium .media-body.shadow.rounded {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}


/* ----------------------------------------------------------
   THE PORTRAITS
   ----------------------------------------------------------
   Three sets of photographs on this page, each framed
   differently: a trustee's is 200px with only its top corners
   rounded, an executive's fills its column with square
   corners, a team member's is a circle. They are given one
   treatment so the page reads as one set of people.

   object-fit: cover on all of them. They were object-fit: fill,
   which stretches anything that is not exactly square to the
   box instead of cropping to it — every portrait here happens
   to be square today, so nothing looks wrong, but the first
   one uploaded at another ratio would come out distorted.
   ---------------------------------------------------------- */
body.home-premium .profile-photo .top img,
body.home-premium .our-team .pic img {
    object-fit: cover;
    object-position: top center;
}

/* A trustee's portrait, rounded to match the card it sits in rather than
   square along the bottom, and lifted off it with a soft shadow. */
body.home-premium .profile-photo.trustee .top img,
body.home-premium .profile-photo.executive .top img {
    border-radius: var(--radius);
    box-shadow: 0 10px 26px -12px rgba(22, 19, 46, 0.45);
}

/* An executive's fills its column, so it is given a consistent height
   instead of whatever the file happens to be. */
body.home-premium .profile-photo.executive .top img {
    aspect-ratio: 1 / 1;
    height: auto;
}

/* The card around a portrait gets the same treatment as the team cards
   further down, so both halves of the page match. */
body.home-premium .profile-photo {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}

body.home-premium .profile-photo:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

/* The circular team portrait gets a ring in the brand colour at a tenth
   strength, which the orange hover already in this file then fills. */
body.home-premium .our-team .pic {
    border-color: var(--accent-tint);
    box-shadow: 0 8px 22px -12px rgba(22, 19, 46, 0.4);
}