/* =========================================================
   RideMonkey — Shared Tile Grid System
   =========================================================
   Used by any page that needs the segmented "widget grid"
   layout (currently Home and Garage). A page opts in by:

   1. Wrapping its content in <div class="rm-tile-grid">
   2. Giving each child tile the shared .rm-tile / .rm-tile-head
      chrome defined here
   3. Adding its OWN grid-column/grid-row placement rules for
      each tile, kept in that page's own CSS file and
      namespaced under that page's own class — e.g.
      .rm-home .rm-w-bikes { grid-column: ...; grid-row: ...; }
      .rm-garage .rm-w-mybikes { grid-column: ...; grid-row: ...; }

   The classes in THIS file are deliberately left un-namespaced
   — .rm-tile-grid, .rm-tile, .rm-tile-head are meant to be
   shared/reused across pages, unlike page-specific content
   classes (e.g. .rm-bike-carousel), which still need their own
   page namespace to avoid bleeding onto other pages (see the
   long comment in home.css about exactly this bug happening
   once already).

   Fit-to-viewport height is handled at runtime by
   assets/js/tile-grid-fit.js, which measures real available
   space for any .rm-tile-grid element on the page — a fixed
   CSS value can't account for variable header/nav height. See
   that file for the full explanation.
   ========================================================= */

.rm-tile-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 12px;

    /* Without this, a grid container won't shrink below the
       natural content-size of its items, even with an explicit
       height set — this is what lets the JS-set height below
       actually take effect instead of being overridden. */
    min-height: 0;
}

@media (min-width: 768px) {
    .rm-tile-grid {
        /* Small fallback only for the brief instant before JS
           runs (or if it's disabled) — must stay well below any
           realistic computed height, or it silently overrides a
           legitimately smaller value the script sets. */
        min-height: 200px;
    }
}


/* ---------------------------------------------------------
   Shared tile chrome
   --------------------------------------------------------- */

.rm-tile {
    background: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 14px;

    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.07), 0 2px 6px rgba(34, 34, 34, 0.05);

    padding: 10px 12px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
    min-height: 0; /* stops tile content forcing the grid row taller than intended */
}

.rm-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* bleeds the header out to the tile's real edges so the
       orange rule below spans the full tile width, not just
       the inner padded area */
    margin: 0 -12px 8px -12px;
    padding: 0 12px 6px 12px;

    border-bottom: 2px solid #ff4b00;

    flex: 0 0 auto;
}

.rm-tile-head h2 {
    margin: 0;

    display: flex;
    align-items: center;
    gap: 6px;

    color: #222222;

    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.rm-tile-head a {
    color: #ff4b00;
    text-decoration: none;

    font-size: 11px;
    font-weight: 600;
}

.rm-tile-head .rm-tile-total {
    color: #666666;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}


/* ---------------------------------------------------------
   Shared carousel arrows — guaranteed, discoverable scrolling
   for any horizontal card row (currently Home and Garage's
   bike carousels), on top of whatever native drag/swipe/
   scroll-wheel support a browser gives for free. A page opts
   in with:

     <div class="rm-carousel">
       <button type="button" class="rm-carousel-arrow rm-carousel-prev" aria-label="Previous">‹</button>
       <div class="rm-carousel-track ...page-specific-scroll-class...">
         ...cards...
       </div>
       <button type="button" class="rm-carousel-arrow rm-carousel-next" aria-label="Next">›</button>
     </div>

   The actual scroll behavior (click -> scrollBy) is handled by
   assets/js/carousel.js, which works for any .rm-carousel found
   on the page.
   --------------------------------------------------------- */

.rm-carousel {
    display: flex;
    gap: 6px;

    flex: 1 1 auto;
    min-height: 0;

    /* align-items is left at its default (stretch) so the track
       — and the cards inside it — fill the tile's full
       available height, not just their own natural content
       height. The arrow buttons opt out of that via
       align-self below, since a 28px circle stretching to fill
       the tile's full height would look absurd. */
}

.rm-carousel-track {
    flex: 1 1 auto;
    min-height: 0;

    scroll-snap-type: x mandatory;
}

/* Only applied by JS when the cards genuinely don't overflow
   (1–2 cards) — centering via justify-content AND having
   scrollable overflow at the same time is a known bad
   combination: the browser centers first, then locks whatever
   spills past the start edge behind a scroll position that can
   never go negative to reach it. When there's overflow (3+
   cards), this class is deliberately absent and JS centers a
   specific card via actual scroll position instead. */
.rm-carousel-track.rm-carousel-fits {
    justify-content: center;
}

.rm-carousel-arrow {
    align-self: center;
    flex: 0 0 auto;

    width: 28px;
    height: 28px;
    border-radius: 50%;

    background: #ffffff;
    border: 1px solid #dddddd;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ff4b00;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.rm-carousel-arrow[disabled] {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}


/* ---------------------------------------------------------
   Shared placeholder tile style — reserved space, pending a
   real data source or content decision. Never shown as if it
   were live/finished.
   --------------------------------------------------------- */

.rm-tile-placeholder {
    align-items: center;
    justify-content: center;

    background: repeating-linear-gradient(
        45deg,
        #faf9f6,
        #faf9f6 6px,
        #f2f0ea 6px,
        #f2f0ea 12px
    );

    border-style: dashed;

    text-align: center;
    color: #666666;
    font-size: 10px;
    gap: 4px;
}

.rm-tile-placeholder .rm-glyph {
    font-size: 18px;
    color: #c9c5bc;
}

.rm-tile-placeholder .rm-tag {
    font-size: 8.5px;
    letter-spacing: .3px;
    color: #c9c5bc;
    margin-top: 2px;
}


/* =========================================================
   Mobile — generic collapse to a single flowing column.
   Which tiles actually show/hide/reorder on mobile is a
   page-specific decision (e.g. Home hides most tiles below
   this breakpoint) — that logic stays in each page's own CSS.
   ========================================================= */

@media (max-width: 767px) {

    .rm-tile-grid {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

}