/* =========================================================
   CryptiCrew · cards.css — Stable Grid w/ True Spans (Clean v2)
   ========================================================= */

/* -------- Grid (fixed row units by default so spans work) */
.row{
  --gap: clamp(12px, 2vw, 18px);
  --row: 230px;                      /* used when NOT in .row--auto */
  --card-pad: clamp(14px, 2vw, 18px);

  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  grid-auto-rows: var(--row);        /* enables true row spans */
  grid-auto-flow: dense;             /* pack smaller items into gaps */
  gap: var(--gap);
  align-items: start;
  margin: clamp(12px, 2.5vw, 22px) 0;
}

/* Column counts (tablet/desktop) */
.row--cols-1{ --cols:1; }
.row--cols-2{ --cols:2; }
.row--cols-3{ --cols:3; }
.row--cols-4{ --cols:4; }
.row--cols-5{ --cols:5; }

/* Phones: always stack to one column */
@media (max-width:640px){
  .row{ --cols:1; grid-template-columns: 1fr; }
}

/* Natural-height mode (no fixed rows → no clipping) */
.row--auto{
  grid-auto-rows: auto;
  grid-auto-flow: row;               /* strict order; no masonry packing */
}

/* Promote .card to be the grid child (keeps markup tidy) */
.row > .col{ display: contents; }

/* Spans (only matter when NOT using .row--auto) */
.row > .col.span-rows-2 > .card{ grid-row: span 2; }
.row > .col.span-rows-3 > .card{ grid-row: span 3; }
.row > .col.span-rows-4 > .card{ grid-row: span 4; }
@media (min-width:768px){
  .row > .col.span-cols-2 > .card{ grid-column: span 2; }
}

/* =========================================================
   Card layout, visuals, and readable typography
   ========================================================= */
.row .card{
  position: relative; z-index: 2;

  /* header | body (stretches) | footer (sticks bottom) */
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: .55rem;

  height: 100%;
  padding: var(--card-pad);
  border-radius: var(--radius);
  box-shadow: var(--popShadow);
  background-clip: padding-box;
  overflow: visible; /* let shadows/inner frames breathe */
}

/* Variants */
.card--solid{ background:#fff; }
/* (border style lives where you attach it; keep clean here) */

/* Regions */
.card__head{ margin: 0 0 .5rem; }
.card__body{
  padding: 0;
  display: grid;
  align-content: start;
  justify-items: start;
}
.card__foot{
  margin-top: auto;
  padding-top: .75rem;
  display: grid;
  gap: 10px;
  justify-items: center;     /* center name + CTA for tiles */
}

/* Headings & body copy inside cards */
.card h3,
.card h4{
  margin: 0 0 .4rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .2px;
  font-size: clamp(18px, 1.8vw, 22px);
}
.card p{
  margin: .25rem 0 0;
  line-height: 1.6;
  font-size: clamp(15px, 1.4vw, 17px);
  color: rgba(0,0,0,.92);
}
.card > *:last-child{ margin-bottom: 0; }

/* Helpers */
.u-center{ text-align:center; }
.u-right { text-align:right; }
.row--strict{ grid-auto-flow: row; }

/* Legacy character art helper (still used by some tiles) */
.row .card .hc-art{
  display:block; margin:0; max-width:64%; height:auto;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
}

/* =========================================================
   Merch visuals (sticker overhang + gradient tile)
   ========================================================= */
.merch.card{ overflow: visible; }
.merch .card__body{ justify-items: center; }
.merch .card__foot{ justify-content: center; }

.merch__art{
  position: relative;
  height: 150px;
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: visible;
}
.merch.card.gloss::before{ z-index:1; }
.merch__art .sticker{
  position: absolute; left:50%; top:50%;
  transform: translate(-50%, -58%);
  width: clamp(180px, 70%, 200px); height: auto;
  z-index: 2; pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
}

/* =========================================================
   Optional extensions
   ========================================================= */
a.card--click{ color:inherit; text-decoration:none; display:block; }
.card--click{ transition: transform .18s ease, box-shadow .18s ease; }
.card--click:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.24); }

.card__media{
  width:100%; aspect-ratio:16/9;
  border-radius: calc(var(--radius) - 6px);
  overflow:hidden; margin-bottom:.75rem;
}
.card__media > img,
.card__media > video{ width:100%; height:100%; object-fit:cover; display:block; }
.card__media--bleed{
  margin: calc(var(--card-pad)*-1) calc(var(--card-pad)*-1) .5rem;
  border-radius: calc(var(--radius) - 0px);
}

.card--tight{ --card-pad: clamp(10px, 1.4vw, 14px); }
.card--loose{ --card-pad: clamp(18px, 3vw, 26px); }

@media (min-width:720px){
  .card--list{
    display:grid;
    grid-template-columns:180px 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:"media head" "media body";
    gap: clamp(12px, 2vw, 18px);
  }
  .card--list .card__media{ grid-area:media; margin:0; aspect-ratio:4/3; }
  .card--list .card__head { grid-area:head;  margin-bottom:.25rem; }
  .card--list .card__body { grid-area:body;  align-content:start; }
  .card--list .card__foot { grid-column:1/-1; margin-top:.75rem; }
}

.card .badge{
  position:absolute; top:8px; right:8px;
  padding:.35rem .55rem; border-radius:999px;
  font-weight:800; font-size:.75rem;
  background: linear-gradient(120deg, var(--gradA), var(--gradB));
  color:#111; box-shadow:0 6px 12px rgba(0,0,0,.18);
}

.line-2, .line-3{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.line-2{ -webkit-line-clamp:2; }
.line-3{ -webkit-line-clamp:3; }

.card.is-loading{
  position:relative; overflow:hidden;
  background: linear-gradient(90deg, #ececec 25%, #f5f5f5 37%, #ececec 63%);
  background-size:400% 100%;
  animation: shimmer 1.2s infinite linear;
}
.card.is-loading > *{ visibility:hidden; }
@keyframes shimmer{
  0%{ background-position:100% 0; }
  100%{ background-position:-100% 0; }
}

/* =========================================================
   Unified Tile Cards (Characters · Books · Merch)
   ========================================================= */
.tiles .row{
  --gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(12px, 2vw, 20px);
}

/* Glassy tile; allow interior overflow for shadows */
.card--tile{
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: visible;
}
.card--tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}

/* The card’s own padding sets the uniform gap */
.row .card{ padding: var(--card-pad); }

/* Tile body: tidy grid baseline */
.card--tile .card__body{
  padding: 0; margin: 0;
  display: grid; align-content: start; justify-items: center;
}

/* Square media frame (equal inset) */
.tile-media{
  margin: 0; padding: 0;               /* kill figure defaults */
  width: 100%; aspect-ratio: 1 / 1;
  display: block;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #f8f8f8, #ececec);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.tile-art{
  width: 100%; height: 100%; display: block; object-fit: contain;
}

/* Footer like the demo */
.tile-name{
  font-weight: 800;
  line-height: 1.1;
  margin-top: .25rem;
  opacity: .95;
}

/* On phones, force auto-rows so nothing clips, and single column */
@media (max-width: 860px){
  .tiles .row{ grid-auto-rows: auto !important; }
}
@media (max-width: 640px){
  .tiles-row{
    display: grid; grid-template-columns: 1fr; gap: 20px;
  }
  .card--tile{ width:100%; }
}

/* Optional tiny nudges per section */
.characters .tile-media{ border-radius: 16px; }
.books .tile-media     { border-radius: 14px; }
.merch .tile-media     { border-radius: 16px; }

/* =========================================================
   BLOG — single-column cards + 5-col outer grid
   ========================================================= */

/* Force one card per row */
.section.blog .row{
  --cols:1;
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,22px);
}

/* Base blog card */
.section.blog .blog-card{
  padding: var(--card-pad);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  display: grid; gap: clamp(12px,1.6vw,18px);
  grid-template-columns: 1fr; /* phone default */
  overflow: visible;
}

/* tablet/desktop layout */
@media (min-width:900px){
  .section.blog .blog-card{
    --media: 200px;
    grid-template-columns: var(--media) 1fr;
    align-items: start;
  }

  /* equal inset media */
  .section.blog figure.blog-card__media{
    margin:0 !important; padding:0 !important;
    width: var(--media); height: var(--media);
    border-radius: 16px; overflow:hidden;
    background: linear-gradient(135deg,#f3f3f3,#e9e9e9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    align-self:start; justify-self:start;
  }
  .section.blog .blog-card__img{ display:block; width:100%; height:100%; object-fit:cover; }

  .section.blog .blog-card__content{
    display:grid; grid-template-rows:auto auto 1fr auto;
    min-height: var(--media); min-width:0; align-content:start;
  }

  .section.blog .blog-card.is-collapsed{
    height: calc(var(--media) + var(--card-pad)*2);
  }

  .section.blog .excerpt.clamp{ position:relative; overflow:hidden; margin:.2rem 0 0; line-height:1.55; }
  .section.blog .excerpt.is-clamped::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:26px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.97));
    pointer-events:none;
  }

  .section.blog .blog-cta{ display:grid; justify-items:center; margin-top:.35rem; }
  .section.blog .blog-cta .btn.small{ padding:10px 16px; border-radius:999px; }
}

/* phone */
@media (max-width:899.98px){
  .section.blog figure.blog-card__media{
    margin:0 !important; padding:0 !important;
    width:100%; aspect-ratio:1/1;
    border-radius:16px; overflow:hidden;
    background: linear-gradient(135deg,#f3f3f3,#e9e9e9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }
  .section.blog .blog-card__img{ display:block; width:100%; height:100%; object-fit:cover; }
  .section.blog .blog-card__content{ display:grid; gap:.6rem; align-content:start; }
}

/* title + author pill */
.section.blog .blog-card__title{ margin:0; font-weight:900; font-size:clamp(20px,2.2vw,28px); }

.section.blog .author-chip{
  display:inline-flex !important; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 12px rgba(0,0,0,.08);
  width:auto !important; white-space:nowrap !important;
}
.section.blog .author-chip__img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
.section.blog .author-chip__name{ font-weight:800; font-size:.92rem; }
.section.blog .author-chip__dot{ opacity:.5; }
.section.blog .author-chip__date{ font-size:.86rem; opacity:.8; }

/* BLOG — outer 5-col layout (filter col + article region) */
.section.blog .blog-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:clamp(16px, 2vw, 22px);
  align-items: start;
}
/* don’t collapse .col in this particular grid */
.section.blog .blog-grid > .col{ display:block; }

.section.blog .filter-col{ grid-column:1 / span 1; }
.section.blog .articles-col{ grid-column:2 / 6; }

@media (max-width:900px){
  .section.blog .blog-grid{ grid-template-columns:1fr; }
  .section.blog .filter-col,
  .section.blog .articles-col{ grid-column:auto; }
}

/* inner list stays single-column and spaced */
.section.blog .articles-col .blog-list{ display:grid; gap:clamp(16px,2vw,22px); }

/* cute character chips */
.section.blog .blog-filter__title{ margin:0; font-weight:900; font-size:clamp(18px,1.8vw,22px); }
.section.blog .char-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;
}
@media (min-width:1100px){ .section.blog .char-grid{ grid-template-columns:1fr; } }

.section.blog .char-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px; background:#fff;
  border:1px solid rgba(0,0,0,.08); box-shadow:0 6px 12px rgba(0,0,0,.06);
  text-decoration:none; color:inherit; font-weight:800; white-space:nowrap;
}
.section.blog .char-chip.is-active{ outline:2px solid rgba(0,0,0,.15); }
.section.blog .char-chip__img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
.section.blog .char-chip__name{ font-size:.92rem; }

/* =========================================================
   Modal (Character Bio) — pleasant layout
   ========================================================= */
.modal .bio-hero{ padding: 12px; }
.modal .bio-wrap{ padding: clamp(14px, 2.2vw, 18px); }
.modal .bio-card{
  background:#fff; border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  padding: clamp(14px, 2.2vw, 18px);
}
.modal .bio-banner{
  height: 10px; border-radius: 8px; margin-bottom: 14px;
  background: rgba(0,0,0,.06); background-size:100% 100%; background-repeat:no-repeat;
}
.modal .bio-banner.is-rainbow{
  background: var(--Unie, linear-gradient(45deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8f00ff));
}

/* main two-column grid */
.modal .bio-grid{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px clamp(16px, 2.5vw, 24px);
  align-items: start;
}

/* left image column */
.modal .bio-img{
  margin: 0; padding: 0;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #f3f3f3, #e9e9e9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.modal .bio-img img{ display:block; width:100%; height:100%; object-fit:cover; }

/* right content column */
.modal .bio-main{ display: grid; gap: 12px; }
.modal .bio-title{ margin: 0; font-weight: 900; font-size: clamp(22px, 2.4vw, 28px); }

/* kawaii pill */
.modal .bio-kawaii{
  font-size: 14px; opacity: .95;
  background:#fff; border: 1px solid rgba(0,0,0,.08);
  padding: 10px 12px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* body text like example (no indent inside modal) */
.modal .article-body p{ margin:.6rem 0 0; line-height:1.55; text-indent:0; }

/* tiles inside modal */
.modal .profile-grid.meta-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px; margin-top:12px;
}
@media (max-width: 960px){ .modal .profile-grid.meta-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){
  .modal .bio-grid{ grid-template-columns: 1fr; }
  .modal .profile-grid.meta-grid{ grid-template-columns: 1fr; }
}
.modal .profile-grid .tile{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius: 12px; padding: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.modal .list{ margin:6px 0 0; padding-left:18px; }
.modal .list li{ margin:4px 0; }

/* modal chrome */
.modal[aria-hidden="true"]{ display:none; }
.modal[aria-hidden="false"]{ display:block; }
.modal{ position: fixed; inset: 0; z-index: 1000; }
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.38);
  backdrop-filter: saturate(140%) blur(6px);
}
.modal__dialog{
  position: relative; z-index: 2;
  width: min(980px, 92vw);
  max-height: min(88vh, 900px);
  margin: 5vh auto; overflow: auto;
  background: #fff;
  border-radius: var(--radius,18px);
  box-shadow: var(--shadow, 0 10px 28px rgba(0,0,0,.18));
  border: 1px solid rgba(0,0,0,.06);
}
.modal__close{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px; border-radius:999px; border:0; background:#fff;
  box-shadow: var(--shadow); font-size:22px; line-height:1; cursor:pointer;
}
.modal__close:hover{ transform: translateY(-1px); }

/* =========================================================
   Rainbow border (Unie & friends)
   ========================================================= */
.card--border[data-rainbow]{
  border:1px solid transparent; border-radius:18px;
  background:
    linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.90)) padding-box,
    var(--Unie, linear-gradient(45deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8f00ff)) border-box;
  background-clip: padding-box, border-box;
}
.card--border[data-rainbow].glass{
  /* explicit twin so glass keeps 0.90 fill without double layers */
  background:
    linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.90)) padding-box,
    var(--Unie, linear-gradient(45deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8f00ff)) border-box;
  background-clip: padding-box, border-box;
}