/* =====================================================================
   Eldrich + Iya - section components (used by render.js)
   Builds on the tokens in styles.css.
   ===================================================================== */

/* ---- Work / portfolio ---- */
.work-group + .work-group { margin-top: 56px; }
.work-grid { margin-top: 8px; }
.lead-pill {
  display: inline-block; margin-top: 8px;
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(255, 250, 246, 0.16); color: var(--cream);
}
.group-head .tag a { color: var(--accent); }
.group-head .tag a:hover { color: var(--rose); }

/* ---- Process ---- */
#process-list { display: grid; gap: 0; }
.proc-step {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  padding-block: 28px; border-top: 1px solid var(--line);
}
.proc-step:last-child { border-bottom: 1px solid var(--line); }
.proc-n { font-family: var(--font-display); font-size: 2rem; color: var(--rose); font-weight: 700; }
.proc-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.proc-body p { color: var(--gray); margin-top: 8px; max-width: 60ch; }

/* ---- Formats ---- */
#formats-grid { margin-top: 8px; }
.format { border-top: 1px solid var(--line); padding-top: 14px; }
.format-tag { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); }
.format p { margin-top: 8px; color: var(--gray); font-size: 0.95rem; }

/* ---- Rates: plan + discounts + graphic design ---- */
.plan { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.plan-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.plan-row:last-child { border-bottom: 0; }
.plan-row span { color: var(--gray); font-size: 0.9rem; }
.plan-row b { font-family: var(--font-display); font-size: 1.1rem; }
.plan-row.total { background: var(--smoke); }
.plan-row.total b { color: var(--accent); }

#discount-list { display: grid; gap: 10px; }
.disc { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.disc-pct { font-family: var(--font-display); font-weight: 700; color: var(--accent); min-width: 3ch; }
.disc span:last-child { color: var(--gray); }

.gd-price { margin-top: 12px; font-family: var(--font-display); font-size: 1.25rem; color: var(--accent); font-weight: 700; }
.gd-price .from { font-family: var(--font-body); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gray); }
.gd-price .unit { font-family: var(--font-body); font-size: 0.7rem; color: var(--gray); }

/* ---- About ---- */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
#about-editors { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.editor-photo { aspect-ratio: 3 / 4; background: var(--smoke-2); border-radius: var(--radius); overflow: hidden; }
.editor-photo img { width: 100%; height: 100%; object-fit: cover; }
.editor figcaption { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.editor-name { font-family: var(--font-display); font-size: 1.05rem; }
.editor-role { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-top: 2px; }
#about-copy p + p { margin-top: 1rem; }
#about-copy p:first-child { font-size: clamp(1.1rem, 2vw, 1.35rem); }
#about-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; border-top: 1px solid var(--line); padding-top: 24px; }
.mv-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--rose); font-weight: 600; margin-bottom: 6px; }
.mv p { color: var(--gray); font-size: 0.95rem; }

/* ---- Contact ---- */
#contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--paper); }
.cc-head { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.cc-initial { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: var(--rose-tint); color: var(--accent); font-family: var(--font-display); font-size: 1.2rem; }
.cc-name { font-family: var(--font-display); font-size: 1.15rem; }
.cc-role { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.c-rows { display: grid; gap: 12px; }
.c-row dt { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gray); }
.c-row dd { margin-top: 2px; }
.c-row a { color: var(--ink); }
.c-row a:hover { color: var(--accent); }

/* ---- What happens next ---- */
#next-steps-list { margin-top: 8px; }
.ns-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--paper); }
.ns-n { font-family: var(--font-display); font-size: 1.6rem; color: var(--rose); font-weight: 700; line-height: 1; }
.ns-card h3 { font-size: 1.1rem; margin-top: 10px; }
.ns-card p { color: var(--gray); font-size: 0.92rem; line-height: 1.55; margin-top: 8px; }

/* ---- Feedback / testimonials ---- */
#feedback-list { margin-top: 8px; }
.quote-card { border-left: 3px solid var(--accent); background: var(--smoke); padding: 24px 26px; border-radius: 0 var(--radius) var(--radius) 0; }
.quote-card blockquote { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.4; color: var(--ink); font-style: italic; }
.quote-card figcaption { margin-top: 16px; }
.q-name { display: block; font-weight: 600; font-size: 0.9rem; }
.q-detail { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gray); margin-top: 3px; }

/* ---- Contact form ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-top: 8px; }
.contact-form { display: grid; gap: 12px; }
.contact-form .calc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form .btn { justify-self: start; }
.cf-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gray); }
.cf-note { font-size: 0.85rem; color: var(--accent); min-height: 1.1em; margin: 0; }

/* ---- Loading + reveal-before-content ---- */
body:not(.content-ready) [data-loading]::after { content: "Loading..."; color: var(--gray); font-size: 0.9rem; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  #contact-cards { grid-template-columns: 1fr; }
  #about-mv { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-form .calc-2col { grid-template-columns: 1fr; }
}