/* =========================================================
   Panchangam Calendar — Srivaaram
   Beautiful traditional design matching the magazine aesthetic.
   ========================================================= */

/* ---- Hero / Title ---- */
.panchangam-main {
  padding: 32px 0 60px;
  min-height: calc(100vh - 200px);
}

.panchangam-hero {
  text-align: center;
  margin-bottom: 28px;
}

.panchangam-hero-icon {
  font-size: 2.8rem;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
}

.panchangam-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--maroon-dark);
  margin: 0;
  line-height: 1.3;
}

.panchangam-subtitle {
  font-family: var(--font-en);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 4px 0 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---- Date Navigation ---- */
.date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.date-nav-extra {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.today-btn-standalone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 2px solid var(--maroon);
  background: var(--white);
  color: var(--maroon-dark);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-te);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(122, 18, 32, 0.1);
}

.today-btn-standalone:hover {
  background: var(--maroon);
  color: var(--white);
  transform: scale(1.05);
}

.today-btn-standalone:hover svg {
  stroke: var(--white);
}

.today-btn-standalone:active {
  transform: scale(0.95);
}

.date-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--saffron);
  background: var(--white);
  color: var(--maroon-dark);
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(200, 150, 60, 0.15);
}

.date-nav-btn:hover {
  background: var(--saffron);
  color: var(--white);
  transform: scale(1.08);
}

.date-nav-btn:active {
  transform: scale(0.95);
}

.date-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 200px;
  padding: 8px 24px;
  background: linear-gradient(135deg, var(--maroon-dark), var(--maroon));
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(122, 18, 32, 0.25);
}

.date-telugu {
  color: var(--saffron-light);
  font-size: 1.15rem;
  font-weight: 700;
}

.date-english {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-en);
  font-size: 0.82rem;
  font-weight: 500;
}

/* ---- Main Panchangam Card ---- */
.panchangam-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(90, 40, 10, 0.12);
  border: 1px solid #ecdcb6;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto 32px;
  animation: cardFadeIn 0.4s ease;
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Card header */
.pcard-header {
  background: linear-gradient(135deg, #fdf6ec, #f6e8c8);
  padding: 18px 24px;
  border-bottom: 2px solid var(--saffron-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pcard-samvatsara {
  font-size: 0.92rem;
  color: var(--maroon-dark);
  font-weight: 600;
  line-height: 1.5;
}

.pcard-sun-times {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.sun-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  padding: 6px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.sun-icon {
  font-size: 1.2rem;
}

/* ---- Pancha Grid (5 limbs) ---- */
.pancha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 1px;
  background: #ecdcb6;
  border-bottom: 2px solid var(--saffron-light);
}

.pancha-item {
  background: var(--white);
  padding: 18px 14px;
  text-align: center;
  transition: background 0.2s ease;
}

.pancha-item:hover {
  background: #fffdf8;
}

.pancha-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--maroon);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  opacity: 0.85;
}

.pancha-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

/* ---- Times Sections ---- */
.times-section {
  padding: 20px 24px;
  border-bottom: 1px solid #f0e3c6;
}

.times-heading {
  font-size: 1rem;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.times-heading-bad {
  color: #b91c1c;
}

.times-heading-good {
  color: #166534;
}

.times-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 10px;
}

.time-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.times-ashubha .time-item {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.times-shubha .time-item {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.time-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.time-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---- Disha Shula ---- */
.disha-section {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-top: 1px solid #fde68a;
}

.disha-icon {
  font-size: 1.4rem;
}

.disha-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

/* ---- Share Section ---- */
.share-section {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
  position: relative;
}

.share-main-btn {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  color: var(--saffron-light);
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-te);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(122, 18, 32, 0.3);
  transition: all 0.2s ease;
  margin-bottom: 18px;
}

.share-main-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(122, 18, 32, 0.4);
  background: linear-gradient(135deg, var(--maroon-dark), #3d050a);
}

.share-main-btn:active {
  transform: translateY(0);
}

.share-platforms {
  display: none;
  animation: cardFadeIn 0.3s ease;
}

.share-platforms.open {
  display: block;
}

.share-title {
  font-size: 1.05rem;
  color: var(--maroon-dark);
  margin: 0 0 16px;
  font-weight: 700;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 30px;
  border: none;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-en);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.share-btn:active {
  transform: translateY(0);
}

.share-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.share-whatsapp {
  background: #25D366;
}

.share-whatsapp:hover {
  background: #1da851;
}

.share-facebook {
  background: #1877F2;
}

.share-facebook:hover {
  background: #1564d4;
}

.share-twitter {
  background: #0f1419;
}

.share-twitter:hover {
  background: #333;
}

.share-telegram {
  background: #0088cc;
}

.share-telegram:hover {
  background: #006fa3;
}

.share-copy {
  background: var(--maroon);
}

.share-copy:hover {
  background: var(--gold);
}

.share-instagram {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.share-instagram:hover {
  background: linear-gradient(135deg, #e6683c, #dc2743, #cc2366, #bc1888, #8a3ab9);
}

.share-linkedin {
  background: #0A66C2;
}

.share-linkedin:hover {
  background: #004182;
}

.share-pinterest {
  background: #E60023;
}

.share-pinterest:hover {
  background: #ad001a;
}

.share-email {
  background: #555;
}

.share-email:hover {
  background: #333;
}

.share-sms {
  background: #4CAF50;
}

.share-sms:hover {
  background: #388E3C;
}

.share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #166534;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 9999;
}

.share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Rasi-wise chandra balam ---- */
.rasi-section {
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 26px 24px 22px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.rasi-heading {
  font-size: 1.35rem;
  color: var(--maroon-dark);
  margin: 0 0 4px;
  text-align: center;
  line-height: 1.35;
}

.rasi-heading span {
  display: block;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.4px;
}

.rasi-moon-line {
  text-align: center;
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 1rem;
}

.rasi-moon-line strong { color: var(--maroon); }
.rasi-moon-en {
  font-family: var(--font-en);
  font-size: 0.82rem;
  opacity: 0.75;
}

/* auto-fit rather than a fixed count: twelve tiles have to sit sensibly at
   every width from a 320px phone up to the 980px cap. */
.rasi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 12px;
}

.rasi-tile {
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid rgba(122, 18, 32, 0.10);
  background: var(--cream);
  /* The status colour carries the meaning, so give every tile a left edge in
     that colour too — colour alone is not readable for everyone. */
  border-left: 4px solid var(--gold);
  /* Rendered as a <button>, so the inherited control styling has to go. */
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.rasi-tile > span { display: block; }

.rasi-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.rasi-tile:focus-visible {
  outline: 3px solid var(--maroon);
  outline-offset: 2px;
}

/* The tile whose detail panel is open. */
.rasi-tile.rasi-open {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.rasi-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--maroon-dark);
  line-height: 1.3;
}

.rasi-en {
  font-family: var(--font-en);
  font-size: 0.7rem;
  color: var(--ink-soft);
  opacity: 0.75;
  margin-bottom: 6px;
}

.rasi-status {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.rasi-house {
  font-size: 0.72rem;
  color: var(--ink-soft);
  opacity: 0.85;
}

.rasi-good      { border-left-color: #2e7d32; background: #f2f9f2; }
.rasi-good .rasi-status { color: #2e7d32; }
.rasi-mid       { border-left-color: var(--gold); background: var(--cream-2); }
.rasi-mid .rasi-status  { color: #9a6b1e; }
.rasi-weak      { border-left-color: #b3651b; background: #fdf3ea; }
.rasi-weak .rasi-status { color: #b3651b; }
.rasi-ashtama   { border-left-color: #b3261e; background: #fdf0ef; }
.rasi-ashtama .rasi-status { color: #b3261e; }

/* The rasi the Moon is actually in today. */
.rasi-current {
  outline: 2px solid var(--maroon);
  outline-offset: -2px;
}

/* Shown in place of the readings on any date that is not today. */
.rasi-offday {
  text-align: center;
  padding: 22px 18px;
  background: var(--cream-2);
  border-radius: 12px;
  border: 1px dashed rgba(122, 18, 32, 0.22);
}

.rasi-offday p {
  margin: 0 0 6px;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.rasi-offday-en {
  font-family: var(--font-en);
  font-size: 0.8rem !important;
  opacity: 0.75;
}

.rasi-offday-btn {
  margin-top: 12px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  background: var(--maroon);
  border: none;
  border-radius: 999px;
  padding: 9px 22px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.rasi-offday-btn:hover { background: var(--maroon-dark); }
.rasi-offday-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.rasi-hint {
  text-align: center;
  margin: 0 0 14px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  opacity: 0.8;
}

/* ---- Rasi detail panel ---- */
/* The reading is a grid item rendered straight after the open row. Spanning
   every column puts it on its own full-width band directly below that row on
   desktop, and directly below it in the single-column phone layout. */
.rasi-detail {
  grid-column: 1 / -1;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--cream-2);
  border: 1px solid rgba(122, 18, 32, 0.12);
  animation: cardFadeIn 0.3s ease;
}

.rdet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(122, 18, 32, 0.12);
}

.rdet-title {
  margin: 0;
  font-size: 1.3rem;
  color: var(--maroon-dark);
  line-height: 1.3;
}

.rdet-title span {
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gold);
  margin-left: 6px;
}

.rdet-meta {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.rdet-badge {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.rdet-good    { background: #e3f2e3; color: #2e7d32; }
.rdet-mid     { background: #faedd3; color: #9a6b1e; }
.rdet-weak    { background: #fbe4d2; color: #b3651b; }
.rdet-ashtama { background: #fadcda; color: #b3261e; }

.rdet-position {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.rdet-position strong { color: var(--maroon); }

/* The passage itself — the one block on this page meant to be read as prose,
   so give it a comfortable line height and a slightly larger size. */
.rdet-phala {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
}

.rdet-naks {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(122, 18, 32, 0.12);
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.rasi-note {
  margin: 16px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.7;
  padding-top: 14px;
  border-top: 1px solid var(--cream-2);
}

.rasi-note-en {
  display: block;
  font-family: var(--font-en);
  font-size: 0.76rem;
  opacity: 0.7;
  margin-top: 4px;
}

/* ---- Gochara reference (the twelve Moon positions) ---- */
.gochara-section {
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 26px 24px 22px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.gochara-heading {
  font-size: 1.35rem;
  color: var(--maroon-dark);
  margin: 0 0 6px;
  text-align: center;
  line-height: 1.35;
}

.gochara-heading span {
  display: block;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.4px;
}

.gochara-intro {
  margin: 0 auto 20px;
  max-width: 720px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.8;
}

.gochara-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}

.gochara-item {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--cream);
  border-left: 4px solid var(--gold);
}

.gochara-head {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--maroon-dark);
  line-height: 1.45;
}

.gochara-head span {
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.gochara-tag {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 4px;
  white-space: nowrap;
}

.gochara-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.gochara-good    { border-left-color: #2e7d32; background: #f2f9f2; }
.gochara-good .gochara-tag    { background: #e3f2e3; color: #2e7d32; }
.gochara-mid     { border-left-color: var(--gold); background: var(--cream-2); }
.gochara-mid .gochara-tag     { background: #faedd3; color: #9a6b1e; }
.gochara-weak    { border-left-color: #b3651b; background: #fdf3ea; }
.gochara-weak .gochara-tag    { background: #fbe4d2; color: #b3651b; }
.gochara-ashtama { border-left-color: #b3261e; background: #fdf0ef; }
.gochara-ashtama .gochara-tag { background: #fadcda; color: #b3261e; }

/* ---- Source attribution ---- */
.panchangam-source {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 12px 16px;
  background: var(--cream-2);
  border-radius: 8px;
}

.panchangam-source a {
  color: var(--maroon);
  font-weight: 600;
}

/* ---- Responsive ---- */

/* Tablet and small-laptop widths, between the phone breakpoint and a roomy
   desktop. The auto-fit grids above land here on a column count that does not
   divide their item count: the five panchangam limbs fall into four columns,
   leaving కరణం stranded beside ~455px of empty background, and the three time
   slots fall into two. Pin the columns and let the last item span the gap so
   no row is left half empty.

   దుర్ముహూర్తం carries two ranges and is the longest string in the times grid,
   so it is the one that benefits from the full-width row. */
@media (min-width: 621px) and (max-width: 900px) {
  .pancha-grid { grid-template-columns: repeat(3, 1fr); }
  .pancha-item:last-child { grid-column: span 2; }

  .times-grid { grid-template-columns: repeat(2, 1fr); }
  .time-item:last-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .panchangam-title {
    font-size: 1.5rem;
  }

  /* On a phone the rasis become a single-column accordion: each rasi is one
     full-width row reading "name (Sign) — status — house", and tapping it
     opens the reading directly underneath. Two narrow columns forced the
     Telugu names to wrap and left the reading far below whichever tile was
     tapped. */
  .rasi-section { padding: 20px 14px 18px; }
  .rasi-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rasi-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    padding: 12px 14px;
  }

  .rasi-tile > span { display: block; }

  /* Telugu name (with the English sign beside it) takes the space that is
     left; status and house sit at the right, each sized to its own content so
     nothing is pushed past the edge. */
  .rasi-name {
    font-size: 0.98rem;
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
  }
  .rasi-en {
    font-size: 0.66rem;
    order: 2;
    flex: 1 1 auto;
    margin: 0;
    align-self: center;
    min-width: 0;
  }
  .rasi-status {
    font-size: 0.82rem;
    order: 3;
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }
  .rasi-house {
    font-size: 0.66rem;
    order: 4;
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
  }
  /* "చంద్రుడు 1వ స్థానం" does not fit a 375px row alongside the name, the
     sign and the status — the heading above already establishes the Moon as
     the subject, so the row says just "1వ స్థానం". */
  .rh-word { display: none; }

  /* The open row and its reading read as one block. */
  .rasi-tile.rasi-open {
    transform: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .rasi-tile:hover { transform: none; }

  .rasi-detail {
    padding: 16px 14px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .rdet-title { font-size: 1.15rem; }
  .rdet-phala { font-size: 0.95rem; line-height: 1.85; }

  .panchangam-hero-icon {
    font-size: 2.2rem;
  }

  .date-display {
    min-width: 160px;
    padding: 6px 16px;
  }

  .date-telugu {
    font-size: 1rem;
  }

  .pancha-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 5th item spans full width on 2-col grid */
  .pancha-item:last-child {
    grid-column: 1 / -1;
  }

  .pcard-header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .times-section {
    padding: 16px;
  }

  .times-grid {
    grid-template-columns: 1fr;
  }

  .share-btn span {
    display: none;
  }

  .share-btn {
    padding: 12px;
    border-radius: 50%;
  }

  .share-btn svg {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 380px) {
  .pancha-grid {
    grid-template-columns: 1fr;
  }

  .pancha-item:last-child {
    grid-column: auto;
  }

  .date-nav {
    gap: 8px;
  }

  .date-nav-btn {
    width: 38px;
    height: 38px;
  }
}

/* ================= వారఫలాలు (weekly rasi phalalu) ================= */
.vaara-section {
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 26px 24px 22px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.vaara-weekrange-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 18px;
}

.vaara-weekrange {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 210px;
  padding: 8px 24px;
  background: linear-gradient(135deg, var(--maroon-dark), var(--maroon));
  border-radius: 12px;
}

.vaara-week-te {
  color: var(--saffron-light);
  font-size: 1.02rem;
  font-weight: 700;
}

.vaara-week-en {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-en);
  font-size: 0.76rem;
}

.vaara-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
  /* Every card in a row stretches to the tallest one, so all 12 blocks share
     equal dimensions regardless of how long each reading is. */
  align-items: stretch;
}

.vaara-card {
  border-radius: 10px;
  background: var(--cream);
  border-left: 4px solid var(--gold);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.vaara-card-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 8px;
  font-family: var(--font-te);
}

.vaara-emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.vaara-names {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.vaara-names b {
  color: var(--maroon-dark);
  font-size: 1.02rem;
}

.vaara-names small {
  color: var(--ink-soft);
  font-family: var(--font-en);
  font-size: 0.76rem;
}

.vaara-tag {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.vaara-tag-good { background: #e3f2e3; color: #2e7d32; }
.vaara-tag-mid  { background: #faedd3; color: #9a6b1e; }
.vaara-tag-bad  { background: #fadcda; color: #b3261e; }

.vaara-good { border-left-color: #2e7d32; }
.vaara-mid  { border-left-color: var(--gold); }
.vaara-bad  { border-left-color: #b3261e; }

.vaara-card-body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.vaara-phala {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--ink-soft);
  flex: 1 1 auto;
}

.vaara-meta {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(154, 107, 30, 0.25);
  font-size: 0.82rem;
  color: var(--gold);
  font-weight: 600;
}

.vaara-card.open {
  background: var(--cream-2);
}