/* Graphics are extracted from the supplied PODSTRANICA.png reference. */
:root {
    --yf-blue: #0818ff;
    --yf-pink: #ff009b;
    --yf-paper: #f8f6f3;
    --yf-footer-height: 126px;
    --yf-header-height: 100px;
}
.yf-shell, .yf-footer {
    color: #111;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.yf-shell {
    padding-top: var(--yf-header-height);
    padding-bottom: var(--yf-footer-height);
    background: var(--yf-paper);
}
.yf-shell:focus { outline: none; }
.yf-poster {
    max-width: 1200px;
    margin: 0 auto;
    container-type: inline-size;
    overflow: hidden;
}
.yf-hero { margin: 0; padding: 0; line-height: 0; }
.yf-hero img { display: block; width: 100%; height: auto; }
.yf-intro {
    position: relative;
    padding: 1.1% 7.3% 3.3%;
    background: url('../img/youthfluence/intro-decoration.png') right top / 27.34375% auto no-repeat;
}
.yf-intro p {
    position: relative;
    max-width: 73%;
    margin: 0;
    font-size: clamp(17px, 2.34cqw, 28.1px);
    line-height: 1.3;
    letter-spacing: normal;
}
.yf-shell strong { font-weight: 800; }
.yf-cards {
    display: grid;
    grid-template-columns: 447fr 443fr;
    gap: 2.95%;
    margin: 0 5.27%;
}
.yf-card {
    position: relative;
    display: block;
    isolation: isolate;
    aspect-ratio: 447 / 433;
    border-radius: 18px;
    transition: transform .3s ease, box-shadow .3s ease;
    -webkit-tap-highlight-color: transparent;
}
.yf-card-art { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; pointer-events: none; }
.yf-card .yf-card-layer, .yf-card-scene {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.yf-card-scene { transform-origin: 50% 64%; }
.yf-card-circle { transform-origin: 49% 51%; }
.yf-card-brush { transform-origin: 50% 78%; }
.yf-card-underline { transform-origin: 50% 90%; }
.yf-card-arrow {
    position: absolute;
    left: 75.2%;
    top: 69.7%;
    display: grid;
    place-items: center;
    width: 14%;
    aspect-ratio: 1;
    border-radius: 50%;
    color: #111;
    background: #fff;
    transition: background-color .25s ease, box-shadow .25s ease, transform .35s ease;
}
.yf-card--pink .yf-card-arrow { left: 76.2%; }
.yf-card-arrow svg {
    display: block;
    width: 52%;
    height: 52%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.yf-card--blue { --yf-card-color: #0818ff; }
.yf-card--pink { --yf-card-color: #ff009b; aspect-ratio: 443 / 433; }
@media (hover: hover) {
    a.yf-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px #16162626; }
    a.yf-card:hover .yf-card-scene { transform: translateY(-1%) scale(1.025); }
    a.yf-card:hover .yf-card-circle { transform: translate(-1%, -1%) scale(1.09); }
    a.yf-card:hover .yf-card-brush { transform: rotate(-1deg) scale(1.015); }
    a.yf-card:hover .yf-card-title { transform: translateY(-.5%); }
    a.yf-card:hover .yf-card-underline { transform: scaleX(1.12) rotate(-1deg); }
    a.yf-card:hover .yf-card-arrow { background: #ffe51b; box-shadow: 0 5px 14px #0000001a; transform: scale(1.06); }
    a.yf-card:hover .yf-card-arrow svg { transform: translateX(8%); }
}
.yf-card:focus-visible { outline: 4px solid var(--yf-card-color); outline-offset: 5px; }
.yf-card:focus-visible .yf-card-arrow { background: #ffe51b; }
.yf-card:focus-visible .yf-card-arrow svg { transform: translateX(8%); }
a.yf-card:active { transform: scale(.98); }
.yf-outro { position: relative; min-height: 39.75cqw; }
.yf-outro p {
    position: relative;
    z-index: 1;
    width: 76%;
    padding-top: 3.5%;
    margin: 0 0 0 7.3%;
    font-size: clamp(16px, 1.95cqw, 23.4px);
    line-height: 1.36;
    letter-spacing: normal;
}
.yf-community {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: auto;
    /* Exclude the raster paragraph; the same copy is live HTML above. */
    clip-path: polygon(0 35%, 75.8% 35%, 75.8% 22%, 100% 22%, 100% 100%, 0 100%);
    mask-image: linear-gradient(to bottom, transparent 34%, #000 44%), linear-gradient(to bottom, transparent 22%, #000 27%);
    mask-size: 100% 100%, 24.2% 100%;
    mask-position: left top, right top;
    mask-repeat: no-repeat;
    pointer-events: none;
}
.yf-footer {
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 17px 0 calc(17px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dedee4;
    background: #fff;
}
.yf-footer-inner {
    display: grid;
    grid-template-columns: 32% 20% 48%;
    align-items: center;
    max-width: 1100px;
    width: 90%;
    margin: auto;
}
.yf-funder { padding-right: 14%; }
.yf-funder img { width: 100%; max-width: 280px; height: auto; }
.yf-suma {
    display: flex;
    align-items: center;
    justify-content: center;
    border-inline: 1px solid #77768a;
    min-height: 70px;
}
.yf-suma img { width: 80px; height: 80px; object-fit: contain; }
.yf-footer p { margin: 0; padding-left: 9%; color: #444258; font-size: 12px; line-height: 1.55; }
.yf-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    transform: translateY(-160%);
    padding: 10px 18px;
    background: #fff;
    color: #111;
}
.yf-skip-link:focus { transform: none; }
.yf-detail { --yf-accent: var(--yf-blue); }
.yf-detail--pink { --yf-accent: #c9007c; }
.yf-detail-inner { width: min(1100px, 88%); margin: auto; padding: 30px 0 55px; }
.yf-detail-heading { display: grid; grid-template-columns: 1fr 250px; align-items: center; gap: 35px; padding: 38px 0; }
.yf-eyebrow { margin: 0 0 12px; color: var(--yf-accent); font-size: 17px; font-weight: 800; }
.yf-detail h1 { margin: 0; color: #111; font-size: clamp(34px, 5vw, 64px); line-height: 1.08; font-weight: 800; letter-spacing: -.045em; }
.yf-title-stroke { display: block; margin-top: 22px; width: 145px; height: 10px; background: #ffe61c; border-radius: 40%; transform: rotate(-4deg); }
.yf-detail-heading > .yf-card { width: 100%; border-radius: 16px; transform: rotate(2deg); }
.yf-article { padding: 38px clamp(22px, 5vw, 70px); border-radius: 22px; background: #fff; font-size: 18px; line-height: 1.8; }
.yf-article h2 { margin: 42px 0 18px; font-size: clamp(24px, 3vw, 33px); line-height: 1.25; letter-spacing: -.035em; color: var(--yf-accent); font-weight: 800; }
.yf-article h2:first-child { margin-top: 0; }
.yf-article h3 { margin: 28px 0 12px; color: #111; font-size: 21px; line-height: 1.4; font-weight: 800; }
.yf-article p { margin: 0 0 20px; }
.yf-article p:last-child { margin-bottom: 0; }
.yf-article ul { list-style: disc outside; padding-left: 24px; margin: 0 0 24px; }
.yf-article li { padding-left: 6px; margin-bottom: 9px; }
.yf-article ul > li { list-style: disc outside; }
.yf-article li::marker { color: var(--yf-accent); }
.yf-related { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-top: 30px; line-height: 1.5; }
.yf-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 100%;
    min-height: 60px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.yf-nav-button--back { color: var(--yf-accent); background: #fff; border-color: #dfdde7; }
.yf-nav-button--next { color: #fff; background: var(--yf-accent); box-shadow: 0 5px 16px #18143814; margin-left: auto; }
.yf-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    background: #f3f1fa;
    transition: transform .2s ease;
}
.yf-nav-arrow svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.yf-nav-button--next .yf-nav-arrow { background: #ffffff26; }
.yf-nav-button--back:hover { color: var(--yf-accent); }
.yf-nav-button--next:hover { color: #fff; }
@media (hover: hover) {
    .yf-nav-button:hover { transform: translateY(-3px); box-shadow: 0 9px 22px #1814381a; border-color: var(--yf-accent); }
    .yf-nav-button--back:hover .yf-nav-arrow { transform: translateX(-3px); }
    .yf-nav-button--next:hover .yf-nav-arrow { transform: translateX(3px); }
}
.yf-nav-button:active { transform: translateY(0); }
.yf-related a:focus-visible, .yf-suma:focus-visible { outline: 3px solid var(--yf-accent, var(--yf-blue)); outline-offset: 5px; }
@media (max-width: 767px) {
    :root { --yf-footer-height: 156px; --yf-header-height: 86px; }
    .yf-intro { padding-top: 3%; padding-bottom: 5%; }
    .yf-intro p { max-width: 85%; }
    .yf-outro { min-height: 48cqw; }
    .yf-outro p { width: 82%; padding-top: 5%; }
    .yf-desktop-break { display: none; }
    .yf-footer { padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
    .yf-footer-inner { grid-template-columns: 1fr 95px; gap: 7px 18px; width: 90%; max-width: 520px; }
    .yf-funder { padding: 0; }
    .yf-funder img { max-width: 200px; max-height: 54px; width: auto; }
    .yf-suma { min-height: 51px; border-right: 0; }
    .yf-suma img { width: 53px; height: 53px; }
    .yf-footer p { grid-column: 1 / -1; padding: 0; font-size: 10px; line-height: 1.45; }
    .yf-detail-heading { grid-template-columns: 1fr 140px; gap: 20px; }
    .yf-detail-inner { width: 91%; }
    .yf-article { font-size: 16px; line-height: 1.75; }
}
@media (max-width: 540px) {
    .yf-hero { width: 130%; max-width: none; }
    .yf-intro { padding: 5% 7% 7%; background: none; }
    .yf-intro p { max-width: none; font-size: 18px; line-height: 1.5; letter-spacing: -.02em; }
    .yf-cards { grid-template-columns: 1fr; gap: 22px; margin: 0 7%; }
    .yf-card { border-radius: 16px; }
    .yf-outro { min-height: 0; padding: 7% 7% 0; }
    .yf-outro p { width: auto; margin: 0; padding: 0; font-size: 17px; line-height: 1.55; letter-spacing: -.02em; }
    .yf-community { position: relative; display: block; width: 116.28%; max-width: none; margin: -5% -8.14% 0; }
    .yf-detail-heading { grid-template-columns: 1fr; padding: 30px 0; }
    .yf-detail-heading > .yf-card { display: none; }
    .yf-detail h1 { max-width: 100%; }
    .yf-related { flex-direction: column; gap: 18px; }
    .yf-nav-button { width: 100%; justify-content: space-between; padding: 12px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .yf-card { transition: none; }
    a.yf-card:hover, a.yf-card:active { transform: none; }
    .yf-card .yf-card-layer, .yf-card-scene, .yf-card-arrow, .yf-card-arrow svg { transition: none; }
    a.yf-card:hover .yf-card-layer, a.yf-card:hover .yf-card-scene, a.yf-card:hover .yf-card-arrow,
    a.yf-card:hover .yf-card-arrow svg, .yf-card:focus-visible .yf-card-arrow svg { transform: none; }
    .yf-nav-button, .yf-nav-arrow { transition: none; }
    .yf-nav-button:hover, .yf-nav-button:hover .yf-nav-arrow { transform: none; }
}
@media print {
    header, .yf-skip-link, .yf-related { display: none !important; }
    .yf-shell { padding: 0; }
    .yf-footer { position: static; }
    .yf-article { padding: 0; }
    .yf-detail-heading { grid-template-columns: 1fr; }
    .yf-detail-heading > .yf-card { display: none; }
}