/* ============================================================
   DIRECTORY — generated pharmacy & state pages
   ============================================================ */
.crumbs {
  max-width: var(--content-page); margin: var(--space-6) auto 0;
  padding: 0 var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted);}
.crumbs a { color: var(--color-primary-text);}
.crumbs a:hover { text-decoration: underline;}

.dir-page { max-width: var(--content-page); margin: 0 auto; padding: var(--space-6);}

.dir-head { display: flex; gap: var(--space-5); align-items: flex-start; margin-bottom: var(--space-6);}
.dir-avatar {
  width: 64px; height: 64px; border-radius: var(--radius-lg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--text-lg);
  background: var(--color-primary-light); color: var(--color-primary-text);}
.dir-head h1 { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; margin: var(--space-1) 0;}
.dir-sub { font-size: var(--text-sm); color: var(--color-text-muted);}
.dir-loc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px;}
.dir-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3);}
.dir-tags-note { font-size: var(--text-xs); color: var(--color-text-faint);}
.cert-badge { padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700;
  background: var(--color-primary-light); color: var(--color-primary-text);}

.dir-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8);}
.dir-actions .btn-primary-lg { font-size: var(--text-sm); padding: var(--space-3) var(--space-6);}

.dir-about { margin-bottom: var(--space-8);}
.dir-about h2 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-3);}
.dir-about p { color: var(--color-text-muted); line-height: 1.7;}

/* State page list */
.dir-state-h1 { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--space-2);}
.dir-state-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); max-width: 60ch; line-height: 1.6;}
.dir-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);}
.dir-list-item {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);}
.dir-list-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px);}
.dir-list-name { font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: var(--space-2);}
.dir-list-loc { font-size: var(--text-sm); color: var(--color-text-muted);}
@media (max-width: 640px) { .dir-list { grid-template-columns: 1fr;} .dir-head { flex-direction: column;} }

/* Pharmacy page: 2-column with sponsored side rail */
.dir-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-8); align-items: start;}
.dir-main { min-width: 0;}
.dir-aside { position: sticky; top: 90px;}
@media (max-width: 860px) {
  .dir-layout { grid-template-columns: 1fr;}
  .dir-aside { position: static; max-width: 420px;}
}

/* Accuracy / claim-listing prompt */
.dir-accuracy { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6;}
.dir-accuracy a { color: var(--color-primary-text); font-weight: 600;}
.dir-accuracy a:hover { text-decoration: underline;}

/* Patient "how to get a medication made here" steps on the profile page */
.dir-howto { margin-top: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); }
.dir-howto h2 { font-size: var(--text-base); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-4); }
.dir-howto ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.dir-howto li { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.dir-howto li strong { color: var(--color-text); }
.dir-howto-note { font-size: var(--text-xs); color: var(--color-text-subtle); margin: 0; line-height: 1.5; }

/* Condition / drug landing pages (/c/) */
.cond-page { max-width: var(--content-page); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); }
.cond-h1 { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); margin: var(--space-4) 0 var(--space-4); line-height: 1.15; }
.cond-lead { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.6; margin: 0 0 var(--space-6); }
.cond-h2 { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin: var(--space-6) 0 var(--space-2); }
.cond-p { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.65; margin: 0; }
.cond-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-8) 0; }
.cond-faq { margin-top: var(--space-6); }
.cond-q { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
.cond-q summary { font-weight: 600; color: var(--color-text); cursor: pointer; font-size: var(--text-base); }
.cond-q p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin: var(--space-2) 0 0; }
.cond-disc { font-size: var(--text-2xs); color: var(--color-text-subtle); line-height: 1.6; margin-top: var(--space-10); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }

/* Homepage "common reasons" links into the condition pages */
.reasons { max-width: var(--content-page); margin: 0 auto; padding: 0 var(--space-6) var(--space-4); }
.reasons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.reason-card { display: block; padding: var(--space-4) var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-weight: 600; color: var(--color-text);
  font-size: var(--text-sm); transition: border-color .15s, box-shadow .15s; }
.reason-card:hover { border-color: var(--color-primary-mid); box-shadow: var(--shadow-sm); }
.reason-card span { display: block; font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }