/* Awen Plans Page — Last synced Aug 17, 2025, 13:12 hours PST
   - Desktop: scaffold grid (233px rail + 4 plan columns)
   - Desktop plan row aligned to feature grid
   - Header band and footer band on each card
   - Equal-height cards (aligned footers)
   - Mobile: separate stack
*/

body {
  margin: 0;
  padding: 0 1.5rem;
  font-family: sans-serif;
  background-color: #b46a6a;
  color: #fff;
}

/* Header AWEN bar */
header {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.1rem;
}

/* Page scaffold grid (233px rail + 4 columns) */
.plans-container {
  display: grid;
  grid-template-columns: 233px repeat(4, minmax(0, 1fr));
  column-gap: 1.5rem;
  max-width: 1483px;
  margin: 0 auto;
}

/* Main heading (if used) */
h1 {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 2.5rem;
}

/* ====================== Desktop (≥601px) ====================== */

/* Desktop plan row: 4 equal columns aligned to scaffold’s plan columns */
.plan-grid {
  grid-column: 2 / -1;                          /* sits to the right of the 233px rail */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  /* default align-items: stretch -> equal-height row; footers align */
  margin-bottom: 3rem;
}

/* Each grid item is the <form>; let its child card fill the cell */
.plan-grid > form { margin: 0; height: 100%; min-width: 0; }

/* Plan tile base */
.plan-box {
  background-color: #f5e6d8;
  color: #000;
  border: 2px solid #4a0e4e;
  border-radius: 1rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;                                  /* fill grid cell for equal-height cards */
}

/* Hover */
.plan-box:hover { background-color: #e9d4c2; cursor: pointer; }

/* ---------------- Header band (title + subtext) ---------------- */
.plan-header {
  background-color: #eee3d4;
  color: #000;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #4a0e4e;
  border-radius: 1rem 1rem 0 0;
}
.plan-title {
  margin: 0;
  font-size: 1.5rem;
}
.plan-subtext {
  margin: -10px 0 0 0;     /* pull subtext closer to title ~10px */
  font-size: 0.95rem;
  color: #333;
}

/* ---------------- Body (features + poems/stanzas) ---------------- */
.plan-body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;                               /* grow to push footer to the bottom */
}

/* Feature list (desktop) */
.plan-box ul { list-style: none; padding-left: 0; margin: 0; }
.plan-box li {
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
}
.plan-box li::before {
  content: "•";
  display: inline-block;
  margin-right: 0.5rem;
}

/* Divider used inside body */
.plan-divider {
  height: 1px;
  background-color: #4a0e4e;
  margin: 0.5rem 0;
}

/* Poems + stanza specs */
.plan-spec { font-size: 0.95rem; color: #333; }
.plan-spec .plan-line { margin-bottom: 0.25rem; }
.stanza-list { list-style: none; padding-left: 0; margin: 0.25rem 0 0 0; }
.stanza-list li { margin-bottom: 0.25rem; }
.stanza-min { margin-top: 0.25rem; }

/* ---------------- Footer band (price + billing) ---------------- */
.plan-footer {
  background-color: #eee3d4;
  color: #000;
  padding: 0.75rem 1rem;
  border-top: 2px solid #4a0e4e;
  border-radius: 0 0 1rem 1rem;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;                              /* sits at bottom within equal-height card */
}

/* ====================== Feature Comparison ====================== */

.feature-comparison {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 233px repeat(4, minmax(0, 1fr));
  row-gap: 0.5rem;
  background-color: #f5e6d8;
  color: #000;
  border-radius: 1rem;
  padding: 1.5rem;
  border: 2px solid #4a0e4e;
}

.feature-header { font-weight: bold; border-bottom: 2px solid #333; padding-bottom: 0.5rem; }
.feature-row { display: contents; }
.feature-name { grid-column: 1; padding: 0.4rem 0; }
.feature-value { padding: 0.4rem 0; text-align: center; }
.feature-value::before { display: inline-block; margin-right: 0.25rem; }

/* Hide mobile layout on desktop */
.mobile-plan-stack { display: none; }

/* ====================== Mobile (≤600px) ====================== */

@media (max-width: 600px) {
  body { padding: 0 1rem; }

  .plans-container { display: block; padding: 0; }

  .plan-grid,
  .feature-comparison { display: none !important; }

  .mobile-plan-stack { display: block; }

  .mobile-plan-box {
    background-color: #f5e6d8;
    color: #000;
    border-radius: 1rem;
    border: 2px solid #4a0e4e;
    padding: 0;                                   /* header band + body handle padding */
    margin-bottom: 1.5rem;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  }

  /* Mobile header band */
  .mobile-plan-header {
    background-color: #eee3d4;
    color: #000;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #4a0e4e;
    border-radius: 1rem 1rem 0 0;
  }
  .mobile-plan-name {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
  }
  .mobile-plan-subtext {
    margin-top: -3px;   /* pull closer to title ~10px on mobile too */
    font-size: 0.95rem;
    color: #555;
  }

  .mobile-plan-divider {
    border: none;
    border-top: 1px solid #4a0e4e;
    margin: 0.75rem 0;
  }

  /* Reuse desktop body styles for mobile content area */
  .mobile-plan-box .plan-spec {
    padding: 0 1.25rem;
  }

  /* Mobile feature list */
  .mobile-feature { margin-bottom: 0.4rem; font-size: 0.95rem; padding-left: 1.25rem; }

  /* Unified Mobile Select Button */
  .mobile-select-row {
    display: flex;
    justify-content: flex-start;
    padding: 0 1.25rem 1rem 1.25rem;
  }
  .mobile-select-btn {
    appearance: none;
    border: none;
    background: #800020;       /* site accent (maroon) */
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease;
  }
  .mobile-select-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
  .mobile-select-btn:active { transform: translateY(0); }
}

/* --- Desktop Plan Info Column (legacy hook if referenced elsewhere) --- */
.plan-info { flex: 0 0 280px; }

/* Desktop: push subtext down a bit */
.plan-header .plan-subtext { 
  margin-top: 6px;  /* try 6–10px to taste */
}

/* Mobile: a little more space than desktop */
@media (max-width: 600px) {
  .mobile-plan-header .mobile-plan-subtext {
    margin-top: 8px; /* increase if you want more separation */
  }
}


/* force cache busting — Aug 17, 1312 hrs */