/* ============================================================
   Baseball Cards module — grid status styling, detail-page image
   gallery, and spec table. Reuses existing tokens/classes
   (.projects-grid, .project-card, .card-corner-badge) so it stays
   visually consistent with the rest of the site.
   ============================================================ */

.card-tile-price {
  font-weight: 700;
  color: var(--color-primary);
}
.card-tile-sold .project-card-media img {
  opacity: .55;
  filter: grayscale(40%);
}
.card-tile-sold .card-corner-badge {
  background: var(--color-dark);
  color: #fff;
}

/* ---- Card detail page: image gallery ---- */
.card-detail-gallery { margin: 1.5rem 0; }
.card-detail-main-image { width: 100%; max-height: 480px; object-fit: contain; background: var(--color-background); border-radius: var(--radius-md); }
.card-detail-thumbs { display: flex; gap: .75rem; margin-top: .75rem; flex-wrap: wrap; }
.card-detail-thumb {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s;
}
.card-detail-thumb:hover { border-color: var(--color-primary); }

/* ---- Card detail page: spec sheet table ---- */
.card-spec-sheet { margin: 2rem 0; }
.card-spec-table { width: 100%; border-collapse: collapse; }
.card-spec-table th, .card-spec-table td {
  text-align: left;
  padding: .7rem 0;
  border-bottom: 1px solid var(--color-line);
}
.card-spec-table th { width: 180px; opacity: .7; font-weight: 600; }
.card-spec-table td a { color: var(--color-primary); text-decoration: none; font-weight: 600; }

@media (max-width: 600px) {
  .card-spec-table th { width: 130px; }
}

/* ---- Card grid thumbnails: portrait card-shaped crop, not the
   wide landscape box used for Project/Blog photos ---- */
.card-tile .project-card-media {
  aspect-ratio: 3 / 4;
  height: auto;
}
.card-tile .project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Placeholder-only tiles (no real image uploaded yet) shouldn't get
   the same crop-to-fill treatment as real photos — the placeholder
   graphic is landscape-shaped internally and looks stretched/zoomed
   when force-cropped into the taller portrait box. Contain it neatly
   centered instead. */
.card-tile-no-image .project-card-media {
  background: #fff;
}
.card-tile-no-image .project-card-media img {
  object-fit: contain;
  padding: 2rem;
}

/* ---- Stats Band circle sizing ----
   1.6rem text in an 84px circle overflows badly once a value wraps
   to two lines (e.g. a brand name, or "Over 2000") — this affects
   both the generic Stats Band block and the new Card Stats Band.
   Slightly bigger circle, smaller/tighter text, fits comfortably. */
.stat-badge {
  width: 100px;
  height: 100px;
}
.stat-value {
  font-size: 1.05rem;
  line-height: 1.15;
  text-align: center;
  padding: 0 8px;
  word-break: break-word;
}

/* ---- Featured Card block ---- */
.block-featured-card .card-tile-price {
  font-size: 1.3rem;
}
/* The block wasn't constrained to the same 1200px content width as
   the Gallery page, so with only 1-3 tiles the grid stretched each
   one to fill the entire page — capping column width and centering
   keeps it looking like compact featured tiles, not oversized hero
   images, regardless of page width or how many cards are chosen. */
.block-featured-card {
  max-width: 1200px;
  margin: 0 auto;
}
.block-featured-card .cards-grid {
  grid-template-columns: repeat(var(--featured-count, 3), minmax(0, 260px));
  justify-content: center;
}

/* ---- Mobile refinements ---- */
@media (max-width: 600px) {
  .block-stats-band {
    gap: 1.75rem;
  }
  .stat-badge {
    width: 80px;
    height: 80px;
  }
  .stat-value {
    font-size: 0.92rem;
  }
  .card-detail-thumb {
    width: 56px;
    height: 56px;
  }
  .card-detail-main-image {
    max-height: 320px;
  }
}

/* ---- Gallery / Brand listing pages: wider, denser 4-across grid ----
   Scoped to .block-cards-listing specifically so the Featured Card
   block (which sets its own --featured-count columns) and any other
   .cards-grid usage elsewhere are unaffected. */
.block-cards-listing {
  max-width: 1400px;
}
.block-cards-listing .cards-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .block-cards-listing .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* phones: see "Cards on phones" at the end of this file */

/* ---- Pagination (Gallery, Brand pages) ---- */
.pagination {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  margin: 2.5rem 0 1rem;
  flex-wrap: wrap;
}
.pagination-link {
  padding: .5rem .9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-dark);
  font-weight: 600;
  font-size: .9rem;
  transition: background .15s;
}
.pagination-link:hover {
  background: var(--color-background);
}
.pagination-current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.pagination-ellipsis {
  padding: .5rem .3rem;
  opacity: .6;
}

/* ---- Featured Card block: mobile ----
   The column count matches how many cards are selected (up to 5) so
   they fit one row on desktop, but that same count crammed into a
   narrow phone screen squeezes each tile down to a sliver. Below
   these widths, wrap instead of forcing everything into one row. */
@media (max-width: 700px) {
  .block-featured-card .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .block-featured-card .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Banners: mobile ----
   Every page banner is a ".block-banner" (the Gallery / Card / Brand title
   banners add ".page-title-banner"). On phones the theme stacks it in a
   column and the banner picture then runs full width at its natural height,
   which is what made the banners so tall. Here the picture is cut down to a
   short strip (title banners drop it altogether) and the spacing is tightened.
   Nothing is hidden by height, so the text can never be clipped. */
@media (max-width: 720px) {
  .block-banner {
    min-height: 0 !important;
    padding: 1.6rem 1.25rem !important;
    gap: .9rem !important;
  }
  .block-banner .banner-copy { padding: 0 !important; }
  .block-banner h1 { font-size: 1.7rem !important; line-height: 1.15 !important; }
  .block-banner .banner-media { flex: none !important; width: 100%; }
  .block-banner .banner-media img {
    height: 150px !important;
    max-height: 150px !important;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
  }
  .page-title-banner .banner-media { display: none !important; }
  .page-title-banner { padding: 1.6rem 1.25rem !important; }
  .page-title-banner h1 { font-size: 1.55rem !important; margin: 0 !important; }
  .breadcrumb-pill { padding: .35rem .9rem !important; font-size: .78rem !important; }

  /* Hero slider banners (e.g. "How I've graded"): the theme pins the picture
     slide to the full height of the slider, so give it natural height instead. */
  .block-hero-slider { min-height: 0 !important; }
  .hero-slide,
  .hero-slide.active,
  .hero-slide-full-bg.active {
    padding: 1.75rem 1.25rem !important;
    gap: .9rem !important;
    min-height: 0 !important;
  }
  .hero-slide-full-bg.active {
    position: relative !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    width: 100% !important;
    min-height: 230px !important;
    display: flex !important;
    align-items: flex-end !important;
    text-align: left !important;
  }
  .hero-slide .banner-copy,
  .hero-slide-full-bg .banner-copy { padding: 0 !important; max-width: 100% !important; }
  .hero-slide h1 { font-size: 1.7rem !important; line-height: 1.15 !important; }
  .hero-slide .banner-media img { height: 150px !important; max-height: 150px !important; object-fit: cover; }
  .hero-slider-dots { bottom: .6rem !important; }
}

/* ---- Sidebar + main content: mobile ordering ----
   .content-with-sidebar (Gallery, Brand, and — since this stylesheet
   loads sitewide — Blog/Projects too) stacks to one column on mobile,
   but the sidebar (search/filters) sits after the main content in the
   HTML, so it silently ends up below a long list of results — on the
   Gallery specifically, below all 20 cards. Moving it first means the
   search/filter controls are usable without scrolling past everything. */
@media (max-width: 900px) {
  .content-with-sidebar aside {
    order: -1;
  }
}


/* ---- Rare / valuable cards ---- */
.card-rare-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;
  background: linear-gradient(135deg, #f7d54a, #d4a017);
  color: #3a2a00;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .25rem .55rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  line-height: 1.2;
  pointer-events: none;
}
.project-card-media { position: relative; }
.card-rare-banner {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1rem 0;
  padding: .9rem 1.1rem;
  border: 2px solid #d4a017;
  border-radius: var(--radius-md, 8px);
  background: linear-gradient(135deg, rgba(247,213,74,.22), rgba(212,160,23,.12));
}
.card-rare-banner-star { font-size: 2.4rem; line-height: 1; color: #d4a017; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.card-rare-banner span:not(.card-rare-banner-star) { font-size: .95rem; opacity: .85; }
@media (max-width: 600px) {
  .card-rare-badge { font-size: .64rem; padding: .2rem .45rem; }
  .card-rare-banner-star { font-size: 1.9rem; }
}

/* ---- Card page: back link / actions ---- */
.card-back-link { display: inline-block; margin-bottom: .75rem; font-weight: 600; text-decoration: none; color: var(--color-primary, inherit); }
.card-back-link:hover { text-decoration: underline; }
.card-detail-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---- Landscape card pictures in gallery tiles ----
   The tile frame is portrait; a landscape picture used to be cropped to a
   narrow slice. Now it is shown whole, centred, over a soft blurred copy of
   itself so the frame stays filled and looks intentional. */
.card-tile .project-card-media.card-media-landscape {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9e4d2;
}
.card-tile .project-card-media.card-media-landscape::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: var(--card-bg) center / cover no-repeat;
  filter: blur(16px) saturate(1.1);
  opacity: .55;
}
.card-tile .project-card-media.card-media-landscape img {
  position: relative;
  width: 92%;
  height: auto;
  max-height: 92%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* ---- Measured centering ---- */
.centering-tier { opacity: .75; font-size: .92em; }
.centering-note { margin-top: .5rem; }

.grading-link-row { margin: .75rem 0 0; }
.centering-tier a, a.centering-tier { text-decoration: underline; }


/* ---- Gallery filters: folded drawer + chips on phones ---- */
.filter-drawer > summary { list-style: none; }
.filter-drawer > summary::-webkit-details-marker { display: none; }
/* Desktop: drawer is always open and its button is hidden */
@media (min-width: 901px) {
  .filter-drawer-toggle { display: none; }
}
@media (max-width: 900px) {
  .content-with-sidebar aside { order: -1; margin-bottom: 1rem; }
  .content-with-sidebar aside > .sidebar-box { margin-bottom: .75rem; padding: 1rem 1.1rem; }
  .content-with-sidebar aside > .sidebar-box h3 { font-size: 1rem; margin-bottom: .6rem; }

  .filter-drawer-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .85rem 1.1rem; cursor: pointer; user-select: none;
    background: var(--color-surface, #fff); border: 1px solid var(--color-line, rgba(0,0,0,.12));
    border-radius: 999px; font-weight: 700; color: var(--color-dark, inherit);
  }
  .filter-drawer-toggle::after { content: "+"; font-size: 1.3rem; line-height: 1; margin-left: auto; }
  .filter-drawer[open] .filter-drawer-toggle::after { content: "\2212"; }
  .filter-drawer-hint { font-weight: 400; font-size: .8rem; opacity: .6; }
  .filter-drawer[open] .filter-drawer-hint { display: none; }
  .filter-count {
    font-style: normal; display: inline-block; min-width: 1.4rem; padding: 0 .4rem; margin-left: .35rem;
    text-align: center; border-radius: 999px; background: var(--color-primary, #b0152f); color: #fff; font-size: .8rem;
  }
  .filter-drawer-body { padding-top: .75rem; }
  .filter-drawer-body .sidebar-box { margin-bottom: .75rem; padding: 1rem 1.1rem; }
  .filter-drawer-body .sidebar-box h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin-bottom: .6rem; }

  /* Long lists become wrapping chips */
  .filter-drawer-body .sidebar-cat-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
  .filter-drawer-body .sidebar-cat-list li { border: 0; padding: 0; margin: 0; }
  .filter-drawer-body .sidebar-cat-list a {
    display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .9rem;
    border: 1px solid var(--color-line, rgba(0,0,0,.18)); border-radius: 999px; font-size: .9rem;
    background: var(--color-surface, #fff); text-decoration: none;
  }
  .filter-drawer-body .sidebar-cat-list a svg { display: none; }
  .filter-drawer-body .sidebar-cat-list a.sidebar-active { background: var(--color-dark, #1a2340); color: #fff; border-color: transparent; }
}


/* ---- Mobile menu: submenu parent ----
   The theme makes a parent link a full-width flex row with its label
   pushed to the left and the arrow to the right, while every other link
   is centred. Centre it too (arrow sits right after the label) and
   centre the submenu items under it. */
@media (max-width: 900px) {
  .main-nav .nav-item-has-children > .nav-parent-link {
    justify-content: center !important;
    text-align: center;
    gap: .45rem;
  }
  .main-nav .nav-item-has-children > .nav-parent-link::after {
    margin-left: 0 !important;
    transition: transform .2s;
  }
  .main-nav .nav-item-has-children.mega-menu-open > .nav-parent-link::after { transform: rotate(180deg); }
  .main-nav .nav-item-has-children { text-align: center; }
  .main-nav .mega-menu { padding: 0 0 .5rem !important; background: transparent; }
  .main-nav .mega-menu-item { white-space: normal; text-align: center; font-weight: 500; opacity: .85; padding: .6rem 1.5rem; }
}

/* ---- Cards on phones ----
   With thousands of cards a single huge picture per row is far too long to scroll.
   Default: compact 2-across grid. The Grid / List switch (above the cards)
   offers a denser list with small thumbnails. */
.cards-view-toggle { display: none; }
@media (max-width: 600px) {
  .cards-view-toggle { display: flex; gap: .4rem; margin: .25rem 0 .9rem; }
  .cards-view-toggle button {
    flex: 1; padding: .55rem .5rem; border: 1px solid var(--color-line, #ddd); border-radius: 999px;
    background: var(--color-surface, #fff); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; color: var(--color-dark, inherit);
  }
  .cards-view-toggle button.active { background: var(--color-dark, #1a2340); color: #fff; border-color: transparent; }

  /* compact grid */
  .block-cards-listing .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: .5rem; }
  .block-cards-listing .card-tile { border-radius: 14px; }
  .block-cards-listing .card-tile h3 { font-size: .88rem; line-height: 1.25; margin: .6rem 0 0; padding: 0 .65rem; }
  .block-cards-listing .card-tile .project-client { display: block; font-size: .72rem; padding: 0 .65rem; opacity: .7; }
  .block-cards-listing .card-tile p { padding: 0 .65rem .65rem; margin: .25rem 0 0; font-size: .8rem; min-height: .4rem; }
  .block-cards-listing .card-tile .card-corner-badge { top: .4rem; right: .4rem; font-size: .6rem; padding: .18rem .5rem; }
  .block-cards-listing .card-tile .card-rare-badge { top: .4rem; left: .4rem; font-size: .56rem; padding: .16rem .4rem; }

  /* compact list: small thumbnail on the left, details on the right */
  .block-cards-listing .cards-grid.cards-view-list { grid-template-columns: 1fr; gap: .55rem; }
  .block-cards-listing .cards-view-list .card-tile {
    display: grid; grid-template-columns: 78px 1fr; column-gap: .85rem; align-content: center; align-items: center;
    padding: .55rem; border-radius: 12px;
  }
  .block-cards-listing .cards-view-list .card-tile .project-card-media { grid-row: 1 / span 3; border-radius: 6px; overflow: hidden; }
  .block-cards-listing .cards-view-list .card-tile h3 { margin: 0; padding: 0; font-size: .95rem; align-self: end; }
  .block-cards-listing .cards-view-list .card-tile .project-client { padding: 0; font-size: .78rem; }
  .block-cards-listing .cards-view-list .card-tile p { padding: 0; margin: 0; align-self: start; }
  .block-cards-listing .cards-view-list .card-tile .card-corner-badge { top: .2rem; right: .2rem; font-size: .5rem; padding: .1rem .3rem; }
  .block-cards-listing .cards-view-list .card-tile .card-rare-badge { top: auto; bottom: .2rem; left: .2rem; font-size: .48rem; padding: .1rem .3rem; }
  .block-cards-listing .cards-view-list .card-tile .project-card-media.card-media-landscape img { width: 96%; max-height: 96%; }
}

/* ---- Gallery on phones / tablets: sticky search + filter bar and filter sheet ---- */
.cards-mbar, .cf-sheet { display: none; }
.cards-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .9rem; }
.cards-active-filters:empty { display: none; }
@media (max-width: 900px) {
  .content-with-sidebar > aside { display: none; }          /* replaced by the bar + sheet below */
  .cards-desktop-only { display: none; }
  .content-with-sidebar > div { min-width: 0; }

  .cards-mbar {
    display: flex; align-items: center; gap: .5rem;
    position: sticky; top: 0; z-index: 40;
    margin: 0 0 .5rem; padding: .55rem 0; box-sizing: border-box; max-width: 100%;
    background: var(--color-background, #f6f5df);
    box-shadow: 0 6px 10px -8px rgba(0,0,0,.25);
  }
  .cards-mbar-search {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem;
    background: #fff; border: 1px solid var(--color-line, #ddd); border-radius: 999px; padding: 0 .85rem; height: 44px;
  }
  .cards-mbar-search svg { flex: none; opacity: .55; }
  .cards-mbar-search input[type=search] {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; /* 16px stops iOS zooming in */
    -webkit-appearance: none; appearance: none; padding: 0; height: 100%;
  }
  .cards-mbar-btn {
    flex: none; display: inline-flex; align-items: center; gap: .4rem; height: 44px; padding: 0 .9rem;
    border: 0; border-radius: 999px; background: var(--color-dark, #1a2340); color: #fff; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
  }
  .cards-mbar .filter-count { font-style: normal; background: #fff; color: var(--color-primary, #b0152f); border-radius: 999px; min-width: 1.3rem; text-align: center; font-size: .75rem; padding: 0 .35rem; }
  .cards-mbar .cards-view-toggle { display: flex; flex: none; gap: 0; margin: 0; border: 1px solid var(--color-line, #ddd); border-radius: 999px; overflow: hidden; background: #fff; }
  .cards-mbar .cards-view-toggle button { flex: none; width: 40px; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 1.05rem; color: var(--color-dark, inherit); }
  .cards-mbar .cards-view-toggle button.active { background: var(--color-dark, #1a2340); color: #fff; }

  .cards-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; }
  .cf-clear { font-size: .85rem; font-weight: 700; margin-left: .25rem; }

  .cf-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .cf-chip {
    display: inline-block; padding: .5rem .95rem; border: 1px solid var(--color-line, #ccc); border-radius: 999px; background: #fff;
    font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--color-dark, inherit); line-height: 1.2;
  }
  .cf-chip-on { background: var(--color-dark, #1a2340); color: #fff; border-color: transparent; }
  .cards-active-filters .cf-chip { padding: .35rem .75rem; font-size: .82rem; }

  /* bottom sheet */
  .cf-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 200; }
  .cf-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
  .cf-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; max-height: 82dvh; display: flex; flex-direction: column;
    background: var(--color-background, #f6f5df); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.25);
  }
  .cf-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem .5rem; font-size: 1.1rem; }
  .cf-x { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: inherit; padding: 0 .3rem; }
  .cf-body { overflow-y: auto; padding: 0 1.25rem 1rem; -webkit-overflow-scrolling: touch; }
  .cf-body h4 { margin: 1rem 0 .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; opacity: .6; }
  .cf-foot { display: flex; gap: .6rem; padding: .8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-line, #ddd); background: inherit; }
  .cf-foot .btn { flex: 1; text-align: center; justify-content: center; }
  html.cf-lock, html.cf-lock body { overflow: hidden; }
}


/* ---- Gallery on desktop: wider results, sticky filter column on the left ---- */
.cf-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cf-chip {
  display: inline-block; padding: .45rem .9rem; border: 1px solid var(--color-line, #ccc); border-radius: 999px; background: #fff;
  font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--color-dark, inherit); line-height: 1.2; transition: background .15s, border-color .15s;
}
a.cf-chip:hover { border-color: var(--color-primary, #b0152f); }
.cf-chip-on { background: var(--color-dark, #1a2340); color: #fff; border-color: transparent; }
.cf-chip-on:hover { background: var(--color-primary, #b0152f); }
.cf-clear { font-size: .85rem; font-weight: 700; }
.cf-side-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .25rem; }
.cf-side h4 { margin: 1.1rem 0 .5rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; opacity: .6; }
@media (min-width: 901px) {
  .block-cards-listing .content-with-sidebar { max-width: 1400px; grid-template-columns: 270px minmax(0, 1fr); gap: 2rem; }
  .block-cards-listing .content-with-sidebar > aside { order: -1; position: sticky; top: 6.5rem; align-self: start; max-height: calc(100vh - 7.5rem); overflow-y: auto; }
  .block-cards-listing .content-with-sidebar > aside .sidebar-box { margin-bottom: 1rem; }
}

/* ---- Mobile menu: the parent link goes to its own page, a separate arrow opens the dropdown ---- */
.nav-sub-toggle { display: none; }
@media (max-width: 900px) {
  .main-nav .nav-item-has-children { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
  .main-nav .nav-item-has-children > .nav-parent-link { display: block !important; width: auto; padding-right: .25rem; }
  .main-nav .nav-item-has-children > .nav-parent-link::after { display: none !important; }
  .nav-sub-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -12px;
    border: 0; background: none; cursor: pointer; color: var(--color-dark, inherit); border-radius: 50%;
  }
  .nav-sub-toggle::before {
    content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg); opacity: .65; transition: transform .2s;
  }
  .nav-item-has-children.mega-menu-open > .nav-sub-toggle::before { transform: translateY(2px) rotate(225deg); }
  .main-nav .nav-item-has-children > .mega-menu { flex-basis: 100%; width: 100%; }
}

/* ---- Gallery: sort, A-Z surname index, jump to page ---- */
.cards-resultsbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.cards-resultsbar .field-hint { margin: 0; }
.cards-sort { margin: 0; }
.cards-sort label { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; }
.cards-sort select {
  font: inherit; font-size: .9rem; font-weight: 600; padding: .45rem 2rem .45rem .8rem; border: 1px solid var(--color-line, #ccc);
  border-radius: 999px; background-color: #fff; cursor: pointer; max-width: 100%;
}
.az-index { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0 0 1rem; }
.az-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; opacity: .6; margin-right: .35rem; }
.az-letter {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 .25rem; border-radius: 8px;
  font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--color-dark, inherit); border: 1px solid transparent;
}
a.az-letter:hover { border-color: var(--color-primary, #b0152f); }
.az-on { background: var(--color-dark, #1a2340); color: #fff !important; }
.az-off { opacity: .25; }
.jump-to-page { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 2rem; font-size: .9rem; flex-wrap: wrap; }
.jump-to-page label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.jump-to-page input[type=number] { width: 4.6rem; font: inherit; font-size: 16px; padding: .4rem .5rem; border: 1px solid var(--color-line, #ccc); border-radius: var(--radius-sm, 8px); text-align: center; }
.jump-to-page button { cursor: pointer; font: inherit; background: #fff; }
@media (max-width: 900px) {
  .cards-resultsbar { flex-wrap: nowrap; }
  .cards-sort label span, .cards-sort .sort-word { display: none; }
  /* one scrollable row of letters on phones, so the index doesn't eat the screen */
  .az-index { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .25rem; margin-right: -1rem; padding-right: 1rem; }
  .az-index::-webkit-scrollbar { display: none; }
  .az-label { display: none; }
  .az-letter { flex: none; min-width: 34px; height: 36px; background: #fff; border-color: var(--color-line, #ddd); }
  .az-on { background: var(--color-dark, #1a2340); }
  .az-off { display: none; }
}

/* ===== Key cards page ===== */
.key-cards-page { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.kc-intro { max-width: 760px; margin-bottom: 1rem; }
.kc-summary { background: #fffaf0; border: 1px solid #e8d8a8; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.kc-summary-num strong { font-size: 2rem; color: #b8860b; }
.kc-summary-num span { font-size: 1.05rem; }
.kc-bar { height: 10px; background: #eee3c4; border-radius: 99px; overflow: hidden; margin-top: .6rem; }
.kc-bar span { display: block; height: 100%; background: linear-gradient(90deg, #d4a017, #f2c94c); border-radius: 99px; }
.kc-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.kc-chip, .kc-toggle { padding: .4rem .8rem; border: 1px solid #ccc; border-radius: 99px; background: #fff; text-decoration: none; color: inherit; font-size: .9rem; }
.kc-chip em { font-style: normal; opacity: .7; margin-left: .2rem; }
.kc-chip.has { border-color: #d4a017; background: #fff8e0; }
.kc-toggle { margin-left: auto; }
.kc-toggle.on { background: #d4a017; border-color: #d4a017; color: #fff; }
.kc-set { margin-bottom: 2.5rem; scroll-margin-top: 6.5rem; }
.kc-set-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 2px solid #eee; margin-bottom: 1rem; }
.kc-set-head h2 { margin: 0 0 .4rem; }
.kc-set-count { font-size: .9rem; opacity: .7; }
.kc-set-count.has { color: #b8860b; opacity: 1; font-weight: 600; }
.kc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.kc-tile { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .7rem; border-radius: 12px; text-decoration: none; color: inherit; background: #fff; border: 1px solid #ddd; }
.kc-tile .kc-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 7; background: #f4f4f4; border-radius: 8px; overflow: hidden; margin-bottom: .3rem; }
.kc-tile .kc-img img { width: 100%; height: 100%; object-fit: contain; }
.kc-rank { position: absolute; top: .4rem; left: .4rem; z-index: 2; background: rgba(0,0,0,.65); color: #fff; font-size: .75rem; padding: .1rem .45rem; border-radius: 99px; }
.kc-name { font-weight: 700; line-height: 1.2; }
.kc-detail, .kc-meta { font-size: .8rem; opacity: .75; }
.kc-tile.owned { border: 2px solid #d4a017; box-shadow: 0 0 0 3px rgba(212,160,23,.18), 0 6px 18px rgba(212,160,23,.35); transition: transform .15s; }
.kc-tile.owned:hover { transform: translateY(-3px); }
.kc-ribbon { position: absolute; top: .4rem; right: .4rem; z-index: 2; background: linear-gradient(90deg, #d4a017, #f2c94c); color: #3a2a00; font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; }
.kc-check { font-size: .75rem; background: #fff3cd; border-radius: 6px; padding: .2rem .4rem; }
.kc-cta { margin-top: auto; font-weight: 700; color: #b8860b; font-size: .85rem; }
.kc-tile.missing { border: 2px dashed #ccc; background: #fafafa; opacity: .6; filter: grayscale(1); }
.kc-q { font-size: 3rem; color: #bbb; }
.kc-source, .kc-note { font-size: .8rem; opacity: .7; margin-top: .6rem; }
@media (max-width: 600px) {
  .kc-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .kc-toggle { margin-left: 0; }
  .kc-set-head { flex-direction: column; gap: 0; }
}
.card-key-banner { display: flex; gap: .75rem; align-items: center; padding: .8rem 1rem; margin: 0 0 1rem; border: 2px solid #d4a017; border-radius: 12px; background: #fff8e0; }
.card-key-banner a { font-weight: 700; }