/* CSS */
/* Ścieżka: /css/o-nas.css */

:root {
    --about-clr-primary: #f26522;
    --about-clr-primary-dark: #c84d17;
    --about-clr-dark: #1f1b18;
    --about-clr-light: #ffffff;
    --about-clr-bg: #faf9f6;
    --about-clr-text: #4c453f;
    --about-clr-muted: #625a52;
    --about-clr-border: rgba(0, 0, 0, 0.07);
    --about-container-max: 1200px;
    --about-gap: 1.3rem;
    --about-radius: 22px;
    --about-shadow: 0 8px 26px rgba(0, 0, 0, 0.055);
    --about-shadow-hover: 0 16px 36px rgba(31, 27, 24, 0.12);
    --about-transition: all 0.24s ease;
}

.dapal-about-page {
    background: #fff;
    color: var(--about-clr-text);
}

.dapal-about-page [class$="__container"] {
    max-width: var(--about-container-max);
    margin: 0 auto;
    padding: 0 var(--about-gap);
}

.dapal-about-page a {
    color: var(--about-clr-primary);
    text-decoration: none;
    transition: opacity 0.2s;
    outline-offset: 4px;
    border-radius: 2px;
}

.dapal-about-page a:hover { opacity: 0.8; }
.about-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.2rem, 8vw, 5.4rem) 0 clamp(2.4rem, 6vw, 4.4rem);
    text-align: center;
    background:
        radial-gradient(circle at 12% 18%, rgba(242, 101, 34, 0.13), transparent 32%),
        radial-gradient(circle at 88% 22%, rgba(137, 199, 137, 0.20), transparent 30%),
        linear-gradient(135deg, #fffaf6 0%, #faf9f6 52%, #ffffff 100%);
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(242, 101, 34, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 101, 34, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.34;
    pointer-events: none;
}

.about-hero__container {
    position: relative;
    z-index: 1;
}

.about-hero__title {
    max-width: 930px;
    margin: 0 auto;
    color: var(--about-clr-dark);
    font-size: clamp(2.15rem, 5.6vw, 4.1rem);
    line-height: 1.03;
    letter-spacing: -0.055em;
}

.about-hero__subtitle {
    max-width: 840px;
    margin: 1.25rem auto 0;
    color: #312d29;
    font-size: clamp(1.02rem, 1.8vw, 1.24rem);
    line-height: 1.65;
    font-weight: 600;
}

.about-name-section {
    padding: clamp(2.2rem, 5.5vw, 4.2rem) 0 clamp(1.8rem, 4.5vw, 3rem);
    background:
        radial-gradient(circle at 8% 12%, rgba(242, 101, 34, .08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fffaf6 100%);
}

.dapal-about-page .about-name-section__container {
    max-width: 1080px;
}

.about-name-section__content {
    position: relative;
    overflow: hidden;
    padding: clamp(1.55rem, 3.4vw, 2.65rem);
    text-align: center;
    border: 1px solid rgba(242, 101, 34, .16);
    border-radius: 26px;
    background:
        radial-gradient(circle at 9% 18%, rgba(242, 101, 34, .09), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(137, 199, 137, .12), transparent 28%),
        linear-gradient(135deg, #fffaf6 0%, #ffffff 74%);
    box-shadow: 0 10px 30px rgba(31, 27, 24, .055);
}

.about-name-section__logo {
    display: block;
    width: clamp(210px, 28vw, 340px);
    height: auto;
    margin: 0 auto clamp(1rem, 2.5vw, 1.45rem);
}

.about-name-section__phrase {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: .12em;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
    color: var(--about-clr-dark);
    font-size: clamp(1.55rem, 3vw, 2.65rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.045em;
    text-align: center;
    white-space: nowrap;
}

.about-name-section__word {
    white-space: nowrap;
}

.about-name-section__initial {
    color: var(--about-clr-primary);
    font-weight: 950;
    letter-spacing: -.04em;
    text-shadow: 0 5px 18px rgba(242, 101, 34, .18);
}

.about-name-section__amp {
    color: var(--about-clr-primary-dark);
    font-weight: 950;
}

.about-name-section__tagline {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 0;
    padding: .48rem .82rem;
    border-radius: 999px;
    background: rgba(242, 101, 34, .10);
    color: var(--about-clr-primary-dark);
    font-size: clamp(.98rem, 1.6vw, 1.12rem);
    font-weight: 850;
    line-height: 1.35;
}

.about-name-section__desc {
    max-width: 850px;
    margin: 1rem auto 0;
    color: var(--about-clr-text);
    font-size: 1.04rem;
    line-height: 1.68;
}

.about-name-section__desc strong {
    color: var(--about-clr-dark);
    font-weight: 850;
}

/* Sekcja Timeline */
.timeline-section {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 8vw, 5.6rem) 0;
    background:
        linear-gradient(180deg, #ffffff 0%, #faf9f6 100%);
}

.timeline-section__title {
    max-width: 860px;
    margin: 0 auto clamp(2.6rem, 6vw, 4.7rem);
    text-align: center;
    color: var(--about-clr-dark);
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 850;
}

.timeline { position: relative; max-width: var(--about-container-max); margin: 0 auto; }
.timeline::after { content: ''; position: absolute; width: 3px; background: linear-gradient(180deg, rgba(242,101,34,.08), rgba(242,101,34,.38), rgba(242,101,34,.08)); top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; }
.timeline-item { position: relative; margin-bottom: 4rem; width: 100%; }
.timeline-item::after { content: ''; position: absolute; width: 18px; height: 18px; top: 2rem; left: 50%; transform: translateX(-50%); background-color: #fffaf6; border: 4px solid var(--about-clr-primary); border-radius: 50%; z-index: 2; box-shadow: 0 0 0 8px rgba(242,101,34,.08); }
.timeline-item__body { display: flex; justify-content: space-between; width: 100%; gap: 4rem; align-items: flex-start; }
.timeline-item__text-content, .timeline-item__gallery { flex: 1; min-width: 0; }
.timeline-item:nth-child(even) .timeline-item__body { flex-direction: row-reverse; }
.timeline-item__text-content { padding: 1.65rem; background-color: var(--about-clr-light); border: 1px solid var(--about-clr-border); border-radius: var(--about-radius); box-shadow: var(--about-shadow); }
.timeline-item__text-content time { display: inline-block; background: rgba(242,101,34,.11); color: var(--about-clr-primary-dark); padding: 0.34rem 0.78rem; border-radius: 50px; font-weight: 850; margin-bottom: 1rem; font-size: 0.875rem; }
.timeline-item__title { font-size: 1.5rem; color: var(--about-clr-dark); margin-bottom: 0.75rem; letter-spacing: -.015em; }
.timeline-item__text-content p { line-height: 1.68; color: var(--about-clr-text); }
.timeline-item__gallery { margin: 0; background-color: transparent; }
.timeline-item__gallery--two-images { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.timeline-item__gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.3s ease; border-radius: var(--about-radius); box-shadow: var(--about-shadow); border: 1px solid rgba(0,0,0,.05); background-color: var(--about-clr-light); }
.timeline-item__gallery img.img--portrait { aspect-ratio: unset; object-fit: unset; height: auto; }
.timeline-item__gallery--two-images img { height: 100%; }
.timeline-item__gallery img:hover { transform: scale(1.05); }


.timeline-item--today {
    margin-bottom: 0;
}

.timeline-item--today .timeline-item__body {
    justify-content: center;
}

.timeline-item--today .timeline-item__text-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    border-color: rgba(242, 101, 34, .18);
    background:
        radial-gradient(circle at 12% 18%, rgba(242, 101, 34, .10), transparent 30%),
        linear-gradient(135deg, #fffaf6 0%, #ffffff 72%);
}

.timeline-item--today .about-home-why-cta__button {
    margin-top: 1.15rem;
    font-size: clamp(1.02rem, 1.35vw, 1.16rem);
    padding: .95rem 1.35rem;
}

.timeline-item--today .timeline-item__title {
    font-size: clamp(1.55rem, 3vw, 2.25rem);
}



.about-archive-video {
    width: min(100%, 920px);
    margin: 1.25rem auto 0;
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border: 1px solid rgba(242, 101, 34, .14);
    border-radius: 24px;
    background:
        radial-gradient(circle at 10% 12%, rgba(242,101,34,.10), transparent 30%),
        linear-gradient(135deg, #fffaf6 0%, #ffffff 78%);
    box-shadow: var(--about-shadow);
}

.about-archive-video__intro {
    max-width: 760px;
    margin: 0 auto 1rem;
    text-align: center;
}

.about-archive-video__intro h4 {
    margin: 0;
    color: var(--about-clr-dark);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -.025em;
}

.about-archive-video__intro p:not(.about-home-why-cta__kicker) {
    margin: .65rem 0 0;
    color: var(--about-clr-text);
    line-height: 1.62;
}

.dapal-video-embed {
    width: min(100%, 920px);
    margin: 0 auto;
    padding: clamp(.6rem, 1.8vw, .85rem);
    border: 1px solid rgba(31, 27, 24, .08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(31, 27, 24, .06);
}

.dapal-video-embed iframe {
    display: block;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 16px;
    background: #1f1b18;
}


.timeline-item__gallery--archive {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.timeline-item__gallery--archive .about-archive-video {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(.85rem, 2vw, 1rem);
    border-radius: 22px;
}

.timeline-item__gallery--archive .about-archive-video__intro {
    max-width: 100%;
    margin-bottom: .85rem;
}

.timeline-item__gallery--archive .about-archive-video__intro h4 {
    font-size: clamp(1.05rem, 1.55vw, 1.28rem);
}

.timeline-item__gallery--archive .about-archive-video__intro p:not(.about-home-why-cta__kicker) {
    font-size: .92rem;
    line-height: 1.55;
}

.timeline-item__gallery--archive .dapal-video-embed {
    width: 100%;
    max-width: none;
    padding: .45rem;
}

.timeline-item__gallery--archive .dapal-video-embed iframe {
    max-width: none;
    border-radius: 14px;
}

/* Link do sekcji „Dlaczego DAPAL®” na stronie głównej */
.about-home-why-cta {
    padding: clamp(2.8rem, 6vw, 4.8rem) 0 clamp(3.2rem, 7vw, 5.4rem);
    background: #fff;
}

.dapal-about-page .about-home-why-cta__container {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(1.35rem, 3.2vw, 2.35rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid rgba(242, 101, 34, .16);
    border-radius: 26px;
    background:
        radial-gradient(circle at 8% 16%, rgba(242,101,34,.11), transparent 28%),
        linear-gradient(135deg, #fffaf6 0%, #ffffff 68%);
    box-shadow: 0 10px 30px rgba(31, 27, 24, .06);
    text-align: left;
}

.about-home-why-cta__content {
    max-width: 760px;
}

.about-home-why-cta__kicker {
    margin: 0 0 .55rem;
    color: var(--about-clr-primary-dark);
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.about-home-why-cta h2 {
    margin: 0;
    color: var(--about-clr-dark);
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.about-home-why-cta p {
    max-width: 760px;
    margin: .8rem 0 0;
    color: var(--about-clr-text);
    font-size: 1.02rem;
    line-height: 1.65;
}

.dapal-about-page .about-home-why-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 52px;
    padding: 14px 24px;
    border: 2px solid var(--about-clr-primary);
    border-radius: 999px !important;
    background: var(--about-clr-primary);
    color: #fff !important;
    font-weight: 850;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(242, 101, 34, .28);
    overflow: hidden;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dapal-about-page .about-home-why-cta__button svg {
    flex: 0 0 auto;
}

.dapal-about-page .about-home-why-cta__button:hover,
.dapal-about-page .about-home-why-cta__button:focus {
    background: #fd7e3b;
    border-color: #fd7e3b;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(242, 101, 34, .40);
    opacity: 1;
}

/* Media query dla osi czasu (bez zmian) */
@media (max-width: 992px) {
    .timeline::after { left: 15px; }
    .timeline-item::after { left: 15px; }
    .timeline-item__body, .timeline-item:nth-child(even) .timeline-item__body { display: block; width: auto; padding-left: calc(15px + 1rem); gap: 0; }
    .timeline-item__gallery { margin-top: 1.5rem; }
    .timeline-item__gallery img, .timeline-item__gallery img.img--portrait { width: 100%; height: auto; aspect-ratio: unset; object-fit: unset; }
    .timeline-item__gallery--two-images { gap: 1rem; }
}

/* === Mobile-first responsive details on O FIRMIE === */
.about-mobile-summary {
    display: none;
    padding: 0 0 1.5rem;
    background: #fff;
}

.about-mobile-summary h2 {
    margin: 0 0 1rem;
    color: var(--about-clr-dark);
    font-size: 1.45rem;
    text-align: center;
}

.about-mobile-summary__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.about-mobile-summary__grid article {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--about-shadow);
}

.about-mobile-summary__grid strong {
    color: var(--about-clr-dark);
    font-size: .98rem;
}

.about-mobile-summary__grid span {
    color: var(--about-clr-text);
    font-size: .9rem;
    line-height: 1.45;
}

.about-responsive-details summary {
    cursor: pointer;
    list-style: none;
}

.about-responsive-details summary::-webkit-details-marker {
    display: none;
}

.about-responsive-details summary::after {
    content: "＋";
    margin-left: auto;
    color: var(--about-clr-primary);
    font-weight: 900;
}

.about-responsive-details[open] summary::after {
    content: "−";
}

.timeline-item > summary {
    display: none;
}


@media (max-width: 700px) {
    .about-hero {
        padding: 2.4rem 0 1.35rem;
    }

    .about-hero__title {
        font-size: 2.05rem;
    }

    .about-hero__subtitle {
        font-size: 1rem;
        line-height: 1.58;
    }

    .about-name-section {
        padding: 1.35rem 0 1.5rem;
    }

    .about-name-section__content {
        padding: 1.15rem;
        border-radius: 22px;
    }

    .about-name-section__logo {
        width: 150px;
        margin-bottom: .9rem;
    }

    .about-name-section__phrase {
        font-size: clamp(1.65rem, 9vw, 2.35rem);
        gap: .06em .2em;
    }

    .about-name-section__tagline {
        margin-top: .85rem;
        font-size: .94rem;
        line-height: 1.35;
    }

    .about-name-section__desc {
        font-size: .96rem;
        line-height: 1.58;
    }

    .about-mobile-summary {
        display: block;
    }

    .about-mobile-summary__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timeline-section {
        padding: 2.6rem 0;
    }

    .timeline::after,
    .timeline-item::after {
        display: none;
    }

    .timeline-item {
        margin-bottom: .9rem;
        border: 1px solid var(--about-clr-border);
        border-radius: var(--about-radius);
        background: #fff;
        box-shadow: var(--about-shadow);
        overflow: hidden;
    }

    .timeline-item > summary {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: 1rem;
        color: var(--about-clr-dark);
        font-weight: 800;
        line-height: 1.3;
    }

    .timeline-item > summary time {
        display: inline-flex;
        flex-shrink: 0;
        padding: .25rem .55rem;
        border-radius: 999px;
        background: rgba(242, 101, 34, .12);
        color: var(--about-clr-primary);
        font-size: .86rem;
        font-weight: 850;
    }

    .timeline-item__body,
    .timeline-item:nth-child(even) .timeline-item__body {
        display: block;
        width: auto;
        padding: 0;
    }

    .timeline-item__text-content {
        padding: 0 1rem 1rem;
        box-shadow: none;
        border-radius: 0;
    }

    .timeline-item__text-content time,
    .timeline-item__text-content .timeline-item__title {
        display: none;
    }

    .timeline-item__text-content p {
        margin: 0;
        font-size: .96rem;
        line-height: 1.58;
    }

    .timeline-item--today .timeline-item__text-content {
        text-align: left;
    }

    .timeline-item--today .about-home-why-cta__button {
        margin-top: 1rem;
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .timeline-item__gallery {
        margin: 0 1rem 1rem;
    }

    .timeline-item__gallery--archive {
        gap: .8rem;
    }

    .timeline-item__gallery--archive .about-archive-video {
        padding: .85rem;
        border-radius: 18px;
    }

    .timeline-item__gallery--archive .about-archive-video__intro {
        text-align: left;
    }

    .timeline-item__gallery--archive .dapal-video-embed {
        padding: .35rem;
        border-radius: 16px;
    }

    .timeline-item__gallery--archive .dapal-video-embed iframe {
        border-radius: 12px;
    }


    .about-home-why-cta {
        padding: 2.3rem 0 3rem;
    }

    .dapal-about-page .about-home-why-cta__container {
        grid-template-columns: 1fr;
        padding: 1.2rem;
        border-radius: 22px;
        text-align: left;
    }

    .about-home-why-cta p {
        font-size: .96rem;
        line-height: 1.58;
    }

    .dapal-about-page .about-home-why-cta__button {
        width: 100%;
        white-space: normal;
        text-align: center;
        border-radius: 24px !important;
    }
}


.dapal-about-page .animate-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .42s ease-out, transform .42s ease-out;
}

.dapal-about-page .animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .dapal-about-page .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* DAPAL name phrase one-line mobile correction */
@media (max-width: 700px) {
    .about-name-section__logo {
        width: clamp(190px, 58vw, 260px);
    }

    .about-name-section__phrase {
        font-size: clamp(1.05rem, 5.1vw, 1.55rem);
        gap: .1em;
        letter-spacing: -.035em;
    }
}


/* v12 — o firmie: zaufanie i aktualna specjalizacja dostają spokojny akcent niebiesko-szałwiowy */
.timeline-item--today .timeline-item__text-content {
    border-color: rgba(13, 105, 134, .16);
    background:
        radial-gradient(circle at 12% 18%, rgba(13, 105, 134, .10), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(226, 97, 30, .055), transparent 26%),
        linear-gradient(135deg, #f4fafb 0%, #ffffff 72%);
}

.about-archive-video {
    background:
        radial-gradient(circle at 10% 12%, rgba(226,101,34,.08), transparent 30%),
        linear-gradient(135deg, #fffaf6 0%, #ffffff 78%);
}


/* v18 — mobile: szersza karta nazwy marki i większy oddech przed "DAPAL® w skrócie" */
@media (max-width: 700px) {
  .dapal-about-page .about-name-section__container {
    max-width: none;
    padding-left: .72rem;
    padding-right: .72rem;
  }

  .about-name-section {
    padding-top: 1.55rem;
    padding-bottom: 1.85rem;
  }

  .about-name-section__content {
    padding: 1.05rem .85rem 1.15rem;
    border-radius: 22px;
  }

  .about-name-section__phrase {
    flex-wrap: wrap;
    row-gap: .08em;
    column-gap: .18em;
    font-size: clamp(1.38rem, 7.2vw, 2.02rem);
    line-height: 1.08;
    white-space: normal;
  }

  .about-name-section__word,
  .about-name-section__amp {
    white-space: nowrap;
  }

  .about-mobile-summary {
    padding-top: 1.15rem;
  }

  .about-mobile-summary h2 {
    margin-bottom: 1.15rem;
  }
}