/* assets/css/trip.css
   Layout mechanics only (split panes, resizer, mobile stacking) --
   no new colors/typography here on purpose, that's Oskar's design pass.
   Two exceptions reuse tokens/classes that already exist elsewhere
   rather than introducing anything new: the resizer handle (--color-border
   / --color-text-muted, needed just to be visible), and the content
   pane's pink frame + white card, which is the same --color-bg / .page
   / .card pattern the rest of the site already uses (see base.css). */

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* Nav keeps its natural height (see partials/header.php); the split
   view fills whatever's left below it, same approach as tracks.css. */
.site-header {
    flex-shrink: 0;
}

.trip-layout {
    display: grid;
    flex: 1;
    min-height: 0;
    position: relative; /* containing block for .lightbox, see below */
}

.trip-map-pane {
    grid-area: map;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.trip-map {
    width: 100%;
    height: 100%;
}

/* Pink page background framing the white card -- same .page/.card
   pattern as feed.php etc. (see base.css), just scoped to this pane
   instead of the whole body, since the map pane sits alongside it. */
.trip-content-pane {
    grid-area: content;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    background: var(--color-bg);
}

/* Vertical rhythm for the whole content pane -- headlines, body text,
   photos -- rather than relying on browser-default h1/h2/p/ul margins. */
.trip-content-pane h1,
.trip-content-pane h2 {
    margin: 2.5rem 0 1rem;
}

.trip-content-pane h1:first-child {
    margin-top: 0;
}

.trip-content-pane .card > p,
.trip-content-pane .card > ul {
    margin: 0 0 1rem;
}

.trip-photo-grid {
    margin-bottom: 1rem;
}

/* .prose (trip body/experiences markdown text) moved to base.css -- the
   static pages (Om Turen, Hjälp, ...) render markdown the same way and
   share the same treatment. */

.trip-resizer {
    grid-area: resizer;
    touch-action: none;
    user-select: none;
    background: var(--color-border, #ececec);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Small pill grip -- the only visual cue that the divider is draggable,
   since a plain 6px/20px strip doesn't read as interactive on its own. */
.trip-resizer-handle {
    background: var(--color-text-muted, #6b6b6b);
    border-radius: 999px;
}

/* Desktop / tablet: map left, content right, vertical divider dragged
   left-right. --trip-map-size is a width percentage of the pane. Body
   text also runs slightly larger here -- there's room for it, unlike
   on phone sizes, which are left alone. */
@media (min-width: 768px) {
    .trip-layout {
        grid-template-columns: var(--trip-map-size, 50%) 6px 1fr;
        grid-template-areas: "map resizer content";
    }

    .trip-resizer {
        cursor: col-resize;
    }

    .trip-resizer-handle {
        width: 4px;
        height: 2.5rem;
    }

    .trip-content-pane {
        font-size: 1.0625rem;
    }
}

.trip-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.trip-photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

/* Lightbox -- functional overlay mechanics + the minimum color needed
   for it to work as an overlay at all (a backdrop needs SOME opacity).
   Position/sizing of the controls is final; exact colors are still
   fair game for Oskar's design pass.
   position:absolute + grid-area:content (rather than fixed, or nested
   inside .trip-content-pane) -- sizes/positions against that grid
   area's own edges since .trip-layout is the containing block, so it
   covers exactly the content pane's on-screen bounds regardless of how
   far that pane has been scrolled, while still leaving the map pane
   visible/interactive alongside it. */
.lightbox {
    position: absolute;
    grid-area: content;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
}

/* display:flex has to be scoped to :not([hidden]) -- an unconditional
   display here would override the browser's own [hidden] { display:
   none } (equal specificity, author stylesheet wins), showing the
   lightbox regardless of the hidden attribute's state. */
.lightbox:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    /* Percentages of the lightbox's own box (now scoped to the content
       pane), not vw/vh -- those size against the full viewport, which
       overflowed the pane once the lightbox stopped covering the whole
       screen. */
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
}

.lightbox-caption {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    margin: 0;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem;
}

.lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
}

.lightbox-prev {
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Photo-upload modal -- native <dialog> handles centering + backdrop
   dimming for free (see ::backdrop below), unlike .lightbox above which
   has to fake it with fixed positioning scoped to the content pane.
   Colors/spacing here are functional placeholders, same as the rest of
   this file -- fair game for Oskar's design pass. */
.photo-upload-dialog {
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 1.5rem;
    border: none;
    border-radius: 0.75rem;
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.photo-upload-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.photo-upload-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem;
}

.photo-upload-dialog-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.photo-upload-dialog-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
}

.photo-upload-existing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.photo-upload-existing-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    text-align: center;
}

.photo-upload-existing-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.4rem;
}

.photo-upload-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.photo-upload-dropzone {
    border: 2px dashed var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: border-color 0.15s, background-color 0.15s;
}

.photo-upload-dropzone.is-dragover {
    border-color: var(--color-accent);
    background: rgba(240, 87, 106, 0.06);
}

.photo-upload-dropzone-hint {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.trip-comments {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trip-comments li {
    padding: 0.75rem 0;
}

.trip-comment-meta,
.trip-comment-body {
    margin: 0;
}

/* Mobile: content on top (scrolls normally), map pinned to the bottom,
   horizontal divider dragged up-down. --trip-map-size-mobile is a height. */
@media (max-width: 767.98px) {
    .trip-layout {
        grid-template-rows: 1fr 20px var(--trip-map-size-mobile, 38vh);
        grid-template-areas: "content" "resizer" "map";
    }

    .trip-resizer {
        cursor: row-resize;
    }

    .trip-resizer-handle {
        width: 2.5rem;
        height: 4px;
    }
}