/**
 * css/tarot-card.css — Per-tarot-card landing pages.
 * URL: /tarot/cards/{slug}/
 *
 * Phase 6 / Tarot Card Pages (2026-05-06).
 * Each page is themed by the card's suit color via --suit-color CSS variable.
 */

.tarot-card-page {
  --tcp-burgundy: #6B1F2C;
  --tcp-burgundy-deep: #4A1620;
  --tcp-gold-deep: #8E6E3A;
  --tcp-gold-mid: #B89150;
  --tcp-gold-bright: #D4AC68;
  --tcp-gold-foil: #F4DCA6;
  --tcp-cream: #FAF3E0;
  --tcp-parchment: #F5EBC8;
  --tcp-ink: #3a2826;
  --tcp-aubergine: #3A1F38;
}

/* ═══════════════════════════════════════════════════════════
   HERO — card image displayed as a framed talisman
   ═══════════════════════════════════════════════════════════ */
.tcp-hero {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}
.tcp-tagline {
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  margin-top: 1.4rem;
  line-height: 1.1;
}

.tcp-hero-display {
  margin: 2.5rem auto 1rem;
  display: flex;
  justify-content: center;
}

/* The card image, framed like a tarot artifact */
.tcp-card-frame {
  position: relative;
  display: inline-block;
  padding: 14px;
  background: linear-gradient(160deg, #FBF4DD 0%, #EDD8A2 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(212, 172, 104, 0.5),
    inset 0 0 0 6px #FAF3E0,
    inset 0 0 0 7px var(--suit-color, #8E6E3A),
    0 22px 50px rgba(20, 8, 24, 0.4),
    0 6px 18px rgba(212, 172, 104, 0.25);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.tcp-card-frame:hover {
  transform: translateY(-4px);
}
.tcp-card-frame-inner {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(212, 172, 104, 0.3);
}
.tcp-card-image {
  display: block;
  width: clamp(220px, 28vw, 340px);
  height: auto;
  border-radius: 2px;
}

/* L-shape decorative corners on the frame */
.tcp-card-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--suit-color, var(--tcp-burgundy));
  pointer-events: none;
  z-index: 3;
}
.tcp-card-corner-tl { top: 22px; left: 22px;     border-right: none; border-bottom: none; }
.tcp-card-corner-tr { top: 22px; right: 22px;    border-left: none; border-bottom: none; }
.tcp-card-corner-bl { bottom: 22px; left: 22px;  border-right: none; border-top: none; }
.tcp-card-corner-br { bottom: 22px; right: 22px; border-left: none; border-top: none; }

/* ═══════════════════════════════════════════════════════════
   SHARED SECTION TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */
.tcp-section {
  max-width: 760px;
  margin: 4rem auto;
  padding: 0 1.5rem;
}
.tcp-section .page-hero-dept {
  text-align: center;
  margin-bottom: 0.6rem;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--tcp-gold-deep);
}
.tcp-section-h2 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  color: var(--tcp-burgundy);
  text-align: center;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}
.tcp-section-h2 em { color: var(--tcp-gold-deep); }
.tcp-section-body p,
.tcp-section p {
  font-family: 'EB Garamond', serif;
  font-size: 1.12rem;
  line-height: 1.78;
  color: var(--tcp-ink);
  margin: 0 0 1.3rem;
}
.tcp-section p strong { color: var(--tcp-burgundy); font-weight: 700; }
.tcp-section p em     { color: var(--tcp-burgundy); font-style: italic; }
.tcp-section a {
  color: var(--tcp-burgundy);
  text-decoration: underline;
  text-decoration-color: rgba(184, 145, 80, 0.55);
  text-underline-offset: 3px;
}
.tcp-section a:hover { color: var(--tcp-gold-bright); }

/* Drop-cap on FIRST paragraph of intro section */
.tcp-intro p:first-of-type::first-letter {
  font-family: 'EB Garamond', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 5.2rem;
  line-height: 0.85;
  float: left;
  padding: 0.55rem 1.1rem 0 0.15rem;
  margin-right: 0.15rem;
  color: var(--tcp-burgundy);
  text-shadow: 0 2px 0 rgba(212, 172, 104, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   UPRIGHT + REVERSED two-column meanings
   ═══════════════════════════════════════════════════════════ */
.tcp-meanings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}
.tcp-section.tcp-meanings { max-width: 1080px; }

.tcp-meaning-card {
  padding: 2rem 1.6rem;
  background: linear-gradient(180deg, rgba(255, 251, 240, 0.98) 0%, rgba(247, 235, 210, 0.92) 100%);
  border: 1px solid rgba(184, 145, 80, 0.45);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(74, 28, 38, 0.06);
  position: relative;
}
.tcp-meaning-upright {
  border-top: 4px solid var(--suit-color, var(--tcp-gold-bright));
}
.tcp-meaning-reversed {
  border-top: 4px solid var(--tcp-burgundy);
  background: linear-gradient(180deg, rgba(245, 235, 200, 0.92) 0%, rgba(235, 220, 180, 0.85) 100%);
}
.tcp-meaning-eyebrow {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tcp-gold-deep);
  text-align: center;
  margin-bottom: 0.6rem;
}
.tcp-meaning-h2 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  color: var(--tcp-aubergine);
  text-align: center;
  margin: 0 0 1.2rem;
  line-height: 1.2;
}
.tcp-meaning-body p {
  font-family: 'EB Garamond', serif;
  font-size: 1.12rem;
  line-height: 1.78;
  color: var(--tcp-ink);
  margin: 0 0 1.2rem;
}
.tcp-meaning-body p:last-child { margin-bottom: 0; }
.tcp-meaning-body p strong { color: var(--tcp-burgundy); font-weight: 700; }
.tcp-meaning-body p em { color: var(--tcp-burgundy); font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   LIFE AREAS LIST (love / work / spirituality / day)
   ═══════════════════════════════════════════════════════════ */
.tarot-life-areas {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.tarot-life-areas li {
  padding: 1.1rem 1.3rem;
  margin-bottom: 0.7rem;
  background: linear-gradient(180deg, rgba(255, 251, 240, 0.95) 0%, rgba(247, 235, 210, 0.7) 100%);
  border-left: 4px solid var(--suit-color, var(--tcp-gold-bright));
  border-radius: 1px;
  font-family: 'EB Garamond', serif;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--tcp-ink);
}
.tarot-life-areas li strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  letter-spacing: 0.01em;
  color: var(--tcp-burgundy);
}

/* ═══════════════════════════════════════════════════════════
   TRY A READING CTAs (3 mini-portals)
   ═══════════════════════════════════════════════════════════ */
.tcp-readings {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(212, 172, 104, 0.08), transparent 60%),
    linear-gradient(180deg, var(--tcp-cream) 0%, var(--tcp-parchment) 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 4rem 1.5rem;
  max-width: none;
}
.tcp-readings .page-hero-dept,
.tcp-readings .tcp-section-h2 {
  text-align: center;
}
.tcp-readings .page-hero-dept {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--tcp-gold-deep);
}
.tcp-readings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  max-width: 920px;
  margin: 2rem auto 0;
}
@media (min-width: 880px) {
  .tcp-readings-grid { grid-template-columns: repeat(3, 1fr); }
}

.tcp-reading-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.6rem 1.2rem 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #FDFAEE 0%, transparent 70%),
    linear-gradient(160deg, #FAF3E0 0%, #F0E0BD 100%);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(212, 172, 104, 0.4),
    inset 0 0 0 5px #FAF3E0,
    inset 0 0 0 6px var(--tcp-gold-mid),
    0 6px 18px rgba(74, 28, 38, 0.10);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.4s ease;
}
.tcp-reading-cta:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(212, 172, 104, 0.5),
    inset 0 0 0 5px #FAF3E0,
    inset 0 0 0 6px var(--tcp-burgundy),
    0 14px 30px rgba(74, 28, 38, 0.22);
}
.tcp-reading-cta-eyebrow {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tcp-gold-deep);
  margin-bottom: 0.4rem;
}
.tcp-reading-cta-name {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  color: var(--tcp-burgundy);
  line-height: 1.1;
  margin: 0 0 0.45rem;
  text-shadow: 0 1px 0 rgba(255, 251, 232, 0.55);
}
.tcp-reading-cta-tag {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: #5e4a3a;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.tcp-reading-cta-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: calc(100% + 2.4rem);
  margin: auto -1.2rem 0;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, rgba(107, 31, 44, 0.06) 0%, rgba(107, 31, 44, 0.12) 100%);
  border-top: 1.5px solid var(--tcp-burgundy);
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tcp-burgundy);
  transition: background 0.35s ease, color 0.35s ease, gap 0.3s ease;
}
.tcp-reading-cta:hover .tcp-reading-cta-action {
  background: linear-gradient(180deg, var(--tcp-burgundy) 0%, var(--tcp-burgundy-deep) 100%);
  color: var(--tcp-gold-foil);
  gap: 0.85rem;
  border-top-color: var(--tcp-gold-foil);
}

/* ═══════════════════════════════════════════════════════════
   PREV/NEXT NAVIGATION (mirrors numerology number page)
   ═══════════════════════════════════════════════════════════ */
.tcp-nav {
  max-width: 1080px;
  margin: 4rem auto;
  padding: 0 1.5rem;
}
.tcp-nav-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1.4rem;
}
.tcp-nav-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  padding: 1.1rem 1.4rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #FDFAEE 0%, transparent 70%),
    linear-gradient(160deg, #FAF3E0 0%, #F0E0BD 100%);
  box-shadow:
    inset 0 0 0 1px rgba(212, 172, 104, 0.4),
    inset 0 0 0 5px #FAF3E0,
    inset 0 0 0 6px var(--tcp-gold-mid),
    0 6px 18px rgba(74, 28, 38, 0.12);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.4s ease;
}
.tcp-nav-prev { text-align: left; }
.tcp-nav-next { grid-template-columns: 1fr auto; text-align: right; }
.tcp-nav-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(212, 172, 104, 0.5),
    inset 0 0 0 5px #FAF3E0,
    inset 0 0 0 6px var(--tcp-burgundy),
    0 14px 30px rgba(74, 28, 38, 0.22);
}
.tcp-nav-arrow {
  font-family: 'EB Garamond', serif;
  font-size: clamp(2.2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--tcp-gold-bright);
  line-height: 1;
  transition: transform 0.3s, color 0.3s;
  text-shadow: 0 1px 0 rgba(255, 251, 232, 0.55);
}
.tcp-nav-card:hover .tcp-nav-arrow { color: var(--tcp-burgundy); }
.tcp-nav-prev:hover .tcp-nav-arrow { transform: translateX(-3px); }
.tcp-nav-next:hover .tcp-nav-arrow { transform: translateX(3px); }
.tcp-nav-inner { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.tcp-nav-eyebrow {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tcp-gold-deep);
}
.tcp-nav-title {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  letter-spacing: 0.01em;
  color: var(--tcp-burgundy);
  line-height: 1.15;
}
.tcp-nav-home {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem 1.6rem;
  text-decoration: none;
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tcp-gold-foil);
  background: linear-gradient(180deg, var(--tcp-burgundy) 0%, var(--tcp-burgundy-deep) 100%);
  border: 1px solid var(--tcp-gold-deep);
  box-shadow:
    inset 0 1px 0 rgba(244, 220, 166, 0.18),
    0 6px 18px rgba(74, 28, 38, 0.3);
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  white-space: nowrap;
}
.tcp-nav-home:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, var(--tcp-burgundy-deep) 0%, #2D0E15 100%);
  box-shadow:
    inset 0 1px 0 rgba(244, 220, 166, 0.25),
    0 12px 26px rgba(74, 28, 38, 0.45);
}
.tcp-nav-home-orn {
  font-size: 0.85rem;
  color: var(--tcp-gold-bright);
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(212, 172, 104, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════ */
.tcp-faq { max-width: 760px; margin: 5rem auto; }
.tcp-faq-title {
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  color: var(--tcp-burgundy);
  text-align: center;
  margin: 0 0 0.4rem;
}
.tcp-faq-title em {
  background: linear-gradient(135deg, var(--tcp-gold-deep) 0%, var(--tcp-gold-bright) 50%, var(--tcp-gold-deep) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.tcp-faq-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.8rem auto 2.4rem;
  max-width: 360px;
}
.tcp-faq-rule::before, .tcp-faq-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tcp-gold-mid), transparent);
}
.tcp-faq-rule span { color: var(--tcp-gold-bright); font-size: 0.95rem; }

.tcp-faq-list { max-width: 720px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .tcp-section { margin: 2.5rem auto; }
  .tcp-meanings-grid { grid-template-columns: 1fr; gap: 1rem; }
  .tcp-meaning-card { padding: 1.4rem 1.2rem; }
  .tcp-nav-row { grid-template-columns: 1fr; gap: 0.8rem; }
  .tcp-nav-prev, .tcp-nav-next { justify-self: stretch; }
  .tcp-nav-home { width: 100%; }
  .tcp-readings-grid { grid-template-columns: 1fr; }
  .tcp-card-image { width: clamp(200px, 60vw, 280px); }
  .tcp-card-corner-tl, .tcp-card-corner-tr,
  .tcp-card-corner-bl, .tcp-card-corner-br {
    width: 12px; height: 12px;
  }
}