/* ==========================================================================
   Regent Tour — shared site styles
   Linked by every content page. Everything here is scoped to .rts-* classes,
   so existing pages are unaffected unless they opt in by using a block that
   carries these classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Mobile header overlap  (fixes the missing 大標題 on phones)

   The inherited style0604.css sets, at max-width:960px:
       #head_top { position: fixed; }
   The old site compensated with #head_banner{padding-top:60px} and a fixed
   61px .toplogobox. The redesign has neither — its content wrapper is
   .grouprow — so the header (97px tall, opaque white, z-index 9) painted
   straight over the top of the page. Any heading at the top of a page was
   hidden behind it; only pages starting with a tall hero escaped, which is
   why bali looked fine and the tour pages did not.

   Returning the header to normal flow on mobile makes it behave exactly as it
   already does on desktop (position:relative), so content can never slide
   underneath it. Preferred over padding-top compensation, which would need a
   magic number that breaks the moment the logo size changes.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {
    #head_top {
        position: static !important;
    }
}

/* Keep a page's main heading readable on small screens. */
@media screen and (max-width: 767px) {
    .grouprow h1 {
        font-size: 1.75rem;
        line-height: 1.3;
        word-break: break-word;
    }
}

/* --------------------------------------------------------------------------
   1. Block grid — 1 / 2 / 3 / 4 (and 6) columns

   One card per row on phones, two on small tablets, then the chosen count.
   -------------------------------------------------------------------------- */
.rts-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (min-width: 640px) {
    .rts-grid.rts-cols-2,
    .rts-grid.rts-cols-3,
    .rts-grid.rts-cols-4,
    .rts-grid.rts-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .rts-grid.rts-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rts-grid.rts-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rts-grid.rts-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rts-grid.rts-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    /* A single block must be the size of ONE card in a 3-up row and sit on the
       left — not stretch across the full width. Laying it out on a 3-column
       track and pinning children to the first column gives exactly that, and
       keeps working if a second card is added later. */
    .rts-grid.rts-cols-1 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-items: stretch;
    }
    .rts-grid.rts-cols-1 > * {
        grid-column: 1 / 2;
    }
}

/* --------------------------------------------------------------------------
   2. Image + text arrangement
   -------------------------------------------------------------------------- */
.rts-media {
    display: flex;
    gap: 2rem;
    align-items: center;
}
.rts-media > .rts-media-img,
.rts-media > .rts-media-text {
    min-width: 0;
}

/* Side-by-side variants split the space evenly. */
.rts-media-left,
.rts-media-right {
    flex-direction: row;
}
.rts-media-right { flex-direction: row-reverse; }
.rts-media-left  > .rts-media-img,
.rts-media-left  > .rts-media-text,
.rts-media-right > .rts-media-img,
.rts-media-right > .rts-media-text {
    flex: 1 1 0;
}

/* Stacked variants: image and text each take the full width. */
.rts-media-top    { flex-direction: column; align-items: stretch; }
.rts-media-bottom { flex-direction: column-reverse; align-items: stretch; }

.rts-media-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1rem;
}
.rts-media-left  > .rts-media-img,
.rts-media-right > .rts-media-img { height: 20rem; }
.rts-media-top    > .rts-media-img,
.rts-media-bottom > .rts-media-img { height: 16rem; }

/* On phones every arrangement collapses to image-above-text, except
   image-bottom which keeps its deliberate text-first order. */
@media (max-width: 767px) {
    .rts-media-left,
    .rts-media-right,
    .rts-media-top {
        flex-direction: column;
        align-items: stretch;
    }
    .rts-media-bottom { flex-direction: column-reverse; align-items: stretch; }
    .rts-media > .rts-media-img { height: 14rem; }
}

/* Inside a multi-column grid the pairing is always stacked — there is not
   enough width for side-by-side in a 1/3 or 1/4 column. */
.rts-grid .rts-media-left,
.rts-grid .rts-media-right {
    flex-direction: column;
    align-items: stretch;
}
.rts-grid .rts-media > .rts-media-img { height: 12rem; }

/* --------------------------------------------------------------------------
   3. Collage block (集合式圖文) — N images, each with its own caption
   -------------------------------------------------------------------------- */
.rts-collage {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .rts-collage.rts-cols-2,
    .rts-collage.rts-cols-3,
    .rts-collage.rts-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .rts-collage.rts-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rts-collage.rts-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rts-collage.rts-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rts-collage-item { display: flex; flex-direction: column; }
.rts-collage-item img {
    width: 100%;
    height: 14rem;
    object-fit: cover;
    display: block;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.rts-collage-item figcaption {
    margin-top: 0.625rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
}