.trips-page,
.trips-page * {
    box-sizing: border-box;
}

:root {
    --trip-ink: #17231d;
    --trip-muted: #68736d;
    --trip-green: #174d38;
    --trip-green-dark: #103628;
    --trip-paper: #f6f4ee;
    --trip-white: #ffffff;
    --trip-line: rgba(23, 35, 29, 0.14);
}

body.trips-directory-layout {
    margin: 0;
    color: var(--trip-ink);
    background: var(--trip-paper);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.trips-page {
    width: min(1440px, calc(100% - 48px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 72px 0 100px;
}

.trips-heading {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-end;
    padding-bottom: 45px;
}

.trips-kicker {
    color: var(--trip-green);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.trips-heading h1 {
    margin: 10px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.06em;
}

.trips-heading p {
    max-width: 620px;
    margin: 24px 0 0;
    color: var(--trip-muted);
    font-size: 1.02rem;
    line-height: 1.7;
}

.trips-heading-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.trip-action-primary,
.trip-action-secondary {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.trip-action-primary {
    color: #fff;
    background: var(--trip-green);
}

.trip-action-secondary {
    color: var(--trip-green);
    border: 1px solid var(--trip-line);
    background: #fff;
}

.trips-search-panel {
    padding: 26px;
    border: 1px solid var(--trip-line);
    border-radius: 22px;
    background: #fff;
}

.trips-search {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border: 1px solid var(--trip-line);
    border-radius: 14px;
    background: var(--trip-paper);
}

.trips-search-icon {
    color: var(--trip-green);
    font-size: 1.4rem;
}

.trips-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--trip-ink);
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
}

.trip-filter-group {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 20px;
}

.trip-filter-label {
    color: var(--trip-muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trip-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trip-filter-chip {
    min-height: 37px;
    padding: 0 15px;
    border: 1px solid var(--trip-line);
    border-radius: 999px;
    color: var(--trip-ink);
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
}

.trip-filter-chip.is-active {
    border-color: var(--trip-green);
    color: #fff;
    background: var(--trip-green);
}

.trips-results {
    margin-top: 50px;
}

.trips-results-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--trip-line);
}

.trips-results-toolbar > div:first-child strong,
.trips-results-toolbar > div:first-child span {
    display: block;
}

.trips-results-toolbar > div:first-child strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 400;
}

.trips-results-toolbar > div:first-child span {
    margin-top: 5px;
    color: var(--trip-muted);
    font-size: 0.78rem;
}

.trips-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 13px;
}

.trip-view-switch {
    display: flex;
    padding: 3px;
    border: 1px solid var(--trip-line);
    border-radius: 10px;
    background: #fff;
}

.trip-view-button {
    width: 38px;
    height: 36px;
    border: 0;
    border-radius: 7px;
    color: var(--trip-muted);
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
}

.trip-view-button.is-active {
    color: #fff;
    background: var(--trip-green);
}

.trip-sort {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--trip-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.trip-sort select {
    height: 43px;
    min-width: 165px;
    padding: 0 35px 0 12px;
    border: 1px solid var(--trip-line);
    border-radius: 10px;
    color: var(--trip-ink);
    background: #fff;
    font: inherit;
}

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

.trip-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--trip-line);
    border-radius: 17px;
    background: #fff;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.trip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(20, 38, 29, 0.09);
}

.trip-card-cover {
    position: relative;
    height: 225px;
    display: block;
    overflow: hidden;
    background: var(--trip-green-dark);
    text-decoration: none;
}

.trip-card-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.trip-card-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(255,255,255,0.38) 0 20%,
            transparent 20.4%
        ),
        linear-gradient(145deg, #194f3b, #17392d);
}

.trip-card-fallback span {
    margin-bottom: 8px;
    color: rgba(255,255,255,0.66);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.trip-card-fallback strong {
    max-width: 300px;
    font-size: 1.35rem;
    line-height: 1.1;
}

.trip-mode-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(12, 40, 29, 0.77);
    backdrop-filter: blur(8px);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.trip-card-content {
    padding: 20px;
}

.trip-card-location {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--trip-muted);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.trip-card-location > span {
    color: var(--trip-green);
}

.trip-card h2 {
    margin: 12px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.48rem;
    font-weight: 400;
    line-height: 1.1;
}

.trip-card h2 a {
    color: inherit;
    text-decoration: none;
}

.trip-card-summary {
    min-height: 61px;
    margin: 12px 0 0;
    color: var(--trip-muted);
    font-size: 0.79rem;
    line-height: 1.6;
}

.trip-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 17px;
    padding: 15px 0;
    border-top: 1px solid var(--trip-line);
    border-bottom: 1px solid var(--trip-line);
}

.trip-card-details span {
    color: var(--trip-muted);
    font-size: 0.69rem;
}

.trip-card-details strong {
    color: var(--trip-ink);
    font-size: 0.78rem;
}

.trip-card-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}

.trip-card-bottom > span {
    min-width: 0;
    color: var(--trip-muted);
    font-size: 0.67rem;
}

.trip-card-bottom > span strong {
    display: block;
    max-width: 150px;
    margin-top: 2px;
    overflow: hidden;
    color: var(--trip-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-card-bottom > div {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
}

.trip-view-link,
.trip-edit-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}

.trip-view-link {
    color: #fff;
    background: var(--trip-green);
}

.trip-edit-link {
    color: var(--trip-green);
    border: 1px solid var(--trip-line);
}

/* List view */

.trips-grid[data-current-view="list"] {
    grid-template-columns: 1fr;
}

.trips-grid[data-current-view="list"] .trip-card {
    display: grid;
    grid-template-columns: minmax(260px, 36%) minmax(0, 1fr);
}

.trips-grid[data-current-view="list"] .trip-card-cover {
    height: 100%;
    min-height: 245px;
}

.trips-grid[data-current-view="list"] .trip-card-content {
    padding: 26px 30px;
}

.trips-grid[data-current-view="list"] .trip-card h2 {
    font-size: 1.85rem;
}

.trips-grid[data-current-view="list"] .trip-card-summary {
    min-height: auto;
    max-width: 720px;
    font-size: 0.86rem;
}

.trips-no-results {
    padding: 80px 20px;
    border: 1px dashed var(--trip-line);
    border-radius: 18px;
    text-align: center;
}

.trips-no-results h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 400;
}

.trips-no-results p {
    color: var(--trip-muted);
}

.trips-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.trips-load-more {
    min-height: 47px;
    padding: 0 24px;
    border: 1px solid var(--trip-green);
    border-radius: 999px;
    color: var(--trip-green);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
}

.trips-load-more:hover {
    color: #fff;
    background: var(--trip-green);
}

@media (max-width: 1050px) {
    .trips-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .trips-page {
        width: calc(100% - 30px);
        padding-top: 48px;
    }

    .trips-heading,
    .trips-results-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .trips-heading h1 {
        font-size: 4.3rem;
    }

    .trip-filter-group {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .trips-toolbar-controls {
        justify-content: space-between;
    }

    .trips-grid {
        grid-template-columns: 1fr;
    }

    .trips-grid[data-current-view="list"] .trip-card {
        display: block;
    }

    .trips-grid[data-current-view="list"] .trip-card-cover {
        min-height: 0;
        height: 225px;
    }
}

@media (max-width: 430px) {
    .trips-heading h1 {
        font-size: 3.7rem;
    }

    .trips-search-panel {
        padding: 18px;
    }

    .trips-toolbar-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .trip-sort {
        justify-content: space-between;
    }

    .trip-sort select {
        flex: 1;
        min-width: 0;
    }
}


/* =====================================================================
   COMPACT TRIPS CATALOG V2
   Grid remains visual and compact. List remains available for comparison.
   ===================================================================== */

/* Compact page introduction */

.trips-page {
    width: min(1540px, calc(100% - 42px));
    padding-top: 38px;
    padding-bottom: 72px;
}

.trips-heading {
    align-items: center;
    padding-bottom: 24px;
}

.trips-heading h1 {
    margin-top: 5px;
    font-size: clamp(3.1rem, 4.5vw, 5rem);
    line-height: 0.92;
}

.trips-heading p {
    max-width: 670px;
    margin-top: 13px;
    font-size: 0.9rem;
    line-height: 1.55;
}

.trips-heading-actions {
    align-self: center;
}

/* Compact search and filter controls */

.trips-search-panel {
    padding: 16px 18px;
    border-radius: 16px;
}

.trips-search {
    height: 45px;
    border-radius: 10px;
}

.trip-filter-group {
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.trip-filter-chip {
    min-height: 31px;
    padding: 0 12px;
    font-size: 0.7rem;
}

.trips-results {
    margin-top: 28px;
}

.trips-results-toolbar {
    margin-bottom: 16px;
    padding-bottom: 14px;
}

.trips-results-toolbar > div:first-child strong {
    font-size: 1.28rem;
}

.trip-view-button {
    width: 34px;
    height: 32px;
}

.trip-sort select {
    height: 38px;
}

/* ---------------------------------------------------------------
   GRID VIEW
   Four compact cards on wide screens.
   --------------------------------------------------------------- */

.trips-grid[data-current-view="grid"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.trips-grid[data-current-view="grid"] .trip-card {
    border-radius: 14px;
}

.trips-grid[data-current-view="grid"] .trip-card-cover {
    height: 155px;
}

.trips-grid[data-current-view="grid"] .trip-card-content {
    padding: 15px;
}

.trips-grid[data-current-view="grid"] .trip-card-location {
    font-size: 0.58rem;
}

.trips-grid[data-current-view="grid"] .trip-card h2 {
    min-height: 42px;
    margin-top: 8px;
    font-size: 1.15rem;
    line-height: 1.08;
}

/*
   Grid cards are for scanning. Full descriptions remain visible
   in List view and on the individual Trip page.
*/
.trips-grid[data-current-view="grid"] .trip-card-summary {
    display: none;
}

.trips-grid[data-current-view="grid"] .trip-card-details {
    gap: 9px;
    margin-top: 12px;
    padding: 11px 0;
}

.trips-grid[data-current-view="grid"] .trip-card-details span {
    font-size: 0.62rem;
}

.trips-grid[data-current-view="grid"] .trip-card-details strong {
    font-size: 0.7rem;
}

.trips-grid[data-current-view="grid"] .trip-card-bottom {
    margin-top: 10px;
}

/* Creator is useful in List view, but makes compact cards too tall. */
.trips-grid[data-current-view="grid"] .trip-card-bottom > span {
    display: none;
}

.trips-grid[data-current-view="grid"] .trip-card-bottom > div {
    width: 100%;
    justify-content: flex-end;
}

.trips-grid[data-current-view="grid"] .trip-view-link,
.trips-grid[data-current-view="grid"] .trip-edit-link {
    min-height: 31px;
    padding: 0 11px;
    font-size: 0.63rem;
}

.trips-grid[data-current-view="grid"] .trip-mode-tag {
    top: 10px;
    left: 10px;
    padding: 6px 8px;
    font-size: 0.54rem;
}

.trips-grid[data-current-view="grid"] .trip-card-fallback {
    padding: 16px;
}

.trips-grid[data-current-view="grid"] .trip-card-fallback span {
    margin-bottom: 5px;
    font-size: 0.52rem;
}

.trips-grid[data-current-view="grid"] .trip-card-fallback strong {
    font-size: 1rem;
    line-height: 1.06;
}

/* ---------------------------------------------------------------
   LIST VIEW
   Retains useful details but uses shorter rows than before.
   --------------------------------------------------------------- */

.trips-grid[data-current-view="list"] {
    gap: 14px;
}

.trips-grid[data-current-view="list"] .trip-card {
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 190px;
}

.trips-grid[data-current-view="list"] .trip-card-cover {
    min-height: 190px;
    height: 100%;
}

.trips-grid[data-current-view="list"] .trip-card-content {
    padding: 19px 23px;
}

.trips-grid[data-current-view="list"] .trip-card h2 {
    margin-top: 7px;
    font-size: 1.42rem;
}

.trips-grid[data-current-view="list"] .trip-card-summary {
    margin-top: 8px;
    font-size: 0.78rem;
    line-height: 1.48;
}

.trips-grid[data-current-view="list"] .trip-card-details {
    margin-top: 11px;
    padding: 10px 0;
}

.trips-grid[data-current-view="list"] .trip-card-bottom {
    margin-top: 10px;
}

/* Four / three / two / one responsive catalog */

@media (max-width: 1260px) {
    .trips-grid[data-current-view="grid"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .trips-grid[data-current-view="grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trips-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .trips-page {
        width: calc(100% - 28px);
        padding-top: 30px;
    }

    .trips-grid[data-current-view="grid"] {
        grid-template-columns: 1fr;
    }

    .trips-grid[data-current-view="grid"] .trip-card-cover {
        height: 205px;
    }

    .trips-grid[data-current-view="grid"] .trip-card h2 {
        min-height: 0;
        font-size: 1.3rem;
    }

    .trip-filter-group {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .trips-grid[data-current-view="list"] .trip-card {
        display: block;
    }

    .trips-grid[data-current-view="list"] .trip-card-cover {
        height: 205px;
        min-height: 0;
    }
}


/* =====================================================================
   TRIPS CONTROLLED MASONRY V3
   Visual discovery grid with deliberate compact, standard and featured
   card sizes. List view remains available for practical comparison.
   ===================================================================== */

/* Slightly reduce the space above the results. */

.trips-page {
    padding-top: 32px;
}

.trips-heading {
    padding-bottom: 20px;
}

.trips-search-panel {
    padding-top: 14px;
    padding-bottom: 14px;
}

.trips-results {
    margin-top: 23px;
}

/* ---------------------------------------------------------------
   MASONRY GRID VIEW
   --------------------------------------------------------------- */

.trips-grid[data-current-view="grid"] {
    display: block !important;
    column-count: 4;
    column-gap: 16px;
}

.trips-grid[data-current-view="grid"] .trip-card {
    width: 100%;
    display: inline-block;
    margin: 0 0 16px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    vertical-align: top;
}

/*
   Compact cards make up most of the directory.
*/

.trips-grid[data-current-view="grid"]
.trip-card--compact
.trip-card-cover {
    height: 142px;
}

.trips-grid[data-current-view="grid"]
.trip-card--compact
.trip-card-content {
    padding: 14px;
}

.trips-grid[data-current-view="grid"]
.trip-card--compact
.trip-card-summary {
    display: none;
}

.trips-grid[data-current-view="grid"]
.trip-card--compact
.trip-card h2 {
    min-height: 0;
}

/*
   Standard cards provide occasional descriptions and taller imagery.
*/

.trips-grid[data-current-view="grid"]
.trip-card--standard
.trip-card-cover {
    height: 190px;
}

.trips-grid[data-current-view="grid"]
.trip-card--standard
.trip-card-content {
    padding: 16px;
}

.trips-grid[data-current-view="grid"]
.trip-card--standard
.trip-card-summary {
    display: -webkit-box;
    min-height: 0;
    margin-top: 9px;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/*
   Featured cards are deliberately taller, but remain within one column.
*/

.trips-grid[data-current-view="grid"]
.trip-card--featured
.trip-card-cover {
    height: 250px;
}

.trips-grid[data-current-view="grid"]
.trip-card--featured
.trip-card-content {
    padding: 18px;
}

.trips-grid[data-current-view="grid"]
.trip-card--featured
.trip-card-summary {
    display: -webkit-box;
    min-height: 0;
    margin-top: 10px;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.trips-grid[data-current-view="grid"]
.trip-card--featured
.trip-card h2 {
    font-size: 1.32rem;
}

/* Shared compact grid typography. */

.trips-grid[data-current-view="grid"] .trip-card h2 {
    margin-top: 8px;
    font-size: 1.08rem;
    line-height: 1.1;
}

.trips-grid[data-current-view="grid"] .trip-card-location {
    font-size: 0.55rem;
}

.trips-grid[data-current-view="grid"] .trip-card-details {
    gap: 9px;
    margin-top: 11px;
    padding: 10px 0;
}

.trips-grid[data-current-view="grid"] .trip-card-details span {
    font-size: 0.59rem;
}

.trips-grid[data-current-view="grid"] .trip-card-details strong {
    font-size: 0.67rem;
}

.trips-grid[data-current-view="grid"] .trip-card-bottom {
    margin-top: 9px;
}

.trips-grid[data-current-view="grid"]
.trip-card-bottom > span {
    display: none;
}

.trips-grid[data-current-view="grid"]
.trip-card-bottom > div {
    width: 100%;
    justify-content: flex-end;
}

.trips-grid[data-current-view="grid"]
.trip-view-link,
.trips-grid[data-current-view="grid"]
.trip-edit-link {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.6rem;
}

.trips-grid[data-current-view="grid"] .trip-mode-tag {
    top: 9px;
    left: 9px;
    padding: 5px 8px;
    font-size: 0.51rem;
}

.trips-grid[data-current-view="grid"] .trip-card-fallback {
    padding: 15px;
}

.trips-grid[data-current-view="grid"]
.trip-card-fallback strong {
    font-size: 1rem;
}

/* ---------------------------------------------------------------
   LIST VIEW
   Shorter practical rows, without changing the information offered.
   --------------------------------------------------------------- */

.trips-grid[data-current-view="list"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 13px;
}

.trips-grid[data-current-view="list"] .trip-card {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr);
    min-height: 172px;
    margin: 0;
}

.trips-grid[data-current-view="list"] .trip-card-cover {
    height: 100%;
    min-height: 172px;
}

.trips-grid[data-current-view="list"] .trip-card-content {
    padding: 17px 21px;
}

.trips-grid[data-current-view="list"] .trip-card h2 {
    margin-top: 6px;
    font-size: 1.34rem;
}

.trips-grid[data-current-view="list"] .trip-card-summary {
    min-height: 0;
    margin-top: 7px;
    font-size: 0.75rem;
    line-height: 1.45;
}

.trips-grid[data-current-view="list"] .trip-card-details {
    margin-top: 9px;
    padding: 9px 0;
}

.trips-grid[data-current-view="list"] .trip-card-bottom {
    margin-top: 8px;
}

/* ---------------------------------------------------------------
   RESPONSIVE MASONRY COLUMNS
   --------------------------------------------------------------- */

@media (max-width: 1280px) {
    .trips-grid[data-current-view="grid"] {
        column-count: 3;
    }
}

@media (max-width: 900px) {
    .trips-grid[data-current-view="grid"] {
        column-count: 2;
    }
}

@media (max-width: 680px) {
    .trips-grid[data-current-view="grid"] {
        column-count: 1;
    }

    .trips-grid[data-current-view="grid"]
    .trip-card--compact
    .trip-card-cover,
    .trips-grid[data-current-view="grid"]
    .trip-card--standard
    .trip-card-cover {
        height: 205px;
    }

    .trips-grid[data-current-view="grid"]
    .trip-card--featured
    .trip-card-cover {
        height: 245px;
    }

    .trips-grid[data-current-view="list"] .trip-card {
        display: block;
    }

    .trips-grid[data-current-view="list"] .trip-card-cover {
        height: 205px;
        min-height: 0;
    }
}


/* ==========================================================
   TRIP DIRECTORY STOP LINE V1

   Exact visual format:
   QC Circle • Antipolo • Tanay • Santiago • QC Circle

   No arrows, icons, route lines or vertical markers.
   ========================================================== */

.trip-card-stop-line {
    max-width: 100%;
    margin: 9px 0 11px;
    overflow: hidden;
    color: var(--trip-green);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-card:hover .trip-card-stop-line {
    color: var(--trip-green-dark);
}

.trips-view-list .trip-card-stop-line {
    max-width: 720px;
}

@media (max-width: 700px) {
    .trip-card-stop-line {
        font-size: 0.69rem;
    }
}


/* =====================================================================
   TRIP DIRECTORY EDITORIAL CARDS V1
   ===================================================================== */

/*
   Experience palette.

   Accent is deliberately restrained:
   photo stays dominant, experience supplies identity.
*/

.trip-card {
    --experience-accent: #35664c;
    --experience-soft: #edf4ef;
    --experience-ink: #173d2c;
}


.trip-card--food_trip {
    --experience-accent: #c76732;
    --experience-soft: #fff1e7;
    --experience-ink: #713319;
}


.trip-card--motorcycle_trip {
    --experience-accent: #263d34;
    --experience-soft: #edf1ef;
    --experience-ink: #16251f;
}


.trip-card--road_scenic {
    --experience-accent: #8b7135;
    --experience-soft: #f7f1df;
    --experience-ink: #56451f;
}


.trip-card--nature_hiking {
    --experience-accent: #34734b;
    --experience-soft: #e9f4ec;
    --experience-ink: #1d4a2d;
}


.trip-card--heritage_culture {
    --experience-accent: #843f46;
    --experience-soft: #f8eaeb;
    --experience-ink: #59262c;
}


.trip-card--cafe_photography,
.trip-card--cafe_trip {
    --experience-accent: #795a43;
    --experience-soft: #f5eee8;
    --experience-ink: #503827;
}


.trip-card--photography_trip {
    --experience-accent: #4c568b;
    --experience-soft: #eef0fa;
    --experience-ink: #30375f;
}


.trip-card--beach_trip {
    --experience-accent: #317b96;
    --experience-soft: #e8f4f8;
    --experience-ink: #185268;
}


.trip-card--camping_trip {
    --experience-accent: #386044;
    --experience-soft: #ebf2ed;
    --experience-ink: #213d2a;
}


.trip-card--family_trip {
    --experience-accent: #347c75;
    --experience-soft: #e9f5f3;
    --experience-ink: #20534e;
}


.trip-card--weekend_trip {
    --experience-accent: #675a8b;
    --experience-soft: #f0edf7;
    --experience-ink: #453a64;
}


.trip-card--shopping_trip {
    --experience-accent: #8a4f71;
    --experience-soft: #f7edf3;
    --experience-ink: #5b3049;
}


.trip-card--day_trip {
    --experience-accent: #a06d32;
    --experience-soft: #f8efe4;
    --experience-ink: #67441f;
}


/* -------------------------------------------------------------
   Stop random masonry sizing.
   Every Trip now receives equal visual importance unless
   deliberately featured later.
   ------------------------------------------------------------- */

.trips-grid[data-current-view="grid"] {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 20px;
    column-count: initial;
}


.trips-grid[data-current-view="grid"] .trip-card {
    width: auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    break-inside: auto;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(23, 35, 29, 0.08),
        0 8px 24px rgba(20, 38, 29, 0.055);
}


.trips-grid[data-current-view="grid"] .trip-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(23, 35, 29, 0.08),
        0 17px 38px rgba(20, 38, 29, 0.12);
}


/* -------------------------------------------------------------
   Photography
   ------------------------------------------------------------- */

.trips-grid[data-current-view="grid"] .trip-card-cover {
    height: 205px !important;
    flex: 0 0 205px;
    background: var(--experience-accent);
}


.trip-card-cover img {
    transition:
        transform 380ms ease,
        filter 380ms ease;
}


.trip-card:hover .trip-card-cover img {
    transform: scale(1.035);
}


.trip-card-image-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(10, 20, 15, 0.04) 35%,
            rgba(8, 18, 13, 0.38) 100%
        );
}


/* -------------------------------------------------------------
   No-photo fallback now belongs to the experience instead of
   every Trip sharing the same green artwork.
   ------------------------------------------------------------- */

.trip-card-fallback {
    position: relative;
    justify-content: flex-end;
    color: #fff;
    background:
        radial-gradient(
            circle at 90% 4%,
            rgba(255,255,255,0.22) 0 23%,
            transparent 23.4%
        ),
        linear-gradient(
            145deg,
            var(--experience-accent),
            var(--experience-ink)
        );
}


.trip-card-fallback span {
    color: rgba(255,255,255,0.72);
}


.trip-card-fallback strong {
    max-width: 90%;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 1.35rem;
    font-weight: 400;
}


/* -------------------------------------------------------------
   Experience = primary badge.
   Travel mode = secondary badge.
   ------------------------------------------------------------- */

.trip-experience-tag,
.trip-travel-tag {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    font-weight: 850;
    line-height: 1;
}


.trip-experience-tag {
    top: 13px;
    left: 13px;
    max-width: calc(100% - 26px);
    padding: 8px 11px;
    color: #fff;
    background: var(--experience-accent);
    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.16);
    font-size: 0.63rem;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}


.trip-travel-tag {
    right: 13px;
    bottom: 12px;
    padding: 7px 10px;
    color: #fff;
    background: rgba(16, 29, 23, 0.72);
    font-size: 0.61rem;
}


/* Retire previous travel-mode badge. */

.trip-mode-tag {
    display: none !important;
}


/* -------------------------------------------------------------
   Card content hierarchy
   ------------------------------------------------------------- */

.trips-grid[data-current-view="grid"] .trip-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px;
    border-top:
        4px solid var(--experience-accent);
}


.trip-card-location {
    align-items: center;
}


.trip-location-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.trip-difficulty {
    flex-shrink: 0;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--experience-ink) !important;
    background: var(--experience-soft);
    font-size: 0.56rem;
}


.trips-grid[data-current-view="grid"] .trip-card h2 {
    min-height: 2.35em;
    margin-top: 11px;
    color: var(--trip-ink);
    font-size: 1.26rem;
    line-height: 1.16;
}


.trips-grid[data-current-view="grid"] .trip-card-summary {
    display: -webkit-box;
    min-height: 3.05em;
    margin-top: 9px;
    overflow: hidden;
    color: var(--trip-muted);
    font-size: 0.73rem;
    line-height: 1.52;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.trips-grid[data-current-view="grid"] .trip-card-stop-line {
    margin: 12px 0 0;
    color: var(--experience-accent);
    font-size: 0.65rem;
    font-weight: 750;
}


.trips-grid[data-current-view="grid"] .trip-card-details {
    margin-top: 13px;
    padding: 12px 0;
}


.trips-grid[data-current-view="grid"] .trip-card-details strong {
    color: var(--experience-ink);
}


.trips-grid[data-current-view="grid"] .trip-card-bottom {
    margin-top: auto;
    padding-top: 2px;
}


.trips-grid[data-current-view="grid"] .trip-view-link {
    color: #fff;
    background: var(--experience-accent);
}


.trips-grid[data-current-view="grid"] .trip-edit-link {
    color: var(--experience-ink);
    border-color: color-mix(
        in srgb,
        var(--experience-accent) 30%,
        transparent
    );
}


/* -------------------------------------------------------------
   List view keeps the same experience identity.
   ------------------------------------------------------------- */

.trips-grid[data-current-view="list"] .trip-card {
    overflow: hidden;
    border-left:
        5px solid var(--experience-accent);
}


.trips-grid[data-current-view="list"] .trip-card-content {
    border-top: 0;
}


.trips-grid[data-current-view="list"] .trip-experience-tag {
    top: 13px;
    left: 13px;
}


.trips-grid[data-current-view="list"] .trip-travel-tag {
    right: 13px;
    bottom: 13px;
}


/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */

@media (max-width: 1280px) {
    .trips-grid[data-current-view="grid"] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {
    .trips-grid[data-current-view="grid"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 680px) {
    .trips-grid[data-current-view="grid"] {
        grid-template-columns: 1fr;
    }

    .trips-grid[data-current-view="grid"]
    .trip-card-cover {
        height: 225px !important;
        flex-basis: 225px;
    }
}