.recipe-detail {
    padding: 7rem 2.5rem 4rem;
    min-height: 100vh;
    background: var(--color-bg);
}

.recipe-detail--inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* Full-bleed photo with a gradient scrim carrying the source link, title, and
   average rating directly on top of it. Everything else (actions, meta,
   tags, description) lives in the plain-block .recipe-detail--info below,
   not a side column next to the image anymore. */
.recipe-detail--hero {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.recipe-detail--info {
    margin-bottom: 2.5rem;
}

.recipe-detail--info-panel {
    border: 1px solid var(--color-accent-soft);
    border-radius: 10px;
    padding: 1.6rem 1.85rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.recipe-detail--back {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 1.25rem;
}

.recipe-detail--hero-image {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.recipe-detail--image-placeholder {
    background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent) 100%);
}

.recipe-detail--hero-scrim {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem 2.25rem;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-scrim-base) 92%, transparent) 0%, color-mix(in srgb, var(--color-scrim-base) 25%, transparent) 55%, transparent 85%);
}

.recipe-detail--title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2rem, 4vw + 0.5rem, 2.9rem);
    line-height: 1.1;
    color: var(--color-on-dark);
    text-wrap: balance;
    margin: 0 0 0.75rem;
}

.recipe-detail--save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.recipe-detail--action-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.recipe-detail--meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    gap: 0.55rem;
}

.recipe-detail--badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-accent-strong);
    padding: 0.45rem 0.7rem;
    background: var(--color-accent-soft);
    border-radius: 5px;
}

.recipe-detail--cook-count {
    border: none;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.recipe-detail--cook-count:hover {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* button_to wraps the button in its own <form> — display: contents lets the
   badge participate directly in .recipe-detail--meta's flex row instead of
   the form itself becoming an extra block-level flex item (same trick as
   .cook-mode--finish-form). */
.recipe-detail--cook-count-form {
    display: contents;
}

.recipe-detail--rating {
    margin: 0;
}

.recipe-detail--rating-stars {
    display: flex;
    gap: 2px;
    color: var(--color-accent-soft);
    margin-bottom: 4px;
}

.recipe-detail--rating-stars svg {
    width: 20px;
    height: 20px;
}

.recipe-detail--rating-summary {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-on-image);
}

.recipe-detail--rating-menu-stars {
    display: flex;
    gap: 4px;
}

/* Same display: contents trick as .recipe-detail--cook-count-form — each
   star is its own <form>, and this keeps them participating directly in
   the menu-stars row instead of each form becoming its own block. */
.recipe-detail--rating-star-form {
    display: contents;
}

.recipe-detail--rating-star {
    border: none;
    background: none;
    padding: 2px;
    cursor: pointer;
    color: var(--color-border-strong);
}

.recipe-detail--rating-star.is-selected {
    color: var(--color-accent);
}

.recipe-detail--rating-star:hover {
    color: var(--color-accent);
}

.recipe-detail--source {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-image-muted);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.recipe-detail--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.recipe-detail--tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-accent-soft-text);
    border: 1px solid var(--color-accent-soft);
    padding: 3px 8px;
    border-radius: 4px;
}

.recipe-detail--description {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

.recipe-detail--note {
    grid-area: n;
}

.recipe-detail--rating-label {
    margin: 0;
}

.recipe-detail--note-textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-accent-soft);
    border-radius: 6px;
    padding: 10px 12px;
    resize: vertical;
}

.recipe-detail--tickets {
    width: 100%;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 2.5rem;
    align-items: start;
    grid-template-areas: "i s"
                         "n n";
}

.recipe-detail--ticket {
    background: var(--color-surface-alt);
    min-width: 0;
    padding: 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--color-accent) 50%, transparent);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-self: start;
}

.recipe-detail--ticket-divider {
    border-top: 1px dashed color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.recipe-detail--heading {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-strong);
    margin: 0;
    margin-top: 0.5rem;
}

.recipe-detail--shopping-list-btn {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    width: 100%;
    text-wrap: wrap;
}

.recipe-detail--servings-scaler {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.recipe-scaling--button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
    color: var(--color-accent);
    background: none;
    border: 1px solid var(--color-accent);
    border-radius: 3px;
    cursor: pointer;
}

.recipe-scaling--button:hover {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.recipe-detail--servings-count {
    min-width: 1.2em;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-accent-strong);
    text-align: center;
}

.recipe-detail--shopping-list-confirmed {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--color-accent-strong);
    text-align: center;
}

.recipe-detail--shopping-list-link {
    color: var(--color-accent);
    text-decoration: underline;
}

.recipe-detail--ingredients {
    grid-area: i;
}

.recipe-detail--ingredients-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recipe-detail--ingredients-list li {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
}

.recipe-detail--ingredient-name {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.recipe-detail--ingredient-name::after {
    content: "........................................................................................................";
    white-space: nowrap;
}

.recipe-detail--ingredient-amount {
    font-family: var(--font-mono);
    color: var(--color-accent);
    flex-shrink: 0;
    white-space: nowrap;
    align-self: end;
}

.recipe-detail--steps {
    grid-area: s;
}

.recipe-detail--step {
    display: flex;
    gap: 14px;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-accent) 50%, transparent);
    padding-bottom: 1rem;
}

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

.recipe-detail--step-number {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.recipe-detail--step-text {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
    padding-top: 2px;
}

.recipe-detail--save svg path {
    fill: none;
}

.recipe-detail--save.is-saved svg path {
    fill: currentColor;
}

.recipe-detail--save-wrap {
    position: relative;
    display: inline-block;
}

.recipe-detail--save-wrap .recipe-preview--save-menu {
    top: calc(100% + 8px);
    right: auto;
    left: 0;
}

@media (max-width: 900px) {
    .recipe-detail--hero-image {
        height: 340px;
    }

    .recipe-detail--tickets {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 720px) {
    .recipe-detail--tickets {
        grid-template-columns: 1fr;
        grid-template-areas: "i"
                             "s"
                             "n";
    }
}

@media (max-width: 480px) {
    .recipe-detail {
        padding: 6rem 1.25rem 3rem;
    }

    .recipe-detail--hero-image {
        height: 260px;
    }

    .recipe-detail--hero-scrim {
        padding: 1.25rem;
    }

    .recipe-detail--badge {
        font-size: 0.7rem;
    }

    .recipe-detail--description {
        font-size: 0.9rem;
    }

    /* Nested .btn (the Spara button, inside .recipe-detail--save-wrap) fills
       whatever width its own direct-child wrapper below ends up with. */
    .recipe-detail--action-wrapper .btn {
        width: 100%;
        justify-content: center;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* The two direct children ("Laga nu" and .recipe-detail--save-wrap) split
       the row evenly via an explicit calc() width rather than flex-grow
       distribution — flex-basis: 0 with equal flex-grow should split evenly
       in theory, but "Laga nu" itself also carries the .btn class matched by
       the rule above, and that rule's higher specificity (two classes vs.
       one) was winning and stretching it to the full row instead of half.
       Naming both direct children explicitly here matches that specificity,
       and coming later in the file wins the tie for "Laga nu" specifically,
       while the .recipe-detail--save-wrap case was never actually in
       conflict (it doesn't carry a .btn class itself). */
    .recipe-detail--action-wrapper > .btn,
    .recipe-detail--action-wrapper > .recipe-detail--save-wrap {
        flex: 0 0 auto;
        width: calc(50% - 0.5rem);
    }
}