/* ==========================================================================
   responsive.css — Responsive Breakpoints
   Covara Official Website
   ========================================================================== */

/* ---------- Mobile: < 768px ---------- */
@media (max-width: 767px) {

  /* Navigation */
  .nav__toggle {
    display: flex;
  }

  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--cvr-paper-strong);
    border-bottom: 1px solid var(--cvr-line);
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px var(--cvr-shadow);
  }

  .nav__menu.is-open {
    display: flex;
  }

  .nav__link {
    padding: 0.875rem var(--container-padding);
    font-size: 0.85rem;
  }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
    padding: clamp(5rem, 12vh, 8rem) var(--container-padding);
    gap: 2rem;
    overflow: hidden;
  }

  .hero__content {
    grid-column: 1;
    padding-right: 0;
  }

  .hero__title {
    font-size: clamp(1.5rem, 7vw, 3rem);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .hero__subtitle {
    max-width: 100%;
  }

  .hero__visual {
    grid-column: 1;
    justify-content: center;
    overflow: hidden;
  }

  /* Override inline style on glow container */
  .hero__glow-container {
    width: 80vw !important;
    height: 80vw !important;
    max-width: 320px !important;
    max-height: 320px !important;
  }

  .hero__seal-logo {
    width: 140px;
  }

  /* Pain Points — full width cards */
  .pain-points__grid {
    grid-template-columns: 1fr;
  }

  .pain-card:nth-child(1),
  .pain-card:nth-child(2),
  .pain-card:nth-child(3),
  .pain-card:nth-child(4),
  .pain-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  /* Readiness — single column, descriptions default expanded */
  .readiness__grid {
    grid-template-columns: 1fr;
  }

  .readiness-card:nth-child(1),
  .readiness-card:nth-child(2),
  .readiness-card:nth-child(3),
  .readiness-card:nth-child(4),
  .readiness-card:nth-child(5),
  .readiness-card:nth-child(6) {
    grid-column: 1 / -1;
  }

  .readiness-card__desc {
    max-height: none;
    opacity: 1;
  }

  /* Hide decorative background text on mobile */
  .readiness::before,
  .token::before {
    display: none;
  }

  /* Reset pain card absolute number on mobile */
  .pain-card__number {
    position: static;
    font-size: var(--text-number);
    opacity: 0.15;
  }

  /* Workflow — single column, hide Z-shape connecting lines */
  .workflow__grid {
    grid-template-columns: 1fr;
  }

  .workflow__step:nth-child(odd),
  .workflow__step:nth-child(even) {
    grid-column: 1 / -1;
  }

  .workflow__step:not(:last-child)::after {
    display: none;
  }

  /* Workbenches — single column */
  .workbenches__grid {
    grid-template-columns: 1fr;
  }

  .workbench-card:nth-child(odd),
  .workbench-card:nth-child(even) {
    grid-column: 1 / -1;
  }

  /* Token Economics — single column, chart above text */
  .token__layout {
    grid-template-columns: 1fr;
  }

  .token__chart-area {
    order: -1;
  }

  .token__donut {
    width: 220px;
    height: 220px;
  }

  /* Roadmap — mobile-friendly timeline */
  .roadmap__timeline {
    padding-left: 1.5rem;
  }

  .roadmap__timeline::before {
    left: calc(1.5rem + 6px);
  }

  .roadmap__stage {
    padding-left: 2rem;
  }

  .roadmap__node {
    width: 14px;
    height: 14px;
  }

  /* Footer — single column centered */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer__brand {
    flex-direction: column;
    gap: 0.5rem;
  }

  .footer__links {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ---------- Tablet: 768px – 1023px ---------- */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Navigation */
  .nav__toggle {
    display: flex;
  }

  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--cvr-paper-strong);
    border-bottom: 1px solid var(--cvr-line);
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px var(--cvr-shadow);
  }

  .nav__menu.is-open {
    display: flex;
  }

  .nav__link {
    padding: 0.875rem var(--container-padding);
  }

  /* Hero — adjusted proportions */
  .hero {
    grid-template-columns: 1fr minmax(0, 8fr) minmax(0, 4fr) 1fr;
  }

  .hero__seal {
    width: clamp(160px, 18vw, 260px);
    height: clamp(160px, 18vw, 260px);
  }

  /* Pain Points — wider cards on tablet */
  .pain-card:nth-child(1) { grid-column: 1 / 8; }
  .pain-card:nth-child(2) { grid-column: 4 / 12; }
  .pain-card:nth-child(3) { grid-column: 2 / 10; }
  .pain-card:nth-child(4) { grid-column: 5 / 13; }
  .pain-card:nth-child(5) { grid-column: 1 / 8; }

  /* Readiness — 2-column on tablet */
  .readiness__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .readiness-card:nth-child(1),
  .readiness-card:nth-child(2),
  .readiness-card:nth-child(3),
  .readiness-card:nth-child(4),
  .readiness-card:nth-child(5),
  .readiness-card:nth-child(6) {
    grid-column: auto;
  }

  /* Workflow — wider steps on tablet */
  .workflow__step:nth-child(odd)  { grid-column: 1 / 8; }
  .workflow__step:nth-child(even) { grid-column: 5 / 13; }

  /* Workbenches — wider cards on tablet */
  .workbench-card:nth-child(odd)  { grid-column: 1 / 8; }
  .workbench-card:nth-child(even) { grid-column: 5 / 13; }

  /* Token Economics — adjusted proportions on tablet */
  .token__layout {
    grid-template-columns: 1fr 1fr;
  }

  .token__donut {
    width: 200px;
    height: 200px;
  }

  /* Roadmap — slightly tighter on tablet */
  .roadmap__timeline {
    padding-left: 2rem;
  }

  /* Footer — wrap nicely on tablet */
  .footer__inner {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Desktop: ≥ 1024px ---------- */
@media (min-width: 1024px) {

  /* Navigation — hamburger hidden, menu inline */
  .nav__toggle {
    display: none;
  }

  .nav__menu {
    display: flex;
  }
}