@layer components {
    /* Desktop list row. The list markup is only requested at >=1024px (see tours.js). */
    .nur-tourlist--rows {
        grid-template-columns: 1fr;
    }

    .nur-row {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: 280px 1fr;
        overflow: hidden;
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius-lg);
        background: var(--nur-surface);
        box-shadow: var(--nur-shadow-sm);
        transition: box-shadow 0.2s var(--nur-ease), border-color 0.2s;
    }

    .nur-row:hover {
        border-color: var(--nur-gold-300);
        box-shadow: var(--nur-shadow);
    }

    .nur-row__gallery {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: minmax(150px, 1fr);
        gap: var(--nur-space-2);
        padding: var(--nur-space-2);
        background: var(--nur-sand-100);
    }

    .nur-row__photo {
        position: relative;
        overflow: hidden;
        border-radius: var(--nur-radius);
    }

    .nur-row__photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .nur-row__city {
        position: absolute;
        left: var(--nur-space-2);
        bottom: var(--nur-space-2);
        padding: 3px 12px;
        border-radius: var(--nur-radius-sm);
        background: rgba(255, 255, 255, 0.92);
        color: var(--nur-primary-strong);
        font-size: var(--nur-text-xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .nur-row__main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-4);
        align-content: start;
        padding: var(--nur-space-5);
    }

    .nur-row__head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--nur-space-2) var(--nur-space-4);
    }

    .nur-row__heading {
        flex: 1 1 240px;
        min-width: 0;
    }

    .nur-row__title {
        font-size: var(--nur-text-xl);
    }

    /* the whole card is one click target; tools below sit above this overlay */
    .nur-row {
        position: relative;
    }

    .nur-row__link::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .nur-row__dates {
        display: flex;
        align-items: center;
        gap: var(--nur-space-2);
        margin-top: var(--nur-space-1);
        color: var(--nur-green-700);
        font-size: var(--nur-text-md);
        font-weight: 700;
        white-space: nowrap;
    }

    .nur-row__dates svg {
        flex: none;
        width: 20px;
        height: 20px;
    }

    .nur-row__badges {
        display: flex;
        flex: none;
        align-items: center;
        gap: var(--nur-space-2);
    }

    .nur-row__airline {
        width: auto;
        max-width: 110px;
        height: 32px;
        padding: 4px 10px;
        border: 1px solid var(--nur-line);
        border-radius: 999px;
        object-fit: contain;
    }

    .nur-row__pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 32px;
        padding: 0 var(--nur-space-3);
        border-radius: 999px;
        background: var(--nur-sand-100);
        color: var(--nur-primary-strong);
        font-size: var(--nur-text-sm);
        font-weight: 700;
    }

    .nur-row__route {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: var(--nur-space-3);
        padding: var(--nur-space-4);
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius);
        background: var(--nur-sand-50);
    }

    .nur-row__leg {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 2px;
        text-align: center;
    }

    .nur-row__leg span {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .nur-row__leg svg {
        width: 30px;
        height: 30px;
        color: var(--nur-primary);
    }

    .nur-row__legtag {
        color: var(--nur-gold-600);
        font-size: 0.6875rem;
        font-style: normal;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .nur-row__pill svg {
        width: 16px;
        height: 16px;
        color: var(--nur-gold-600);
    }

    .nur-row__leg b {
        color: var(--nur-primary-strong);
    }

    .nur-row__leg small {
        color: var(--nur-ink-soft);
        font-size: var(--nur-text-xs);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* a single flight does not need a three-column band */
    .nur-row__route.is-compact {
        display: flex;
        padding: var(--nur-space-3) var(--nur-space-4);
    }

    .nur-row__route.is-compact .nur-row__leg {
        display: flex;
        align-items: center;
        gap: var(--nur-space-3);
        text-align: left;
    }

    .nur-row__route.is-compact .nur-row__leg svg {
        width: 24px;
        height: 24px;
    }

    .nur-row__hotels {
        display: flex;
        flex-wrap: wrap;
        gap: var(--nur-space-3);
    }

    .nur-row__hotels li {
        display: flex;
        align-items: center;
        gap: var(--nur-space-3);
        min-width: 220px;
        padding: var(--nur-space-3) var(--nur-space-4);
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius);
    }

    .nur-row__hotels li > svg {
        width: 34px;
        height: 34px;
        flex: none;
        padding: 6px;
        border-radius: var(--nur-radius-sm);
        background: var(--nur-sand-100);
        color: var(--nur-primary);
    }

    .nur-row__hotels span {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        line-height: 1.3;
    }

    .nur-row__hotels small {
        color: var(--nur-ink-soft);
        font-size: var(--nur-text-xs);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .nur-row__hotels em {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--nur-gold-600);
        font-size: var(--nur-text-xs);
        font-style: normal;
        font-weight: 700;
    }

    .nur-row__hotels em svg {
        width: 14px;
        height: 14px;
    }

    .nur-row__foot {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-4);
        padding-top: var(--nur-space-4);
        border-top: 1px solid var(--nur-line);
    }

    .nur-row__prices {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: var(--nur-space-3);
    }

    .nur-row__prices li {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: var(--nur-space-3) var(--nur-space-4);
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius);
        background: var(--nur-sand-50);
    }

    .nur-row__prices li.is-lowest {
        border-color: var(--nur-green-500);
        background: var(--nur-green-100);
    }

    .nur-row__best {
        justify-self: start;
        padding: 2px 10px;
        border-radius: 999px;
        background: var(--nur-green-700);
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .nur-row__prices small {
        color: var(--nur-ink-soft);
        font-size: var(--nur-text-xs);
    }

    .nur-row__prices b {
        color: var(--nur-primary-strong);
        font-family: var(--nur-font-display);
        font-size: 1.5rem;
        line-height: 1.1;
    }

    .nur-row__prices .is-lowest b {
        color: var(--nur-green-700);
    }

    .nur-row__actions {
        position: relative;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        gap: var(--nur-space-2);
    }

    .nur-row__actions .nur-btn {
        flex: 1 1 auto;
        padding-inline: var(--nur-space-4);
    }
}