/* ============================================================
   GROUP TRIPS — styles/group-trips.css
   ------------------------------------------------------------
   The Group Trips feature's own stylesheet: the public marketplace
   (/group-trips), its single-trip view and the creation page
   (/create-group-trip). Linked after styles/styles.css so these page
   rules keep winning (separation standard: docs/frontend-separation.md).
   Every rule is scoped to this feature.
   ============================================================ */

/* ---------- List view: hero + toolbar ---------- */
.gt-hero {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
    border-radius: 1.5rem;
    padding: 2.5rem;
    color: #fff;
    margin-bottom: 2rem;
    text-align: center;
}
.gt-hero h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.gt-hero p { margin: 0.5rem auto 0; max-width: 640px; opacity: 0.95; }

.gt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
.gt-search-wrap { position: relative; flex: 1 1 16rem; }
.gt-search-wrap input {
    width: 100%;
    padding: 0.85rem 1.1rem 0.85rem 2.8rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}
.gt-search-wrap input:focus { outline: 2px solid var(--accent-deep); outline-offset: 1px; border-color: var(--accent); }
.gt-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.gt-search-icon svg { width: 1.1rem; height: 1.1rem; }
.gt-filter { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.9rem; }
.gt-filter-label { color: var(--muted); }
.gt-filter select {
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    color: var(--ink);
    font: inherit;
}
.gt-toolbar-actions { margin-left: auto; }
.gt-create-link { text-decoration: none; }

/* ---------- Notices, loading and empty states ---------- */
.gt-notice {
    border: 1px solid var(--accent-deep);
    border-left-width: 4px;
    background: var(--accent-soft);
    color: var(--ink);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}
.gt-loading { color: var(--muted); padding: 1.5rem 0; text-align: center; }
.gt-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--line);
    border-radius: 1.5rem;
    background: var(--surface-strong);
    color: var(--muted);
}
.gt-empty h2 { margin: 0 0 0.5rem; color: var(--ink); }
.gt-empty p { margin: 0 auto 1rem; max-width: 34rem; }
.gt-empty-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-deep);
}

/* ---------- Trip cards ---------- */
.gt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.gt-card {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.gt-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.gt-card-destination { margin: 0; font-size: 1.2rem; color: var(--ink); }
.gt-card-dates { margin: 0; color: var(--muted); font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.gt-card-dates svg { width: 1rem; height: 1rem; }
.gt-card-places { margin: 0; color: var(--muted); font-size: 0.9rem; }
.gt-card-notes {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gt-card-foot { margin-top: auto; padding-top: 0.5rem; }
.gt-card-cta { display: inline-block; text-decoration: none; }

.gt-bar { height: 0.45rem; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.gt-bar-fill { display: block; height: 100%; background: var(--accent-deep); }

.gt-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    color: var(--muted);
    background: var(--surface);
}
.gt-badge-open { border-color: var(--accent-deep); color: var(--accent-deep); background: var(--accent-soft); }
.gt-badge-full { border-color: var(--line); color: var(--ink); background: var(--surface); }
.gt-badge-mine { border-color: var(--accent-deep); color: var(--ink); background: var(--accent); }


/* ---------- Detail view ---------- */
.gt-back { margin: 0 0 1rem; }
.gt-back a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.gt-detail {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow);
}
.gt-detail-destination { margin: 0 0 0.4rem; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--ink); }
.gt-detail-meta { margin: 0 0 0.6rem; color: var(--muted); }
.gt-detail-places { margin: 0 0 0.25rem; color: var(--ink); font-weight: 600; }
.gt-detail-guide { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.9rem; }
.gt-detail-notes { margin: 0 0 1.25rem; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.gt-detail-closed {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted);
}
.gt-detail-state { margin: 0 0 0.75rem; color: var(--ink); font-weight: 600; }
.gt-detail-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.gt-detail-actions .gt-row-sub { margin: 0; }

/* ---------- Action buttons ---------- */
.gt-btn-join,
.gt-btn-accept,
.gt-btn-leave { background: var(--accent-deep); color: #fff; border: 1px solid var(--accent-deep); }
.gt-btn-join:disabled,
.gt-btn-accept:disabled,
.gt-btn-leave:disabled,
.gt-btn-decline:disabled,
.gt-btn-cancel:disabled { opacity: 0.6; cursor: not-allowed; }
.gt-btn-decline { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.gt-btn-cancel { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); }

/* ---------- The creator's management panel ---------- */
.gt-panel {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.gt-panel-title { margin: 0; font-size: 1.15rem; color: var(--ink); }
.gt-panel-section h2 { margin: 0 0 0.6rem; font-size: 1rem; color: var(--ink); }
.gt-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.gt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-strong);
}
.gt-row-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; }
/* A person row's own line: the avatar it stored (or its initials) and the name. */
.gt-row-who { display: flex; align-items: center; gap: 0.5rem; }
.gt-row-label { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.gt-row-sub { color: var(--muted); font-size: 0.85rem; margin: 0; }
.gt-row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gt-row-actions .btn { font-size: 0.85rem; padding: 0.45rem 0.9rem; }
/* The avatar a person row draws: the picture the account stored, or its initials
   in the same circle when it has none. Decorative — the role and name beside it
   are what a reader reads. */
.gt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}
.gt-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* The proposal a guide wrote on their application, shown verbatim under the row. */
.gt-row-note {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
/* The proposal dialog's own fields (js/group-trips.js renders this markup into
   SweetAlert2, which is why the styles live here with the rest of the page). */
.gt-form-hint { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.85rem; }
.gt-form-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}
.gt-form-row { display: flex; gap: 0.5rem; }
.gt-form-row .gt-form-input { margin-bottom: 0; }

/* ---------- Create page (create-group-trip.html) ----------
   The page shell (sidebar rail, main column, topbar, badges, buttons) comes
   from styles/dashboard.css, linked before this file. Only the plan itself is
   styled here: the hero, the two-column layout, the form and the live preview. */
.gt-create-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.gt-topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.gt-topbar-back:hover,
.gt-topbar-back:focus-visible { color: var(--accent-deep); }
.gt-create-topbar .dashboard-badge {
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gt-section-intro { margin: 0 0 1.25rem; color: var(--muted); max-width: 46rem; line-height: 1.6; }

/* The one-time creation charge, stated before the form and restated at submit. */
.gt-cost {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent-deep);
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.55;
}
.gt-cost a { color: var(--accent-deep); font-weight: 700; }

.gt-form-note {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.1rem;
    border: 1px dashed var(--line);
    border-radius: 14px;
    max-width: 46rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}
.gt-field-error { margin: 0.35rem 0 0; color: var(--danger); font-size: 0.85rem; min-height: 1.1em; }

/* ---------- Create page: hero, two-column plan layout ----------
   The hero photo (assets/beach.jpg) is bright turquoise water over white sand
   and pale sky, and the copy sits at its foot - the brightest part of the photo.
   The scrim is therefore tinted from the top and dark where the copy lands, and
   the hero is tall enough that the copy never climbs into the clear band. The
   eyebrow/fact pills carry their own dark glass background: white glass pills
   were invisible over the sand. The photo, the scrim and the copy are three
   stacked layers (0/1/2): ::after is a positioned sibling of the copy, so
   without the copy's own layer the scrim paints over the text. */
.gt-plan-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 20rem;
    border: 1px solid var(--line);
    border-radius: 1.75rem;
    overflow: hidden;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow);
}
.gt-plan-hero-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.gt-plan-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16, 8, 5, 0.5) 0%, rgba(16, 8, 5, 0.78) 45%, rgba(16, 8, 5, 0.92) 100%);
}
.gt-plan-hero-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    color: #fff;
    text-shadow: 0 1px 3px rgba(16, 8, 5, 0.6);
}
.gt-plan-hero-eyebrow {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(16, 8, 5, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: none;
}
.gt-plan-hero h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; }
.gt-plan-hero-body p { margin: 0.75rem 0 0; max-width: 46rem; font-size: var(--text-base); line-height: 1.6; }
.gt-plan-hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.15rem 0 0; padding: 0; }
.gt-plan-hero-facts li {
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(16, 8, 5, 0.42);
    font-size: 0.82rem;
    font-weight: 600;
    text-shadow: none;
}

.gt-plan-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}
.gt-plan-card {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    padding: clamp(1.25rem, 2.4vw, 1.9rem);
    box-shadow: var(--shadow);
}
.gt-plan-main h2 { margin: 0 0 0.35rem; font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--ink); }
.gt-plan-card-title { margin: 0 0 0.35rem; font-size: var(--text-md); letter-spacing: -0.01em; color: var(--ink); }
.gt-plan-group-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.9rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: var(--text-md);
    color: var(--ink);
}
.gt-plan-group-title::before {
    content: "";
    flex: 0 0 auto;
    width: 0.3rem;
    height: 1.05rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent), var(--accent-deep));
}
.gt-plan-main form > .gt-plan-group-title:first-of-type { margin-top: 0.35rem; padding-top: 0; border-top: 0; }
.gt-plan-hint { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.gt-plan-fieldset { margin: 0 0 1.25rem; padding: 0; border: 0; }
.gt-plan-fieldset legend { margin-bottom: 0.6rem; padding: 0; font-size: 0.9rem; font-weight: 700; color: var(--ink); }

/* ---------- Create page: the form layer ----------
   `.form-field` and `.form-grid` are page styles in this codebase (see
   styles/my-trips.css), so the creation form carries its own copy, scoped to the
   plan card so it can only ever reach this form. */
.gt-plan-main .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem 1.25rem;
}
.gt-plan-main .form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; }
.gt-plan-main .form-grid .form-field { margin-bottom: 0; }
.gt-plan-main .form-field label { font-size: 0.88rem; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.gt-plan-main .form-field input,
.gt-plan-main .form-field select,
.gt-plan-main .form-field textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.98rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.gt-plan-main .form-field textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
.gt-plan-main .form-field input::placeholder,
.gt-plan-main .form-field textarea::placeholder { color: var(--muted); opacity: 0.75; }
.gt-plan-main .form-field input:focus,
.gt-plan-main .form-field select:focus,
.gt-plan-main .form-field textarea:focus {
    outline: none;
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--surface-strong);
}
.gt-plan-main .form-field input[aria-invalid="true"],
.gt-plan-main .form-field select[aria-invalid="true"],
.gt-plan-main .form-field textarea[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.gt-plan-side {
    position: sticky;
    top: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.gt-submit-row { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; }
.gt-submit,
.gt-submit:hover:not(:disabled) {
    width: 100%;
    padding: 1rem 1.75rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 30px rgba(232, 93, 4, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gt-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(232, 93, 4, 0.34); }
.gt-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gt-submit:disabled {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
    color: #fff;
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}
.gt-summary {
    margin: 0.75rem 0 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.55;
}
.gt-info-list {
    counter-reset: gt-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}
.gt-info-list li { position: relative; padding-left: 2.15rem; }
.gt-info-list li::before {
    counter-increment: gt-step;
    content: counter(gt-step);
    position: absolute;
    left: 0;
    top: 0.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 0.78rem;
    font-weight: 800;
}
.gt-info-list strong { color: var(--ink); }

/* ---------- Activity chips (create page) ---------- */
.gt-chip-group { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.gt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.gt-chip:hover { border-color: var(--accent); background: var(--surface-strong); transform: translateY(-1px); }
.gt-chip:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.gt-chip[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent-deep);
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(232, 93, 4, 0.14);
}
.gt-chip-check { display: none; }
.gt-chip[aria-pressed="true"] .gt-chip-check { display: inline-flex; }
.gt-chip-check svg { width: 0.9rem; height: 0.9rem; color: var(--accent-deep); }

/* ---------- Live preview (create page aside) ---------- */
.gt-preview-card { position: relative; overflow: hidden; }
.gt-preview-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}
.gt-preview {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 1rem;
}
.gt-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--line);
}
.gt-preview-title { margin: 0; font-size: var(--text-md); color: var(--ink); overflow-wrap: anywhere; }
.gt-preview-line {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.gt-preview-line svg {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 0.95rem;
    height: 0.95rem;
    padding: 0.3rem;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-deep);
}
.gt-preview-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.65rem 0 0; padding: 0; }
.gt-preview-chips li {
    border: 1px solid var(--accent-deep);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    background: var(--accent-soft);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 600;
}
.gt-preview-notes {
    margin: 0.65rem 0 0;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--line);
    border-radius: 0 12px 12px 0;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- Trip cards: the plan the marketplace reads ---------- */
.gt-card-when { margin: 0; color: var(--muted); font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.gt-card-when svg { width: 1rem; height: 1rem; }
.gt-card-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.gt-card-chips li {
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.78rem;
}
.gt-card-cost { margin: 0; color: var(--ink); font-weight: 600; font-size: 0.92rem; }
.gt-card-audience { margin: 0; color: var(--muted); font-size: 0.85rem; }
.gt-detail-cost { margin: 0 0 0.5rem; color: var(--ink); font-weight: 600; font-size: 1rem; }
.gt-detail-audience { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; }

/* ---------- Covers: the panel, the local placeholder and a trip's own image ----------
   One 16:9 panel carries both. ZanGo's own placeholder is drawn in it first and the
   trip's cover image sits over it when the trip has one, which is what makes the panel
   never empty — it is filled while an image loads — and an image that fails to load is
   hidden by js/group-trips-cover.js, uncovering the placeholder underneath instead of a
   broken-image icon. The placeholder is local artwork, so it costs no request, and its
   palette is literal brand colour rather than the theme's tokens: the artwork is
   ZanGo's own and reads the same in both themes. */
.gt-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #fff1df;
}
.gt-cover-hero { border-radius: 1.25rem; margin-bottom: 1.25rem; }

/* Both layers fill the panel, and the image is rendered after the placeholder, so a
   cover that loads covers it. An image that cannot be loaded is hidden: `display: block`
   shadows the UA rule for [hidden], so the attribute needs its own rule to take effect. */
.gt-cover-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.gt-cover-img[hidden] { display: none; }

.gt-cover-placeholder {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem;
    overflow: hidden;
    background: linear-gradient(158deg, #fff1df 0%, rgba(255, 159, 28, 0.3) 100%);
}
.gt-cover-art { flex: 0 1 auto; min-height: 0; width: min(62%, 26rem); height: auto; max-height: 72%; }
/* The trip hero is the widest panel a cover is shown in, so its artwork is allowed to
   grow with it instead of reading as a small emblem on a large empty panel. */
.gt-cover-hero .gt-cover-art { width: min(52%, 30rem); }
.gt-cover-label { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #351b12; opacity: 0.72; }

/* Create page: the chosen file, its preview, and the way back to the placeholder. */
.gt-cover-picker { display: flex; align-items: flex-start; gap: 1rem; margin-top: 0.75rem; }
.gt-cover-thumb { flex: 0 0 12rem; width: 12rem; margin-bottom: 0; border: 1px solid var(--line); }
/* The preview is a fraction of a card's width, so the artwork and its label are scaled
   down with it rather than crowding the smaller panel. */
.gt-cover-thumb .gt-cover-art { width: 58%; }
.gt-cover-thumb .gt-cover-placeholder { gap: 0.25rem; padding: 0.3rem; }
.gt-cover-thumb .gt-cover-label { font-size: 0.62rem; letter-spacing: 0.08em; }
.gt-cover-picker-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.gt-cover-picker-body .gt-plan-hint { margin: 0; }

/* The creator's own cover control in the trip's management panel. */
.gt-cover-control { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1.25rem; }
.gt-cover-control label { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.gt-cover-file { max-width: 100%; font: inherit; font-size: 0.9rem; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    /* One column: the form first, then the preview and the explainer, so the
       small screen reads the plan before the summary of it. */
    .gt-plan-layout { grid-template-columns: minmax(0, 1fr); }
    .gt-plan-side { position: static; }
}

@media (max-width: 640px) {
    .gt-hero { padding: 1.75rem 1.25rem; }
    .gt-detail { padding: 1.25rem; }
    .gt-toolbar-actions { margin-left: 0; width: 100%; }
    .gt-toolbar-actions .btn { width: 100%; text-align: center; }
    .gt-row { flex-direction: column; align-items: flex-start; }
    .gt-row-actions { width: 100%; }
    .gt-plan-hero { min-height: 17rem; border-radius: 1.25rem; }
    .gt-plan-hero-body { padding: 1.35rem; }
    .gt-plan-card { padding: 1.25rem; border-radius: 1.25rem; }
    .gt-plan-main .form-grid { grid-template-columns: minmax(0, 1fr); }
    /* The chosen image sits above its explanation instead of beside it. */
    .gt-cover-picker { flex-direction: column; }
    .gt-cover-thumb { flex-basis: auto; width: 100%; }
}