/* =============================================================================
   custom.css - Jazda po pijaku
   Style dla elementow DODANYCH w motywie WordPress, ktorych nie bylo w
   statycznym projekcie: bloki uniwersalne (media-text, icon-text-columns,
   hero-slider, faq, contact-form + Contact Form 7, galeria, mapa) oraz
   breadcrumbs. NIE modyfikowac style.css - wszystko nowe trafia tutaj.
   Mobile-first: ponizej 992px, jeden blok @media (min-width:992px) na koncu.
   ============================================================================= */

/* ------------------------------ BREADCRUMBS ------------------------------ */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--gold-100);
}
.breadcrumbs a { text-decoration: underline; text-underline-offset: 2px; }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs span[aria-hidden] { opacity: .55; }

/* ------------------------------- MEDIA TEXT ------------------------------ */
.media-text { padding-block: var(--section-y); background: var(--white); }
.media-text.is-cream { background: var(--cream-50); }
.media-text.is-gold { background: var(--gold-100); }
.media-text.is-dark { background: var(--green-900); }
.media-text.is-dark h2, .media-text.is-dark h3 { color: var(--white); }
.media-text.is-dark p { color: var(--gold-100); }

.media-text__grid { display: flex; flex-direction: column; gap: 32px; }

.media-text__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gold-100); }
.media-text__media img { width: 100%; height: 100%; object-fit: cover; }

.media-text__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-900); }
.media-text__video img { width: 100%; height: 100%; object-fit: cover; }

.media-text__content-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.media-text.is-outside .media-text__content-inner { padding-inline: var(--gutter); }
.media-text h2 { font-size: var(--fs-section-heading); }

.media-text .btn { width: auto; min-width: 200px; }

.media-text__eyebrow { display: flex; align-items: center; gap: 12px; }
.media-text__eyebrow .icon { color: var(--green-900); }
.media-text.is-dark .media-text__eyebrow .icon { color: var(--gold-500); }

.media-text.has-details .media-text__media { aspect-ratio: 342 / 334; background: var(--line-200); }
.media-text.has-details .media-text__media img { object-position: center 20%; }
.media-text.has-details .media-text__content-inner { gap: 28px; }
.media-text.has-details .wysiwyg { font-size: clamp(15px, 1.1111vw, 16px); line-height: 1.5; color: var(--ink-600); }

.media-text__highlights { width: 100%; }
.media-text__highlight {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding-block: 18px;
    border-top: 1px solid var(--line-200);
}
.media-text__highlight-top { display: flex; align-items: center; gap: 16px; }
.media-text__highlight-top .icon { color: var(--green-900); }
.media-text__highlight-value { font-size: 13px; font-weight: 700; color: var(--green-900); }
.media-text__highlight-text { font-size: 12px; color: var(--ink-600); }

.media-text__quote { width: 100%; padding: 24px 22px; background: var(--gold-100); }
.media-text__quote blockquote p {
    font-family: var(--font-display);
    font-size: 27px;
    font-style: italic;
    font-weight: 400;
    line-height: var(--lh-display);
    color: var(--green-900);
}
.media-text__quote figcaption { margin-top: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--green-700); }
.media-text.is-dark .media-text__highlight { border-color: rgba(201, 162, 39, .4); }
.media-text.is-dark .media-text__highlight-top .icon,
.media-text.is-dark .media-text__highlight-value { color: var(--gold-500); }
.media-text.is-dark .media-text__highlight-text { color: var(--gold-100); }
.media-text.is-dark .media-text__quote p { color: var(--green-900); }

/* h2 uzyte jako naglowek slajdu Hero Slider - te same proporcje co .hero__copy h1 */
.hero-slider .hero__copy h2 {
    font-size: clamp(36px, 4.6528vw, 67px);
    line-height: .96;
    color: var(--white);
}

/* ---------------------------- HERO SLIDER --------------------------------- */
.hero-slider { background: var(--green-900); }
.hero-slider__viewport { position: relative; }
.hero-slider__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider__slide { flex: 0 0 100%; scroll-snap-align: start; }
.hero-slider .scrollbar {
    max-width: calc(var(--max) - var(--gutter) * 2);
    margin-inline: auto;
    margin-top: 0;
}
.hero-slider .scrollbar.is-invert { background: rgba(239, 228, 190, .25); }
.hero-slider .scrollbar.is-invert .scrollbar__thumb { background: var(--gold-500); }

/* ------------------------- ICON TEXT COLUMNS ------------------------------ */
.icon-columns { padding-block: var(--section-y); background: var(--cream-50); }
.icon-columns__head { display: flex; flex-direction: column; gap: 15px; margin-bottom: 32px; max-width: 700px; }
.icon-columns__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.icon-columns__item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.icon-columns__icon { display: inline-flex; color: var(--gold-500); }
.icon-columns__item p { font-size: 14px; color: var(--ink-600); }

/* -------------------------------- FAQ ------------------------------------- */
.faq-block { padding-block: var(--section-y); background: var(--white); }
.faq-block.is-cream { background: var(--cream-50); }
.faq-block.is-dark { background: var(--green-900); }
.faq-block.is-dark h2 { color: var(--white); }

.faq-block__head { display: flex; flex-direction: column; gap: 15px; margin-bottom: 28px; max-width: 700px; }
.faq-block__head h2 { font-size: var(--fs-section-heading); }

.faq-block__list { display: flex; flex-direction: column; }
.faq-block__item { border-top: 1px solid var(--line-200); }
.faq-block__item:last-child { border-bottom: 1px solid var(--line-200); }
.faq-block.is-dark .faq-block__item { border-color: rgba(201, 162, 39, .4); }

.faq-block__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding-block: 20px;
    text-align: left;
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 700;
    color: var(--green-900);
    background: none;
    border: 0;
    cursor: pointer;
}
.faq-block.is-dark .faq-block__q { color: var(--white); }
.faq-block__sign { flex: none; display: inline-flex; color: var(--gold-500); transition: transform var(--t-base); }
.faq-block__q[aria-expanded="true"] .faq-block__sign { transform: rotate(180deg); }

.faq-block__a { max-height: 0; overflow: hidden; transition: max-height var(--t-base); }
.faq-block__a .wysiwyg { padding-bottom: 20px; font-size: 15px; }

/* ---------------------------- CONTACT FORM (blok) -------------------------
   Generyczny blok "Formularz kontaktowy" (2 kolumny: tekst + CF7). Rozne od
   dedykowanej sekcji homepage ".contact" (ta zostaje bez zmian).           */
.contact-form { padding-block: var(--section-y); background: var(--white); }
.contact-form__inner { display: flex; flex-direction: column; gap: 32px; }
.contact-form__head { display: flex; flex-direction: column; gap: 15px; }

.contact-form__body .wpcf7-form { display: grid; gap: 20px; }
.contact-form__body .wpcf7-form > p { margin: 0; }
.contact-form__body .cf7-row { display: flex; flex-direction: column; gap: 20px; }

.contact-form__body label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--green-900);
}

.contact-form__body .wpcf7-form-control {
    width: 100%;
    padding: 15px 16px;
    font-family: var(--font-text);
    font-size: 15px;
    color: var(--ink-900);
    background: var(--white);
    border: 1px solid var(--line-200);
    appearance: none;
}
.contact-form__body textarea.wpcf7-form-control { min-height: 150px; resize: vertical; }
.contact-form__body .wpcf7-form-control:hover { border-color: var(--ink-600); }
.contact-form__body .wpcf7-form-control:focus {
    outline: none;
    border-color: var(--green-900);
    box-shadow: 0 0 0 3px rgba(15, 61, 46, .12);
}
.contact-form__body .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; color: #b3261e; }
.contact-form__body .wpcf7-form-control.wpcf7-not-valid { border-color: #b3261e; background: #fdf6f5; }

.contact-form__body .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    min-width: 0;
}
.contact-form__body .wpcf7-acceptance label {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-600);
}
.contact-form__body .wpcf7-acceptance {
    display: block;
    width: 100%;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    appearance: auto;
}
.contact-form__body .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.contact-form__body .wpcf7-acceptance .wpcf7-list-item-label { min-width: 0; overflow-wrap: anywhere; }
.contact-form__body .wpcf7-acceptance input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--green-900); }
.contact-form__body .wpcf7-acceptance a { text-decoration: underline; color: var(--green-700); }

.contact-form__body input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    width: 100%;
    padding: 14px 24px;
    font-family: var(--font-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--green-900);
    background: var(--gold-500);
    border: 0;
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.contact-form__body input[type="submit"]:hover,
.contact-form__body input[type="submit"]:focus-visible { background: var(--bronze-500); color: var(--white); }
.contact-form__body .wpcf7-spinner { margin-left: 12px; }

.contact-form__body .wpcf7-response-output {
    margin: 4px 0 0;
    padding: 14px 16px;
    font-size: 14px;
    border: 1px solid var(--line-200);
    color: var(--ink-600);
}
.contact-form__body form.sent .wpcf7-response-output { background: var(--gold-100); border-color: var(--gold-500); color: var(--green-900); }
.contact-form__body form.invalid .wpcf7-response-output,
.contact-form__body form.failed .wpcf7-response-output,
.contact-form__body form.aborted .wpcf7-response-output,
.contact-form__body form.spam .wpcf7-response-output { background: #fdf6f5; border-color: #b3261e; color: #b3261e; }

.contact-form__placeholder { padding: 20px; background: var(--cream-50); border-left: 3px solid var(--gold-500); font-size: 14px; color: var(--ink-600); }

/* ------------------------------- GALERIA ---------------------------------- */
.gallery-block { padding-block: var(--section-y); background: var(--white); }
.gallery-block__intro { margin-bottom: 28px; max-width: 780px; }
.gallery-block__intro > :is(h1, h2):first-child { font-size: var(--fs-section-heading); }
.gallery-block__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.gallery-block__track::-webkit-scrollbar { display: none; }
.gallery-block__item { flex: 0 0 246px; scroll-snap-align: start; margin: 0; }
.gallery-block__link { display: block; overflow: hidden; }
.gallery-block__item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform var(--t-slow);
}
.gallery-block__link:hover img,
.gallery-block__link:focus-visible img { transform: scale(1.04); }
.gallery-block__item figcaption { margin-top: 8px; font-size: 12px; color: var(--ink-600); }
.gallery-block .scrollbar { margin-top: 16px; }

/* --------------------------------- MAPA ------------------------------------ */
.map-block { padding-block: var(--section-y); background: var(--cream-50); }
.map-block h2 { margin-bottom: 24px; font-size: var(--fs-section-heading); }
.map-block__frame { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gold-100); }
.map-block__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-block__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 24px;
    text-align: center;
    color: var(--green-900);
}
.map-block__placeholder .icon { color: var(--gold-500); }

/* =============================================================================
   DESKTOP 992px+
   ============================================================================= */
@media (min-width: 992px) {

    .media-text__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
    .media-text.is-right .media-text__media { order: 2; }
    .media-text.is-outside .media-text__grid { gap: 0; }
    .media-text.is-outside .media-text__content-inner { padding-inline: clamp(40px, 5vw, 72px); }
    .media-text.is-outside .media-text__media { aspect-ratio: auto; height: 100%; align-self: stretch; }

    .media-text.has-details .media-text__grid { grid-template-columns: 500fr 676fr; gap: 16px clamp(40px, 5vw, 72px); }
    .media-text.has-details .media-text__media { aspect-ratio: 500 / 560; height: auto; align-self: center; }
    .media-text.has-details .media-text__content-inner { gap: 16px; }
    .media-text.has-details .wysiwyg { max-width: 640px; }
    .media-text__highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
    .media-text__highlight {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        min-height: 73px;
        padding: 14px 18px;
        border-top: 0;
        border-right: 1px solid var(--line-200);
    }
    .media-text__highlight-top { gap: 10px; }
    .media-text__highlight-text { font-size: 11px; }
    .media-text__quote { padding: 32px 30px 26px; }
    .media-text__quote blockquote p { font-size: clamp(27px, 2.2222vw, 32px); }
    .media-text__quote figcaption { margin-top: 12px; font-size: 12px; }

    .icon-columns__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
    .icon-columns__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
    .icon-columns__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

    .faq-block__q { font-size: 17px; }

    .contact-form__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
    .contact-form__body .cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .contact-form__body input[type="submit"] { width: auto; min-width: 220px; }

    .gallery-block__item { flex-basis: calc((100% - 16px * 3) / 4); }
}