/* Column View with Concentric Rings */

.column-rings-view {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 40px 20px;
  overflow-x: hidden;
  max-width: 100vw;

  /* Layout Variables */
  --card-height: 12vh;
  --card-gap: 1vh;
  --padding-top: 5px;
  --ring-border-width: 16px;
  --container-width: 800px;

  /* Card Position Calculations - each card's vertical center */
  --card-1-top: var(--padding-top); /* Birth card (top) */
  --card-1-center: calc(var(--card-1-top) + (var(--card-height) / 2));

  --card-2-top: calc(var(--card-1-top) + var(--card-height) + var(--card-gap));
  --card-2-center: calc(var(--card-2-top) + (var(--card-height) / 2));

  --card-3-top: calc(var(--card-2-top) + var(--card-height) + var(--card-gap));
  --card-3-center: calc(var(--card-3-top) + (var(--card-height) / 2));

  --card-4-top: calc(var(--card-3-top) + var(--card-height) + var(--card-gap));
  --card-4-center: calc(var(--card-4-top) + (var(--card-height) / 2));

  --card-5-top: calc(var(--card-4-top) + var(--card-height) + var(--card-gap));
  --card-5-center: calc(var(--card-5-top) + (var(--card-height) / 2));

  --card-6-top: calc(var(--card-5-top) + var(--card-height) + var(--card-gap));
  --card-6-center: calc(var(--card-6-top) + (var(--card-height) / 2));

  --card-7-top: calc(var(--card-6-top) + var(--card-height) + var(--card-gap));
  --card-7-center: calc(var(--card-7-top) + (var(--card-height) / 2));

  /* Ring-to-Card Mapping - Reversed: largest ring at top */
  --ring-thirteen-target: var(--card-1-center);  /* 13-year → 1st card (birth/top) */
  --ring-seven-target: var(--card-2-center);      /* 7-year → 2nd card */
  --ring-yearly-target: var(--card-3-center);     /* Yearly → 3rd card */
  --ring-52day-target: var(--card-4-center);      /* 52-day/Planetary → 4th card */
  --ring-weekly-target: var(--card-5-center);     /* Weekly → 5th card */
  --ring-daily-target: var(--card-6-center);      /* Daily → 6th card */
}

.column-rings-container {
  position: relative;
  width: var(--container-width);
  max-width: 100%;
  min-height: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Concentric Rings */
.cycle-rings {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.cycle-ring {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  border-width: var(--ring-border-width);
  border-style: solid;
  opacity: 0.7;
  transform: translateX(-50%);
}

/* Ring sizes - 6 rings total
   Each ring is positioned to intersect with its corresponding card
   Ring diameter scales based on distance from daily ring
   All rings are centered horizontally, positioned vertically at their target card

   Card Mapping (REVERSED - largest at top):
   - 13-year ring (largest) → 1st card (birth/top)
   - 7-year ring → 2nd card
   - Yearly ring → 3rd card
   - 52-day ring → 4th card (planetary)
   - Weekly ring → 5th card
   - Daily ring (smallest) → 6th card
   - 7th card has no cycle ring
*/

.cycle-ring--thirteen {
  --diameter: calc(var(--card-height) * 6);
  width: var(--diameter);
  height: var(--diameter);
  top: var(--ring-thirteen-target);
  border-color: #3498db; /* Blue */
  z-index: 1;
}

.cycle-ring--seven {
  --diameter: calc(var(--card-height) * 5);
  width: var(--diameter);
  height: var(--diameter);
  top: var(--ring-seven-target);
  border-color: #2ecc71; /* Green */
  z-index: 2;
}

.cycle-ring--yearly {
  --diameter: calc(var(--card-height) * 4);
  width: var(--diameter);
  height: var(--diameter);
  top: var(--ring-yearly-target);
  border-color: #f1c40f; /* Yellow */
  z-index: 3;
}

.cycle-ring--52day {
  --diameter: calc(var(--card-height) * 3);
  width: var(--diameter);
  height: var(--diameter);
  top: var(--ring-52day-target);
  border-color: #e67e22; /* Orange */
  z-index: 4;
}

.cycle-ring--weekly {
  --diameter: calc(var(--card-height) * 2);
  width: var(--diameter);
  height: var(--diameter);
  top: var(--ring-weekly-target);
  border-color: #e74c3c; /* Red */
  z-index: 5;
}

.cycle-ring--daily {
  --diameter: var(--card-height);
  width: var(--diameter);
  height: var(--diameter);
  top: var(--ring-daily-target);
  border-color: #c0392b; /* Dark Red */
  z-index: 6;
}

/* Cards Column - centered vertically */
.column-rings-view .current-cards-column {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  align-items: center;
}

.column-rings-view .current-card {
  position: relative;
  z-index: 100;
  width: 100%;
  height: auto;
  overflow: visible;
  display: flex;
  justify-content: center;
  background: transparent;
}

.column-rings-view .current-card__body {
  background: transparent;
  width: auto;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 100;
}

.column-rings-view .current-card__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 100;
  background: transparent;
}

.column-rings-view .current-card__image {
  height: var(--card-height);
  width: auto;
  max-height: var(--card-height);
  max-width: none;
  display: block;
  position: relative;
  z-index: 100;
  background: none;
  background-color: transparent;
}

.column-rings-view .current-card__reading {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  flex-shrink: 0;
  width: 10em;
  display: flex;
  align-items: center;
}

.column-rings-view .current-card__reading--left {
  justify-content: flex-end;
  text-align: right;
  gap: 0.5rem;
  background: none;
}

.column-rings-view .current-card__reading--right {
  justify-content: flex-start;
  text-align: left;
  background: none;
}

.column-rings-view .current-card__planet {
  font-size: 2.1rem;
  line-height: 1;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
}

.column-rings-view .current-card__planet--personality {
  font-size: 1.6rem;
}

.column-rings-view .cycles-watermark {
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: -0.25rem;
}

.column-rings-view .current-card__planet--empty {
  visibility: hidden;
}

.column-rings-view .current-card__reading-text {
  opacity: 0;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .column-rings-view {
    --card-height: 10vh;
  }

  .column-rings-container {
    width: min(800px, 100%);
    height: 800px;
  }

  .column-rings-view .current-card__image {
    width: 80px;
  }
}

@media (max-width: 900px) {
  .column-rings-view {
    --card-height: 10vh;
    --card-gap: 0.45rem;
  }

  .column-rings-container {
    width: min(600px, 100%);
    height: 600px;
  }

  .cycle-ring {
    border-width: 12px;
  }

  .column-rings-view .current-card__image {
    /* width: clamp(70px, calc(var(--card-height) * 1.1), 120px); */
  }

  .column-rings-view .current-cards-column {
    gap: var(--card-gap);
  }
}

@media (max-width: 650px) {
  .column-rings-view {
    --card-height: 12vh;
    --card-gap: 0.35rem;
  }

  .column-rings-container {
    width: min(450px, calc(100vw - 40px));
    height: 520px;
  }

  .cycle-ring {
    border-width: 8px;
  }

  .column-rings-view .current-card__image {
    /* width: clamp(85px, calc(var(--card-height) * 1.15), 150px); */
  }

  .column-rings-view .current-cards-column {
    gap: var(--card-gap);
  }
}