/* Jasikan Diocese — Institutional Pages */

/* ==========================================================
   24. INSTITUTIONAL WORDPRESS PAGES
   ========================================================== */

.page-template-default .site-main {
    padding-top: clamp(
        52px,
        6vw,
        82px
    );

    padding-bottom: clamp(
        64px,
        8vw,
        104px
    );
}


/* ----------------------------------------------------------
   Page shell
   ---------------------------------------------------------- */

.institutional-page {
    width: 100%;
}


/* ----------------------------------------------------------
   Page header
   ---------------------------------------------------------- */

.institutional-page__header {
    max-width: 900px;

    margin-bottom: clamp(
        30px,
        5vw,
        48px
    );
}

.institutional-page__eyebrow {
    margin: 0 0 8px;

    color: var(--diocese-gold-dark);

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.institutional-page__title {
    margin: 0;

    color: var(--diocese-primary-dark);

    font-family: var(--font-heading);

    font-size: clamp(
        2.4rem,
        5vw,
        4rem
    );

    line-height: 1.08;

    letter-spacing: -0.025em;
}

.institutional-page__title-accent {
    width: 78px;
    height: 4px;

    margin-top: 20px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--diocese-primary),
            var(--diocese-gold)
        );
}


/* ----------------------------------------------------------
   Featured image
   ---------------------------------------------------------- */

.institutional-page__featured-image {
    width: 100%;

    margin: 0 0 clamp(
        32px,
        5vw,
        52px
    );

    overflow: hidden;

    border:
        1px solid var(--diocese-border);

    border-radius: var(--radius-large);

    background: var(--diocese-light);

    box-shadow: var(--shadow-small);
}

.institutional-page__featured-image img {
    width: 100%;
    height: auto;

    display: block;

    max-height: 560px;

    object-fit: cover;
}


/* ----------------------------------------------------------
   Content layout
   ---------------------------------------------------------- */

.institutional-page__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 820px)
        minmax(0, 1fr);

    gap: clamp(
        42px,
        7vw,
        88px
    );

    align-items: start;
}

.institutional-page__content {
    min-width: 0;

    color: var(--diocese-text);

    font-size: 1.02rem;
    line-height: 1.8;
}

.institutional-page__content > *:first-child {
    margin-top: 0;
}

.institutional-page__content > *:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   Content typography
   ---------------------------------------------------------- */

.institutional-page__content h2 {
    margin-top: 2.2em;
    margin-bottom: 0.75em;

    color: var(--diocese-primary-dark);

    font-size: clamp(
        1.65rem,
        3vw,
        2.2rem
    );
}

.institutional-page__content h3 {
    margin-top: 1.9em;
    margin-bottom: 0.65em;

    color: var(--diocese-primary-dark);
}

.institutional-page__content h4 {
    margin-top: 1.6em;

    color: var(--diocese-primary);
}

.institutional-page__content p {
    margin-bottom: 1.35rem;
}

.institutional-page__content strong {
    color: var(--diocese-primary-deep);
}

.institutional-page__content a {
    font-weight: 600;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(23, 107, 50, 0.3);

    text-underline-offset: 3px;
}

.institutional-page__content a:hover {
    text-decoration-color:
        var(--diocese-gold);
}


/* ----------------------------------------------------------
   Lists
   ---------------------------------------------------------- */

.institutional-page__content ul,
.institutional-page__content ol {
    margin-top: 0;
    margin-bottom: 1.5rem;

    padding-left: 1.4rem;
}

.institutional-page__content li {
    margin-bottom: 0.5rem;
}

.institutional-page__content li::marker {
    color: var(--diocese-primary);
}


/* ----------------------------------------------------------
   Blockquotes
   ---------------------------------------------------------- */

.institutional-page__content blockquote {
    margin:
        2rem 0;

    padding:
        22px 26px;

    border-left:
        4px solid var(--diocese-gold);

    border-radius:
        0 var(--radius-medium)
        var(--radius-medium) 0;

    background:
        var(--diocese-gold-soft);

    color: var(--diocese-primary-deep);

    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 1.7;
}

.institutional-page__content blockquote p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   Tables
   ---------------------------------------------------------- */

.institutional-page__content table {
    width: 100%;

    margin:
        2rem 0;

    border-collapse: collapse;

    background:
        var(--diocese-white);

    border:
        1px solid var(--diocese-border);
}

.institutional-page__content th,
.institutional-page__content td {
    padding:
        12px 14px;

    border:
        1px solid var(--diocese-border);

    text-align: left;
    vertical-align: top;
}

.institutional-page__content th {
    background:
        var(--diocese-primary-soft);

    color:
        var(--diocese-primary-dark);

    font-weight: 700;
}


/* ----------------------------------------------------------
   WordPress image alignment
   ---------------------------------------------------------- */

.institutional-page__content .alignleft {
    float: left;

    margin:
        0.35rem
        1.5rem
        1rem
        0;
}

.institutional-page__content .alignright {
    float: right;

    margin:
        0.35rem
        0
        1rem
        1.5rem;
}

.institutional-page__content .aligncenter {
    display: block;

    margin-right: auto;
    margin-left: auto;
}


/* ----------------------------------------------------------
   Page links / multi-page content
   ---------------------------------------------------------- */

.page-links {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 2rem;
    padding-top: 1.5rem;

    border-top:
        1px solid var(--diocese-border);
}

.page-links__number {
    min-width: 38px;
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    border:
        1px solid var(--diocese-border);

    border-radius:
        var(--radius-small);
}

/* ==========================================================
   25. INSTITUTIONAL PAGE RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .institutional-page__layout {
        grid-template-columns: 1fr;
    }

    .institutional-page__content {
        max-width: 800px;
    }
}


@media (max-width: 600px) {

    .institutional-page__title {
        font-size: clamp(
            2rem,
            10vw,
            2.75rem
        );
    }

    .institutional-page__featured-image {
        border-radius:
            var(--radius-medium);
    }

    .institutional-page__content {
        font-size: 1rem;
    }

    .institutional-page__content blockquote {
        padding:
            18px 20px;
    }

    .institutional-page__content .alignleft,
    .institutional-page__content .alignright {
        float: none;

        display: block;

        margin:
            1.25rem auto;
    }

    .institutional-page__content table {
        font-size: 0.9rem;
    }
}