/* =====================================================================
   PUBLIC LAYOUTS
   =====================================================================
   Five layouts, one set of markup.

   Each layout is a section below, scoped to a class on <body>
   (cc-layout-gallery, cc-layout-showcase, …). None of them adds or
   removes an element — they only rearrange what every page already
   renders. That is deliberate: separate templates per layout drift
   apart, and the one that quietly lost the buy chooser or the hold
   form is the one nobody tested. Here, anything added to the markup
   appears in all five at once.

   Classic has no section: it is the base styling in cc-v3.css and
   cc-public.css, unchanged.

   Every layout is checked at desktop width and at 414px. A layout that
   only works on a laptop is not finished — most visitors to a card
   shop's site are on a phone.
   ===================================================================== */


/* =====================================================================
   GALLERY — a grid of card images, the photo does the selling
   ===================================================================== */

.cc-layout-gallery .cc-results {
    display: grid;
    /* 240px minimum gives four across in the 1180px page — the number
       the layout picker promises. At 210px it quietly became five. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.cc-layout-gallery .cc-result {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.cc-layout-gallery .cc-result-img {
    width: 100%;
    aspect-ratio: 5 / 7;
    border-radius: 0;
}
.cc-layout-gallery .cc-result-main { padding: 12px 14px 0; gap: 4px; }
.cc-layout-gallery .cc-result-title { font-size: 14.5px; }
.cc-layout-gallery .cc-result-buy {
    margin-top: auto;
    padding: 12px 14px 14px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 8px;
}
.cc-layout-gallery .cc-result-price { font-size: 17px; }


/* =====================================================================
   SHOWCASE — big cards, two across, a centred header
   ===================================================================== */

.cc-layout-showcase .cc-pub-bar {
    flex-direction: column;
    height: auto;
    padding: 22px 0 16px;
    gap: 12px;
}
.cc-layout-showcase .cc-pub-brand span { font-size: 24px; }
.cc-layout-showcase .cc-pub-brand img { max-height: 56px; }

.cc-layout-showcase .cc-pub-hero { text-align: center; padding: 96px 0 72px; }
.cc-layout-showcase .cc-pub-hero h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.cc-layout-showcase .cc-pub-hero p { margin-left: auto; margin-right: auto; }
.cc-layout-showcase .cc-pub-cta,
.cc-layout-showcase .cc-pub-stats { justify-content: center; }

.cc-layout-showcase .cc-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}
.cc-layout-showcase .cc-result {
    grid-template-columns: 170px minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding: 22px;
    gap: 22px;
    align-items: start;
}
.cc-layout-showcase .cc-result-img { grid-row: 1 / span 2; }
.cc-layout-showcase .cc-result-title { font-size: 19px; }
.cc-layout-showcase .cc-result-buy {
    grid-column: 2;
    align-items: flex-start;
    min-width: 0;
}
.cc-layout-showcase .cc-result-price { font-size: 26px; }

.cc-layout-showcase .cc-pub-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }


/* =====================================================================
   COMPACT — dense rows, the most cards per screen
   ===================================================================== */

.cc-layout-compact .cc-pub-hero { padding: 40px 0 32px; }
.cc-layout-compact .cc-pub-section { padding: 34px 0; }

/* One bordered list rather than a stack of separate cards: the gaps and
   borders between cards are exactly what spends the screen space this
   layout exists to save. */
.cc-layout-compact .cc-results {
    gap: 0;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r);
    overflow: hidden;
}
.cc-layout-compact .cc-result {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 7px 12px;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--cc-line);
    border-radius: 0;
}
.cc-layout-compact .cc-result:last-child { border-bottom: 0; }
.cc-layout-compact .cc-result:hover { background: var(--cc-surface-2); }
.cc-layout-compact .cc-result-img span { display: none; } /* "No photo" does not fit in 38px */
.cc-layout-compact .cc-result-main {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
}
.cc-layout-compact .cc-result-title { font-size: 14px; }
.cc-layout-compact .cc-result-sub { font-size: 12px; }
.cc-layout-compact .cc-result-main .cc-pill { font-size: 10.5px; padding: 1px 7px; }
.cc-layout-compact .cc-result-buy {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.cc-layout-compact .cc-result-price { font-size: 15px; }

.cc-layout-compact .cc-pub-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }


/* =====================================================================
   BINDER — cards in pockets, like a page in a collector's binder
   ===================================================================== */

/* The page. Three pockets across, as a real nine-pocket sheet. */
.cc-layout-binder .cc-results,
.cc-layout-binder .cc-pub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06)),
        var(--cc-surface-2);
    border: 1px solid var(--cc-line);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* A pocket: clear plastic over the card — a faint sheen and a slightly
   heavier top edge where the sleeve opens. */
.cc-layout-binder .cc-result,
.cc-layout-binder .cc-tile {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 0;
    background: color-mix(in srgb, var(--cc-surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc-text) 12%, transparent);
    border-top-width: 3px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.cc-layout-binder .cc-result::after,
.cc-layout-binder .cc-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 46%, transparent 54%);
}
.cc-layout-binder .cc-result-img,
.cc-layout-binder .cc-tile-img {
    width: 100%;
    aspect-ratio: 5 / 7;
    border-radius: 3px;
}
.cc-layout-binder .cc-result-main { padding: 9px 2px 0; gap: 3px; }
.cc-layout-binder .cc-result-title { font-size: 13.5px; }
.cc-layout-binder .cc-result-sub { font-size: 11.5px; }
.cc-layout-binder .cc-result-buy {
    margin-top: auto;
    padding: 8px 2px 2px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 6px;
    position: relative;
    z-index: 1;   /* above the sheen, so the button stays clickable */
}
.cc-layout-binder .cc-result-price { font-size: 15.5px; }


/* =====================================================================
   PHONES
   =====================================================================
   Each layout keeps its character at 414px rather than collapsing into
   one generic list — a shop that picked Binder should still see
   pockets on a phone, just fewer across.
   ===================================================================== */
@media (max-width: 640px) {
    .cc-layout-gallery .cc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cc-layout-gallery .cc-result-buy { flex-direction: column; align-items: stretch; }
    .cc-layout-gallery .cc-result-buy .cc-btn { text-align: center; }

    .cc-layout-showcase .cc-results { grid-template-columns: 1fr; gap: 18px; }
    .cc-layout-showcase .cc-result { grid-template-columns: 110px minmax(0, 1fr); padding: 16px; gap: 16px; }
    .cc-layout-showcase .cc-result-price { font-size: 21px; }
    /* Price above the button, not beside it: side by side, a large
       price left the button about 90px and "Buy on eBay" broke across
       two lines. */
    .cc-layout-showcase .cc-result-buy { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cc-layout-showcase .cc-pub-hero { padding: 56px 0 44px; }

    .cc-layout-compact .cc-result { grid-template-columns: 32px minmax(0, 1fr); }
    .cc-layout-compact .cc-result-buy { grid-column: 2; justify-content: space-between; }

    .cc-layout-binder .cc-results,
    .cc-layout-binder .cc-pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; }
    .cc-layout-binder .cc-result-buy { flex-direction: column; align-items: stretch; }
    .cc-layout-binder .cc-result-buy .cc-btn { text-align: center; }
}


/* A buy button's label never breaks mid-phrase in any layout. If there
   is not room for "Buy on eBay" on one line, the layout above has a
   problem worth seeing — a wrapped button hides it. */
.cc-result-buy .cc-btn { white-space: nowrap; }

/* ---------------------------------------------------------------------
   Admin preview banner
   --------------------------------------------------------------------- */
.cc-preview-bar {
    background: #1e293b;
    color: #f8fafc;
    font-size: 13px;
    text-align: center;
    padding: 8px 16px;
}
.cc-preview-bar a { color: #5eead4; margin-left: 8px; }