/* Peace by Youth (PY) | AEO and institutional knowledge platform.
 * PY Corporate Brand Identity 2026 | https://py.org.pk
 */
.py-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    transform: translateY(-160%);
    z-index: 20000;
    background: #fff;
    color: #004f86;
    padding: 12px 20px;
    border: 2px solid #004f86;
    border-radius: 6px
}

.py-skip-link:focus {
    transform: none
}

.py-seo-resource {
    max-width: 960px;
    margin: auto
}

.py-seo-resource h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.15
}

.py-seo-resource p,
.py-seo-resource li,
.py-seo-resource dd {
    line-height: 1.75
}

.py-seo-facts>div {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) 3fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #d9e2ea
}

.py-seo-facts dt {
    font-weight: 700
}

.py-seo-facts dd {
    margin: 0
}

.py-seo-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0
}

.py-seo-links a {
    padding: 10px 16px;
    border: 1px solid #0071bc;
    border-radius: 8px
}

.py-seo-citation {
    overflow-wrap: anywhere;
    padding: 20px;
    background: #f7f7f3;
    border-left: 4px solid #0071bc
}

.py-seo-resource details {
    padding: 15px 0;
    border-bottom: 1px solid #d9e2ea
}

.py-seo-resource summary {
    cursor: pointer;
    font-weight: 700
}

.py-seo-resource a:focus-visible,
.py-seo-resource summary:focus-visible {
    outline: 3px solid #0071bc;
    outline-offset: 4px
}

@media(max-width:560px) {
    .py-seo-facts>div {
        grid-template-columns: 1fr;
        gap: 4px
    }
}

/* Prevent intrinsic grid widths and decorative shapes from creating mobile scroll. */
@media(max-width:640px) {

    .pyh-hero-copy,
    .pypd-hero-copy {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere
    }

    .py-profile-map-img {
        max-width: 100%;
        height: auto;
        min-width: 0
    }

    .pyh-hero,
    .py-profile-intro,
    .py-partners-hero,
    .py-work-hero,
    .pypd-hero {
        overflow-x: clip
    }

    .pypd-actions,
    .pyh-hero-ctas {
        flex-wrap: wrap
    }
}

body {
    overflow-x: clip
}

@media(max-width:640px) {

    .pyh-hero-grid,
    .pypd-hero-inner {
        grid-template-columns: minmax(0, 1fr) !important
    }

    .pyh-hero-grid>*,
    .pypd-hero-inner>* {
        min-width: 0
    }

    .pyh-hero-copy,
    .pypd-hero-copy {
        width: 100%;
        box-sizing: border-box
    }
}

@media(max-width:640px) {
    .pyh-hero-title {
        font-size: clamp(2rem, 10vw, 2.75rem);
        overflow-wrap: normal
    }
}

@media(max-width:640px) {
    .brand-token-table {
        display: block;
        max-width: 100%;
        overflow-x: auto
    }
}

@media(max-width:640px) {
    .brand-callout {
        min-width: 0;
        overflow-wrap: anywhere
    }

    .brand-callout code {
        white-space: normal;
        overflow-wrap: anywhere
    }
}

/* Institutional documents use the established PY blue, navy, teal and gold. */
.py-seo-document {
    background: linear-gradient(180deg, #f3f7fa 0%, #fff 460px);
    padding-block: 56px 72px
}

.py-seo-document-header {
    position: relative;
    padding: 32px;
    border: 1px solid #e4e7ec;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(56, 54, 88, .08);
    margin: 28px 0 32px;
    border-top: 5px solid #0071bc
}

.py-seo-document-header:after {
    content: "";
    display: block;
    width: 120px;
    height: 5px;
    margin-top: 22px;
    background: linear-gradient(90deg, #0071bc, #169e9a, #f5b700);
    border-radius: 99px
}

.py-seo-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #383658;
    font-weight: 800;
    margin-bottom: 28px
}

.py-seo-lockup img {
    width: 64px;
    height: 48px;
    object-fit: contain
}

.py-seo-lockup small {
    display: block;
    color: #475467;
    font-size: .8rem;
    font-weight: 400;
    margin-top: 3px
}

.py-seo-eyebrow {
    font: 800 .78rem/1.5 "Roboto", "Lato", sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #0071bc;
    margin: 0 0 12px
}

.py-seo-document-header h1 {
    color: #383658;
    margin: 0;
    max-width: 840px;
    font-family: var(--font-heading, "Lato", sans-serif)
}

.py-seo-resource h2 {
    color: #383658;
    margin-top: 36px
}

.py-seo-resource h3 {
    color: #00588f
}

.py-seo-facts {
    margin: 20px 0 28px;
    border-top: 2px solid #169e9a
}

.py-seo-facts dt {
    color: #383658
}

.py-seo-resource details {
    background: #f3f7fa;
    padding: 18px 20px;
    margin: 12px 0;
    border: 1px solid #e4e7ec;
    border-left: 4px solid #169e9a;
    border-radius: 12px
}

.py-seo-resource details[open] {
    background: #fff;
    border-left-color: #0071bc
}

.py-seo-resource summary {
    color: #383658
}

.py-seo-links a {
    background: #0071bc;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s
}

.py-seo-links a:hover {
    background: #00588f
}

.py-seo-citation {
    background: #f3f7fa;
    border-left-color: #169e9a;
    border-radius: 0 12px 12px 0;
    color: #383658
}

.py-seo-evidence {
    background: #f3f7fa;
    border-top: 1px solid #e4e7ec
}

@media(max-width:560px) {
    .py-seo-document {
        padding-block: 32px 48px
    }

    .py-seo-document-header {
        padding: 24px 20px
    }

    .py-seo-lockup {
        gap: 10px
    }

    .py-seo-lockup small {
        font-size: .75rem
    }

    .py-seo-document-header h1 {
        font-size: clamp(1.8rem, 8vw, 2.4rem)
    }
}

@media(prefers-reduced-motion:reduce) {
    .py-seo-links a {
        transition: none
    }
}

.py-seo-document .py-breadcrumb,
.py-seo-document .py-breadcrumb a {
    color: #383658;
}

.py-seo-document .py-breadcrumb a:hover {
    color: #0071bc;
}

/* Keep long restored database content within its mobile grid columns. */
@media (max-width: 640px) {
    .pyw-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pyw-hero-grid>*,
    .pypd-facts,
    .pypd-fact-list>div {
        min-width: 0;
        max-width: 100%;
    }

    .pyw-hero h1,
    .pypd-facts,
    .yc-hero h1 {
        overflow-wrap: anywhere;
    }

    .py-profile-corner-pattern {
        right: 0;
    }
}

html {
    overflow-x: clip;
}

@media (max-width: 640px) {

    .pypd-layout,
    .yc-detailgrid,
    .yc-content {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pypd-layout>*,
    .yc-detailgrid>*,
    .yc-content>* {
        min-width: 0;
        max-width: 100%;
    }

    .yc-detailhero h1 {
        overflow-wrap: anywhere;
    }
}

/* Resource pages reuse the existing management hero and PY publication panels. */
.py-resource-page .mgmt-hero h1 {
    overflow-wrap: anywhere;
}

.py-resource-content {
    max-width: 1160px;
}

.py-resource-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.5vw, 42px);
    color: #383658;
    margin: 44px 0 20px;
    line-height: 1.15;
}

.py-resource-content h2:first-child {
    margin-top: 0;
}

.py-resource-content h3 {
    font-family: var(--font-heading);
    color: #0071bc;
    margin: 28px 0 14px;
}

.py-resource-content p,
.py-resource-content li,
.py-resource-content dd {
    line-height: 1.8;
}

.py-resource-content ul {
    padding-left: 24px;
}

.py-resource-content li {
    margin-bottom: 12px;
}

.py-resource-content a:not(.py-btn) {
    color: #0071bc;
    text-underline-offset: 4px;
}

.py-resource-content details {
    border-bottom: 1px solid #dce7ef;
    padding: 20px 0;
}

.py-resource-content summary {
    color: #383658;
    font-weight: 800;
    cursor: pointer;
}

.py-resource-actions a {
    color: #fff !important;
}

.py-publication-evidence {
    margin: 0;
    background: #f7f7f3;
    color: #383658;
}

.py-publication-evidence .pypubd-panel {
    padding: clamp(24px, 4vw, 48px);
}

.py-publication-evidence .pypubd-panel h2 {
    font-family: var(--font-heading, "Bristone PY", sans-serif);
    color: #383658;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.2;
    margin: 18px 0 24px;
}

.py-publication-evidence .pypubd-panel h3 {
    color: #0071bc;
    font-size: 22px;
    line-height: 1.3;
    margin-top: 28px;
}

.py-publication-evidence p,
.py-publication-evidence li,
.py-publication-evidence dd {
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #383658;
}

.py-publication-evidence a {
    color: #0071bc;
}

.py-publication-evidence .section-label {
    color: #169e9a;
}

.py-publication-evidence .py-seo-facts>div {
    min-width: 0;
}

.py-publication-evidence dd {
    overflow-wrap: anywhere;
}

@supports not (overflow: clip) {

    html,
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 640px) {
    .py-resource-content h2 {
        margin-top: 32px;
    }

    .py-resource-page .mgmt-hero h1 {
        font-size: clamp(36px, 11vw, 58px);
        line-height: 1;
    }
}

.py-resource-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.py-publication-categories { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }

/* PY photo heroes: an actual image layer with the large title in front. */
.py-image-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 620px; }
.py-image-hero::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; transform: none; opacity: 1; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(22,29,64,.94) 0%, rgba(22,29,64,.80) 38%, rgba(22,29,64,.20) 75%, rgba(22,29,64,.10) 100%), linear-gradient(0deg, rgba(22,29,64,.55), transparent 50%); }
.py-image-hero > .pyh-hero-visual,
.py-image-hero > .pypd-hero-media,
.py-image-hero > .pynd-cover,
.py-image-hero > .pypubd-cover,
.py-image-hero > .don-hero-visual { position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; transform: none; box-shadow: none; pointer-events: none; }
.py-image-hero .pyh-hero-media-board,
.py-image-hero .pyh-hero-photo,
.py-image-hero .don-hero-photo { position: absolute; inset: 0; height: 100%; min-height: 0; width: 100%; margin: 0; border: 0; border-radius: 0; transform: none; box-shadow: none; }
.py-image-hero > .pyh-hero-visual img,
.py-image-hero > .pypd-hero-media img,
.py-image-hero > .pynd-cover img,
.py-image-hero > .pypubd-cover img,
.py-image-hero > .don-hero-visual img { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; object-position: center 35%; filter: none; }
/* Publication artwork remains complete instead of cropping a portrait cover. */
.py-image-hero > .pypubd-cover img { object-fit: contain; object-position: right center; background: #253e68; }
.py-image-hero .pypubd-hero-bg,
.py-image-hero .pynd-hero-bg,
.py-image-hero .pyh-hero-signal,
.py-image-hero .don-hero-badge,
.py-image-hero .pyh-hero-media-board::before,
.py-image-hero .pyh-hero-media-board::after { display: none; }
.py-image-hero .pyh-hero-shell,
.py-image-hero .pypd-hero-inner,
.py-image-hero .pynd-hero-inner,
.py-image-hero .pypubd-hero-inner,
.py-image-hero > .py-container { position: relative; z-index: 2; }
.py-image-hero .pyh-hero-grid,
.py-image-hero .pypd-hero-grid,
.py-image-hero .pynd-hero-grid,
.py-image-hero .pypubd-hero-grid,
.py-image-hero .don-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.py-image-hero .pyh-hero-copy,
.py-image-hero .pypd-hero-copy,
.py-image-hero .pynd-hero-copy,
.py-image-hero .pypubd-hero-copy,
.py-image-hero .don-hero-copy { max-width: 920px; min-width: 0; }
.py-image-hero h1 { color: #fff; -webkit-text-fill-color: #fff; -webkit-text-stroke: 0; font-size: clamp(44px, 6.7vw, 96px); line-height: 1.04; overflow-wrap: break-word; text-shadow: 0 3px 22px rgba(0,0,0,.28); }
.py-image-hero .pyh-hero-title { font-size: clamp(52px, 7.8vw, 112px); max-width: 960px; }
.py-image-hero .pyh-hero-pattern, .py-image-hero .pyh-hero-ribbon { opacity: .16; }
.py-image-hero .pyh-hero-statbar { margin-top: 40px; }
@media (max-width: 640px) {
 .py-image-hero { min-height: 560px; }
 .py-image-hero::after { background: linear-gradient(90deg, rgba(22,29,64,.90), rgba(22,29,64,.48)), linear-gradient(0deg, rgba(22,29,64,.58), transparent 65%); }
 .py-image-hero h1, .py-image-hero .pyh-hero-title { font-size: clamp(36px, 10.5vw, 64px); line-height: 1.08; }
 .py-image-hero .pyh-hero-shell { padding-top: 64px; padding-bottom: 28px; }
 .py-image-hero .pyh-hero-statbar { margin-top: 32px; }
 .py-image-hero > .pyh-hero-visual img { object-position: 58% center; }
}

.yc-detailhero.py-image-hero > .yc-hero-image { position: absolute; inset: 0; z-index: 0; margin: 0; }
.yc-detailhero.py-image-hero > .yc-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.yc-detailhero.py-image-hero > .yc-wrap { position: relative; z-index: 2; }
.yc-detailhero.py-image-hero h1 { color: #fff; font-size: clamp(36px, 6.7vw, 96px); line-height: 1.08; }
.yc-detailhero.py-image-hero .yc-detailgrid > div p, .yc-detailhero.py-image-hero .yc-eyebrow, .yc-detailhero.py-image-hero .yc-breadcrumb a { color: #fff; }

/* Fit the whole headline words instead of splitting EMPOWERING on small screens. */
.py-image-hero .pyh-hero-copy { max-width: 1120px; }
.py-image-hero .pyh-hero-title { width: 100%; max-width: 1120px; margin: 24px 0 22px; font-size: clamp(48px, 6.4vw, 92px); overflow-wrap: normal; word-break: normal; text-wrap: balance; }
@media (max-width: 640px) {
 .py-image-hero .pyh-hero-title { font-size: clamp(27px, 8.2vw, 52px); }
 .py-image-hero .pyh-hero-statbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
 .py-image-hero .pyh-hero-stat { padding: 14px 8px; }
 .py-image-hero .pyh-hero-stat strong { font-size: 24px; }
 .py-image-hero .pyh-hero-stat > span { font-size: 10px; letter-spacing: 0; overflow-wrap: break-word; }
}

.don-hero.py-image-hero > .py-container { position: relative; z-index: 2; }