/* =========================================================
   SZABLON PRZEPISU — DOMOWY SPICHLERZ
   Wersja dopasowana do docelowej makiety
========================================================= */

/* =========================================================
   UKŁAD STRONY Z PRZEPISEM
========================================================= */

/* DODANO: przy przepisie prawa kolumna znika,
   a treść zajmuje jej miejsce */
.layout.layout-recipe {
    grid-template-columns: 260px minmax(0, 1fr);
}

/* DODANO: zabezpieczenie przed rozszerzaniem siatki przez obrazy */
.layout.layout-recipe .center-column {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background: #fffdf9;
}

/* DODANO: przepis zajmuje całą szerokość środkowej kolumny */
.layout.layout-recipe .single-article {
    width: 100%;
    min-width: 0;
}

/* DODANO: prawy sidebar nie jest używany w widoku przepisu */
.layout.layout-recipe .right-column {
    display: none;
}

/* =========================================================
   GŁÓWNY KONTENER
========================================================= */

.recipe-page {
    width: 100%;
    box-sizing: border-box;
    padding: 28px 32px 34px;
    background: #fffdf9;
    color: #26221e;
    font-family: Arial, Helvetica, sans-serif;
}

/* DODANO: wszystkie elementy przepisu liczą padding do szerokości */
.recipe-page,
.recipe-page * {
    box-sizing: border-box;
}

/* DODANO: nagłówki zgodne z wyglądem makiety */
.recipe-page h1,
.recipe-page h2,
.recipe-page h3 {
    font-family: Georgia, "Times New Roman", serif;
}

/* DODANO: linki przepisu */
.recipe-page a {
    color: inherit;
}

/* =========================================================
   OKRUSZKI NAWIGACYJNE
========================================================= */

.recipe-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    color: #77716a;
    font-size: 13px;
    line-height: 1.4;
}

.recipe-breadcrumbs a {
    color: #77716a;
    text-decoration: none;
}

.recipe-breadcrumbs a:hover {
    color: #a57624;
    text-decoration: underline;
}

.recipe-breadcrumbs > span[aria-hidden="true"] {
    color: #aaa39b;
}

.recipe-breadcrumb-current {
    color: #332f2b;
}

/* =========================================================
   GÓRNA CZĘŚĆ PRZEPISU
========================================================= */

.recipe-top {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
}

/* DODANO: lewa część nagłówka */
.recipe-top-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* DODANO: mniejszy tytuł przepisu, bliższy makiecie */
.recipe-title {
    margin: 0;
    color: #1f1c19;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.8px;
}

/* =========================================================
   OCENA
========================================================= */

.recipe-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.recipe-stars {
    color: #d09a22;
    font-size: 21px;
    letter-spacing: 1px;
    line-height: 1;
}

.recipe-rating-text {
    color: #2e2a26;
    font-size: 14px;
}

/* =========================================================
   KRÓTKI OPIS
========================================================= */

.recipe-short-description {
    margin: 14px 0 0;
    color: #34302c;
    font-size: 15px;
    line-height: 1.65;
}

/* =========================================================
   PARAMETRY PRZEPISU
========================================================= */

.recipe-parameters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

/* DODANO: parametr bez dużego kafelka,
   zgodnie z pierwotną makietą */
.recipe-parameter {
    min-width: 0;
    text-align: center;
}

.recipe-parameter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 7px;
    color: #24211e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 29px;
    line-height: 1;
}

.recipe-parameter-label {
    display: block;
    min-height: 38px;
    color: #37322e;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.recipe-parameter strong {
    display: block;
    margin-top: 4px;
    color: #26211d;
    font-size: 13px;
    line-height: 1.35;
}

/* =========================================================
   PRZYCISKI GÓRNE
========================================================= */

.recipe-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.recipe-print-button,
.recipe-save-button {
    width: auto;
    margin: 0;
    border-radius: 5px;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.recipe-print-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    background: #c3943c;
    border: 1px solid #c3943c;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.recipe-print-button:hover {
    background: #aa7d2b;
    border-color: #aa7d2b;
}

.recipe-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 42px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #c3943c;
    color: #b17f28;
    font-size: 23px;
}

.recipe-save-button:hover {
    background: #fff8e9;
}

/* =========================================================
   ZDJĘCIE GŁÓWNE
========================================================= */

.recipe-main-image {
    width: 100%;
    min-width: 0;
    height: 390px;
    margin: 0;
    overflow: hidden;
    background: #eee8df;
    border-radius: 5px;
}

.recipe-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =========================================================
   SEPARATOR POD NAGŁÓWKIEM
========================================================= */

.recipe-divider {
    width: 100%;
    height: 1px;
    margin: 24px 0 20px;
    background: #e8dfd2;
}

/* =========================================================
   GŁÓWNY UKŁAD TREŚCI
========================================================= */

/* DODANO: węższa kolumna składników,
   dzięki czemu kroki dostają więcej miejsca */
.recipe-content-grid {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

/* DODANO: linia oddzielająca przesunięta bardziej w lewo */
.recipe-left-panel {
    min-width: 0;
    padding-right: 14px;
    border-right: 1px solid #e6ddd1;
}

.recipe-right-panel {
    min-width: 0;
}

/* =========================================================
   WSPÓLNE NAGŁÓWKI SEKCJI
========================================================= */

.recipe-section h2,
.recipe-introduction h2,
.recipe-steps-section > h2,
.recipe-side-box h2,
.recipe-conclusion h2,
.recipe-related h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: #27231f;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.recipe-section h2 > span,
.recipe-introduction h2 > span,
.recipe-steps-section > h2 > span,
.recipe-side-box h2 > span,
.recipe-conclusion h2 > span,
.recipe-related h2 > span {
    color: #c3943c;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
}

/* =========================================================
   SKŁADNIKI
========================================================= */

.recipe-ingredients {
    margin: 0;
}

.recipe-ingredient-group + .recipe-ingredient-group {
    margin-top: 20px;
}

.recipe-ingredient-group h3 {
    margin: 0 0 8px;
    color: #4a4036;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.recipe-ingredient-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recipe-ingredient-group li {
    position: relative;
    margin: 0;
    padding: 5px 0 5px 17px;
    color: #302c28;
    font-size: 14px;
    line-height: 1.48;
}

.recipe-ingredient-group li::before {
    content: "•";
    position: absolute;
    top: 5px;
    left: 2px;
    color: #b98b35;
    font-size: 14px;
    font-weight: 700;
}

/* =========================================================
   WSKAZÓWKI I WARTO WIEDZIEĆ
========================================================= */

.recipe-side-box {
    margin-top: 28px;
    padding: 20px 18px;
    border: 1px solid #eadfce;
    border-radius: 6px;
    background:
        linear-gradient(
            135deg,
            #fffaf0 0%,
            #f8efdf 100%
        );
}

.recipe-side-box h2 {
    font-size: 18px;
}

/* DODANO: usunięcie domyślnych kropek listy */
.recipe-tips-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recipe-tips-box li {
    margin-bottom: 10px;
    color: #36312c;
    font-size: 13px;
    line-height: 1.55;
}

.recipe-tips-box li:last-child {
    margin-bottom: 0;
}

.recipe-knowledge-box dl {
    margin: 0;
}

.recipe-knowledge-box dl > div {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 8px;
    color: #36312c;
    font-size: 13px;
    line-height: 1.45;
}

.recipe-knowledge-box dl > div:last-child {
    margin-bottom: 0;
}

.recipe-knowledge-box dt {
    flex: 0 0 auto;
    font-weight: 700;
}

.recipe-knowledge-box dd {
    margin: 0;
}

/* =========================================================
   WSTĘP
========================================================= */

.recipe-introduction {
    margin: 0;
    padding: 0 0 22px;
    border-bottom: 1px solid #e8dfd2;
}

.recipe-introduction h2 {
    font-size: 20px;
}

.recipe-text {
    color: #312d29;
    font-size: 14px;
    line-height: 1.65;
}

/* =========================================================
   KROKI
========================================================= */

.recipe-steps-section {
    margin-top: 20px;
}

.recipe-steps-list {
    display: flex;
    flex-direction: column;
}

/* DODANO: każdy krok jako poziomy rząd,
   tak jak na makiecie */
.recipe-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 275px;
    gap: 14px;
    align-items: center;
    min-height: 118px;
    padding: 13px 0;
    border-bottom: 1px solid #e8dfd2;
}

.recipe-step:last-child {
    border-bottom: 0;
}

.recipe-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    background: #f1eadb;
    border: 1px solid #e7dcc8;
    border-radius: 50%;
    color: #3b352e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
}

.recipe-step-description {
    min-width: 0;
    align-self: start;
}

.recipe-step-description h3 {
    margin: 0 0 4px;
    color: #292521;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.recipe-step-description p {
    margin: 0;
    color: #302c28;
    font-size: 13px;
    line-height: 1.55;
}

/* DODANO: zdjęcie kroku zachowuje swoje proporcje */
.recipe-step-image {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: #eee8df;
    border-radius: 5px;
}

/* DODANO: brak agresywnego kadrowania zdjęcia */
.recipe-step-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    object-position: center;
}

/* DODANO: krok bez zdjęcia wykorzystuje szerokość opisu */
.recipe-step:not(:has(.recipe-step-image)) {
    grid-template-columns: 34px minmax(0, 1fr);
}

/* =========================================================
   ZAKOŃCZENIE
========================================================= */

.recipe-conclusion {
    margin-top: 30px;
    padding-top: 4px;
}

.recipe-conclusion h2 {
    margin-bottom: 8px;
}

/* =========================================================
   ZOBACZ RÓWNIEŻ
========================================================= */

.recipe-related {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #e8dfd2;
}

.recipe-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.recipe-related-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    min-width: 0;
    min-height: 80px;
    overflow: hidden;
    background: #fbf7ef;
    border: 1px solid #eadfce;
    border-radius: 5px;
    color: #2f2a25;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.recipe-related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(67, 50, 31, 0.10);
}

.recipe-related-card img {
    display: block;
    width: 120px;
    height: 100%;
    min-height: 80px;
    object-fit: cover;
}

.recipe-related-card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 10px 12px;
}

.recipe-related-card strong {
    color: #26221e;
    font-size: 13px;
    line-height: 1.35;
}

.recipe-related-card span {
    margin-top: 8px;
    color: #ae7e28;
    font-size: 12px;
}

/* =========================================================
   KOMENTARZE POD PRZEPISEM
========================================================= */

.layout.layout-recipe #comments {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #e8dfd2;
}

/* =========================================================
   TABLETY
========================================================= */

@media (max-width: 1120px) {
    .recipe-page {
        padding: 24px;
    }

    .recipe-top {
        grid-template-columns: 315px minmax(0, 1fr);
        gap: 22px;
    }

    .recipe-main-image {
        height: 355px;
    }

    .recipe-content-grid {
        grid-template-columns: 255px minmax(0, 1fr);
        gap: 26px;
    }

    .recipe-step {
        grid-template-columns: 34px minmax(0, 1fr) 230px;
    }

    .recipe-related-card {
        grid-template-columns: 95px minmax(0, 1fr);
    }

    .recipe-related-card img {
        width: 95px;
    }
}

/* =========================================================
   MNIEJSZE TABLETY
========================================================= */

@media (max-width: 900px) {
    .layout.layout-recipe {
        grid-template-columns: 1fr;
    }

    /* DODANO: na mniejszych ekranach znika również lewy sidebar strony */
    .layout.layout-recipe > .left-column {
        display: none;
    }

    .recipe-top {
        grid-template-columns: 1fr;
    }

    .recipe-top-content {
        max-width: 620px;
    }

    .recipe-main-image {
        height: 420px;
    }

    .recipe-content-grid {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 22px;
    }

    .recipe-step {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .recipe-step-image {
        grid-column: 2;
        width: 100%;
        height: 230px;
        margin-top: 8px;
    }

    .recipe-related-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   TELEFONY
========================================================= */

@media (max-width: 680px) {
    .recipe-page {
        padding: 18px 15px 26px;
    }

    .recipe-breadcrumbs {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .recipe-title {
        font-size: 38px;
        letter-spacing: -0.8px;
    }

    .recipe-parameters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 10px;
    }

    .recipe-top-actions {
        flex-wrap: wrap;
    }

    .recipe-main-image {
        height: 300px;
    }

    .recipe-content-grid {
        display: block;
    }

    .recipe-left-panel {
        padding-right: 0;
        padding-bottom: 22px;
        border-right: 0;
        border-bottom: 1px solid #e6ddd1;
    }

    .recipe-right-panel {
        margin-top: 24px;
    }

    .recipe-step {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
    }

    .recipe-step-image {
        grid-column: 1 / -1;
        height: 220px;
    }

    .recipe-related-card {
        grid-template-columns: 105px minmax(0, 1fr);
    }

    .recipe-related-card img {
        width: 105px;
    }
}

/* =========================================================
   BARDZO MAŁE TELEFONY
========================================================= */

@media (max-width: 430px) {
    .recipe-title {
        font-size: 30px;
    }

    .recipe-short-description {
        font-size: 14px;
    }

    .recipe-print-button {
        flex: 1 1 auto;
    }

    .recipe-main-image {
        height: 245px;
    }

    .recipe-related-card {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .recipe-related-card img {
        width: 90px;
    }
}

/* =========================================================
   DRUKOWANIE PRZEPISU
========================================================= */

@media print {
    .banner-spichlerz,
    .main-nav-spichlerz,
    .seasonal-decorations,
    .left-column,
    .right-column,
    .recipe-breadcrumbs,
    .recipe-rating,
    .recipe-top-actions,
    .recipe-related,
    #comments,
    .site-footer {
        display: none !important;
    }

    body {
        background: #ffffff !important;
    }

    .layout.layout-recipe {
        display: block !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .layout.layout-recipe .center-column,
    .recipe-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .recipe-top {
        grid-template-columns: 42% 58%;
        gap: 20px;
    }

    .recipe-main-image {
        height: 310px;
    }

    .recipe-content-grid {
        grid-template-columns: 30% 70%;
        gap: 22px;
    }

    .recipe-step {
        break-inside: avoid;
    }

    .recipe-side-box,
    .recipe-main-image,
    .recipe-step-image {
        break-inside: avoid;
    }
}