/* ==========================================================================
   card-meanings-hub.css — Desktop (≥1024px) redesign of the Card Meanings hub
   (/tarot-card-meanings/ + /th/ mirror). Translated from the claude.ai/design
   "MeowTarot Card Meanings Hub" doc. ADDITIVE + SCOPED:
   - Container .tcm-hub is display:none by default → mobile + iOS untouched.
   - Everything else lives under @media (min-width:1024px) and
     body[data-page="meanings"]; on desktop the mobile .section-block sections
     are hidden and the hub is shown (mobile-first indexing keeps the SEO copy).
   - Content is rendered by js/meanings.js from real card data.
   ========================================================================== */

.tcm-hub { display: none; }

@media (min-width: 1024px) {
  /* hide the mobile sections on desktop; show the hub */
  body[data-page="meanings"] .page-meanings > .section-block { display: none !important; }
  body[data-page="meanings"] .tcm-hub { display: block; }

  body[data-page="meanings"] {
    background:
      radial-gradient(1100px 620px at 12% -6%, #f5e2fb 0%, rgba(245,226,251,0) 58%),
      radial-gradient(1000px 720px at 102% -2%, #fcdcea 0%, rgba(252,220,234,0) 52%),
      radial-gradient(900px 900px at 50% 120%, #fbe6d6 0%, rgba(251,230,214,0) 55%),
      linear-gradient(180deg,#fbf5fb 0%, #f5ecfa 100%);
  }
  body[data-page="meanings"] .page-meanings {
    max-width: 1240px; margin: 0 auto; padding: 6px 32px 64px;
  }
  body[data-page="meanings"] .breadcrumbs { margin-bottom: 8px; }

  .tcm-hub { color: #3d1a5c; font-family: 'Inter', system-ui, sans-serif; }

  /* ---- HERO ---- */
  .tcm-hero {
    display: grid; grid-template-columns: 1fr auto; gap: 40px;
    align-items: end; margin: 18px 0 30px;
  }
  .tcm-hero__eyebrow {
    font: 600 11.5px/1 'Inter', sans-serif; letter-spacing: .16em;
    text-transform: uppercase; color: #a9722a;
  }
  .tcm-hero__h1 {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
    font-size: 58px; line-height: 1.03; color: #2a1142; margin: 14px 0 0;
    letter-spacing: -.015em;
  }
  .tcm-hero__sub {
    font-size: 16.5px; line-height: 1.6; color: #7c5e96; margin: 12px 0 0; max-width: 560px;
  }
  .tcm-hero__chips { display: flex; gap: 10px; }
  .tcm-chip {
    text-align: center; background: rgba(255,255,255,.66);
    border: 1px solid rgba(232,196,120,.4); border-radius: 16px; padding: 14px 20px;
    box-shadow: 0 10px 26px -16px rgba(61,26,92,.2);
  }
  .tcm-chip__n {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
    font-size: 30px; color: #7a1f66; line-height: 1;
  }
  .tcm-chip__l { font: 600 11px/1 'Inter', sans-serif; color: #9a86b2; margin-top: 5px; }

  /* ---- SEARCH ---- */
  .tcm-searchbar {
    position: sticky; top: 8px; z-index: 40;
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.9); border: 1.5px solid rgba(106,63,142,.16);
    border-radius: 18px; padding: 6px 6px 6px 20px;
    box-shadow: 0 14px 34px -18px rgba(61,26,92,.3);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    margin-bottom: 22px;
  }
  .tcm-searchbar__icon { font-size: 19px; color: #a9722a; }
  .tcm-searchbar__input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font: 500 17px/1 'Inter', sans-serif; color: #3d1a5c; padding: 13px 0;
  }
  .tcm-searchbar__input::-webkit-search-cancel-button { display: none; }
  .tcm-searchbar__clear {
    appearance: none; border: 0; cursor: pointer; font: 600 13px/1 'Inter', sans-serif;
    color: #6a3f8e; background: rgba(106,63,142,.08); padding: 9px 12px; border-radius: 12px;
    transition: background .15s;
  }
  .tcm-searchbar__clear:hover { background: rgba(106,63,142,.16); }
  .tcm-searchbar__count {
    font: 600 12.5px/1 'Inter', sans-serif; color: #9a86b2;
    padding-right: 12px; white-space: nowrap;
  }

  /* ---- NO RESULTS ---- */
  .tcm-noresults { text-align: center; padding: 64px 20px; }
  .tcm-noresults__card {
    width: 96px; height: 132px; margin: 0 auto 22px; border-radius: 14px;
    background: linear-gradient(155deg,#2a1d4a 0%,#7c6aa8 100%);
    border: 1px solid rgba(232,196,120,.4); display: flex; align-items: center;
    justify-content: center; font-size: 34px;
    box-shadow: 0 18px 36px -16px rgba(61,26,92,.5); filter: saturate(.7);
  }
  .tcm-noresults__title {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
    font-size: 26px; color: #2a1142;
  }
  .tcm-noresults__body { font-size: 15px; color: #7c5e96; margin: 8px 0 0; }
  .tcm-noresults__btn {
    appearance: none; border: 1px solid rgba(106,63,142,.3); cursor: pointer;
    font: 600 13.5px/1 'Inter', sans-serif; color: #6a3f8e; background: rgba(255,255,255,.7);
    padding: 12px 20px; border-radius: 99px; margin-top: 20px;
  }
  .tcm-noresults__btn:hover { background: #fff; }

  /* ---- SECTION HEADERS ---- */
  .tcm-section { margin-top: 14px; }
  .tcm-section + .tcm-section { margin-top: 44px; }
  .tcm-section__head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
  .tcm-section__badge {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; font-size: 20px; color: #e8c478;
  }
  .tcm-section__badge--major {
    background: linear-gradient(135deg,#3d1a5c,#d12878);
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 22px;
    box-shadow: 0 10px 22px -10px rgba(209,40,120,.5);
  }
  .tcm-section__badge--minor {
    background: linear-gradient(135deg,#6a3f8e,#a487c4);
    box-shadow: 0 10px 22px -10px rgba(106,63,142,.5);
  }
  .tcm-section__meta { flex: 1; }
  .tcm-section__h2 {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 30px;
    color: #2a1142; margin: 0; letter-spacing: -.01em;
  }
  .tcm-section__desc { font-size: 14px; color: #7c5e96; margin: 3px 0 0; }
  .tcm-section__count {
    font: 600 12px/1 'Inter', sans-serif; color: #a9722a; background: rgba(201,147,58,.12);
    padding: 8px 12px; border-radius: 99px; white-space: nowrap;
  }

  /* ---- GRIDS ---- */
  .tcm-grid--major { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .tcm-suit { margin-top: 34px; }
  .tcm-suit__head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 1px solid rgba(106,63,142,.14);
  }
  .tcm-suit__icon {
    width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center;
    justify-content: center; font-size: 18px; color: #fdf6ee; flex-shrink: 0;
    box-shadow: 0 8px 18px -10px rgba(61,26,92,.5);
  }
  .tcm-suit__icon--cups { background: linear-gradient(135deg,#3a5a8a,#7c9cc8); }
  .tcm-suit__icon--wands { background: linear-gradient(135deg,#c9933a,#e8457a); }
  .tcm-suit__icon--swords { background: linear-gradient(135deg,#2a1d4a,#a487c4); }
  .tcm-suit__icon--pentacles { background: linear-gradient(135deg,#c9933a,#e8c478); }
  .tcm-suit__name {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 21px;
    color: #2a1142; line-height: 1;
  }
  .tcm-suit__sub { font: 500 12px/1 'Inter', sans-serif; color: #9a86b2; margin-top: 4px; }
  .tcm-suit__count { margin-left: auto; font: 600 11px/1 'Inter', sans-serif; color: #9a86b2; }
  .tcm-suit__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }

  /* ---- TILES ---- */
  .tcm-tile {
    text-decoration: none; display: block; background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.9); border-radius: 18px; padding: 12px;
    box-shadow: 0 12px 28px -16px rgba(61,26,92,.24);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .tcm-tile:hover {
    transform: translateY(-6px); box-shadow: 0 26px 46px -20px rgba(61,26,92,.42);
    border-color: #e8c478;
  }
  .tcm-suit__grid .tcm-tile { border-radius: 15px; padding: 9px; }
  .tcm-tile__art {
    position: relative; display: block; width: 100%; aspect-ratio: 1568 / 2720;
    border-radius: 11px; border: 1px solid rgba(232,196,120,.5);
    box-shadow: 0 10px 20px -8px rgba(61,26,92,.4); overflow: hidden;
  }
  /* real card-face image fills the art slot */
  .tcm-tile__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center top; display: block;
    background: #efe7f5;
  }
  .tcm-tile__art--img { background: #efe7f5; }
  .tcm-tile__art--img::after { content: none !important; }  /* kill the 'M' overlay on major tiles */
  .tcm-tile__frame { position: absolute; inset: 7px; border: .5px solid rgba(232,196,120,.5); border-radius: 8px; }
  .tcm-tile__numeral {
    position: absolute; top: 9px; left: 10px; font-family: 'Playfair Display', serif;
    font-style: italic; font-weight: 600; font-size: 12px; color: rgba(232,196,120,.9);
  }
  .tcm-tile__pip {
    position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%);
    text-align: center; font-size: 22px; color: rgba(232,196,120,.9);
  }
  .tcm-tile--major .tcm-tile__art::after {
    content: 'M'; position: absolute; left: 0; right: 0; top: 48%; transform: translateY(-50%);
    text-align: center; font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 38px; color: rgba(232,196,120,.85);
  }
  .tcm-tile__name {
    display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
    font-size: 16px; color: #2a1142; margin-top: 10px; line-height: 1.12;
  }
  .tcm-suit__grid .tcm-tile__name { font-size: 14px; margin-top: 9px; }
  .tcm-tile__kw { display: block; font: 500 11px/1.3 'Inter', sans-serif; color: #a9722a; margin-top: 3px; }
  .tcm-suit__grid .tcm-tile__kw { font-size: 10.5px; }

  [data-tcm-group][hidden], .tcm-tile[hidden] { display: none; }
}