/*
  YANTRA — Home Page
  Everything specific to the home experience: cinematic hero, room
  grid, today's flow, sankalpa, inner weather. Shared chrome (sidebar,
  topbar, section rhythm, Ma rail) lives in css/shell.css.
*/

/* ================= Hero ================= */
/*
  Placeholder for the real photograph: a warm gradient at the
  correct aspect ratio, swapped for a photo later. Overlay text sits
  on the light gradient, so it reads in ink — never paper-on-dark.
*/

/* Hero-scene shell (placeholder, page-header row, quote) lives in
   css/shell.css now — shared by every pillar page. Home only adds its
   own sizing and the greeting/eyebrow/tagline text treatment here. */

.yantra-hero-scene {
  aspect-ratio: 16 / 10;
  max-height: 640px;
}

.yantra-hero-scene__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}

.yantra-hero-scene__greeting {
  margin-top: var(--space-xs);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}

.yantra-hero-scene__tagline {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .yantra-hero-scene__greeting {
    font-size: var(--text-3xl);
  }
}

@media (min-width: 1024px) {
  .yantra-hero-scene {
    max-height: 720px;
  }
}

/* ================= Quick Access ================= */

.yantra-quick-access {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.yantra-quick-access__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-align: center;
  transition:
    background-color var(--duration-fast) var(--ease-paper),
    transform var(--duration-fast) var(--ease-paper);
}

.yantra-quick-access__item:hover {
  background: var(--surface-1);
  transform: translateY(-2px);
}

.yantra-quick-access__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  color: var(--color-forest);
}

.yantra-quick-access__icon svg {
  width: 22px;
  height: 22px;
}

.yantra-quick-access__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .yantra-quick-access {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ================= Room Grid ================= */

.yantra-room-grid .yantra-card--room {
  --card-accent: var(--pillar-color, var(--border-subtle));
}

/* .yantra-card__ring* and .yantra-card__cta (small percentage ring +
   pill CTA, both parameterized by --pillar-color) now live in
   css/shell.css — Smriti's progress card reuses them too. */

.yantra-room-grid .yantra-card__title {
  font-size: var(--text-md);
}

.yantra-room-grid .yantra-card__subtitle {
  font-style: italic;
}

.yantra-room-grid__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

/* ---------- Room illustration (placeholder: tinted gradient + line icon) ---------- */

.yantra-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.yantra-card__media svg {
  width: 44%;
  height: 44%;
}

.yantra-card__media--shoonya {
  background: linear-gradient(160deg, var(--color-cream) 0%, rgba(46, 43, 40, 0.1) 100%);
  color: var(--color-ink);
}

.yantra-card__media--annapurna {
  background: linear-gradient(160deg, var(--color-cream) 0%, rgba(196, 92, 62, 0.16) 100%);
  color: var(--color-vermillion);
}

.yantra-card__media--smriti {
  background: linear-gradient(160deg, var(--color-cream) 0%, rgba(103, 121, 90, 0.16) 100%);
  color: var(--color-forest);
}

.yantra-card__media--tarang {
  background: linear-gradient(160deg, var(--color-cream) 0%, rgba(185, 145, 73, 0.2) 100%);
  color: var(--color-gold);
}

.yantra-card__media--vajra {
  position: relative;
  background: linear-gradient(160deg, var(--color-cream) 0%, rgba(157, 149, 136, 0.28) 100%);
  color: var(--color-warm-gray);
}

.yantra-card__media--vajra::after {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  top: 62%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(46, 43, 40, 0.1) 0,
      rgba(46, 43, 40, 0.1) 1px,
      transparent 1px,
      transparent 26px
    ),
    linear-gradient(180deg, rgba(185, 145, 73, 0.18) 0%, rgba(157, 149, 136, 0.3) 100%);
}

/* ================= Today's Flow (Timeline) ================= */

.yantra-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-left: var(--space-xs);
}

.yantra-timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border-subtle);
}

.yantra-timeline__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-left: 44px;
}

.yantra-timeline__dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  border-radius: 50%;
  background: var(--surface-0);
  border: 2px solid var(--border-subtle);
  color: var(--text-muted);
  z-index: 1;
  transition:
    background-color var(--duration-normal) var(--ease-paper),
    border-color var(--duration-normal) var(--ease-paper),
    color var(--duration-normal) var(--ease-paper);
}

.yantra-timeline__item--completed .yantra-timeline__dot {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: var(--color-paper);
}

.yantra-timeline__item--current .yantra-timeline__dot {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
  animation: yantra-timeline-pulse 2.6s var(--ease-paper) infinite;
}

@keyframes yantra-timeline-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 145, 73, 0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(185, 145, 73, 0); }
}

.yantra-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yantra-timeline__label {
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: 500;
}

.yantra-timeline__item--upcoming .yantra-timeline__label {
  color: var(--text-muted);
  font-weight: 400;
}

.yantra-timeline__time {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.yantra-timeline__status {
  margin-left: auto;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.yantra-timeline__item--completed .yantra-timeline__status {
  color: var(--color-forest);
}

.yantra-timeline__item--current .yantra-timeline__status {
  color: var(--color-gold);
}

/* ================= Evening Flow ================= */

.yantra-evening {
  text-align: center;
}

.yantra-evening__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-cream) 0%, rgba(185, 145, 73, 0.2) 55%, rgba(103, 121, 90, 0.16) 100%);
  color: var(--color-forest);
}

.yantra-evening__media svg {
  width: 40%;
  height: 40%;
}

.yantra-evening__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-primary);
}

/* ================= Today's Intention ================= */

.yantra-intention__text {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

/* ================= Sadhana Progress ================= */

.yantra-sadhana__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.yantra-sadhana__title {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}

.yantra-sadhana__count {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.yantra-sadhana__hint {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ================= Widgets Row ================= */

.yantra-widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .yantra-widgets {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }

  .yantra-widgets--tight {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Sankalpa ---------- */

.yantra-sankalpa__label,
.yantra-weather__label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.yantra-label__icon {
  display: inline-flex;
  color: var(--color-forest);
}

.yantra-label__icon svg {
  width: 14px;
  height: 14px;
}

.yantra-sankalpa__text {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  max-width: none;
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  margin: calc(var(--space-xs) * -1);
  outline: none;
  transition: background-color var(--duration-fast) var(--ease-paper);
}

.yantra-sankalpa__text:hover {
  background: var(--surface-2);
  cursor: text;
}

.yantra-sankalpa__text:focus {
  background: var(--surface-0);
  box-shadow: 0 0 0 3px rgba(185, 145, 73, 0.25);
}

.yantra-sankalpa__text:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}

.yantra-sankalpa__hint {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---------- Inner Weather ---------- */

.yantra-weather__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.yantra-weather__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--surface-0);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition:
    background-color var(--duration-fast) var(--ease-paper),
    border-color var(--duration-fast) var(--ease-paper),
    color var(--duration-fast) var(--ease-paper);
}

.yantra-weather__option:hover {
  border-color: var(--border-strong);
}

.yantra-weather__option[aria-pressed="true"] {
  background: rgba(103, 121, 90, 0.12);
  border-color: var(--color-forest);
  color: var(--color-forest);
  font-weight: 500;
}

.yantra-weather__icon {
  display: inline-flex;
  color: currentColor;
}

.yantra-weather__icon svg {
  width: 16px;
  height: 16px;
}

/* ================= Recent Insights ================= */

.yantra-insights-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  background: var(--surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: var(--text-sm);
}