/* ══════════════════════════════════════════════════════════════════════════
   DAS BUSINESS DIRECTORY — shared by contact.html and company-purchasing.html
   ──────────────────────────────────────────────────────────────────────────
   Jayden, 2026-10-03: "fix this layout with all these lines and figure out an
   organized section and layout that doesn't run text out and looks weird...
   use same on both contact and company purchasing."

   WHAT WAS WRONG. The directory lived in the 380px sidebar of a `1fr 380px`
   grid whose own measured width was only 903px inside a 1265px parent. A
   seven-row attribute list and a seven-day hours table do not fit in 380px, so
   values wrapped, the hairline row rules ran past the text, and ~360px of the
   page sat empty beside it.

   WHAT THIS DOES. The directory comes out of the sidebar and becomes a
   full-width band under the form: one profile bar, then three equal columns
   that each hold one kind of information, then the three steps. Nothing is
   squeezed, every rule ends where its content ends, and both pages render the
   same markup from this one file.

   Colours are explicit hex. This repo's custom properties are inverted
   (--black is #FFFFFF, --gold is navy) and reading them here would be a trap.
   ══════════════════════════════════════════════════════════════════════════ */

.dasdir {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 72px;
  font-family: Inter, system-ui, sans-serif;
}

/* ── the profile bar ────────────────────────────────────────────────────── */
.dasdir-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid #DEE3E9;
  border-radius: 14px;
  background: #fff;
  padding: 20px 22px;
}
.dasdir-av {
  width: 56px; height: 56px; flex: none;
  border: 1px solid #E5E7EB; border-radius: 13px;
  display: grid; place-items: center; background: #fff;
}
.dasdir-av img { width: 34px; height: 34px; display: block; }
.dasdir-id { min-width: 0; flex: 1 1 260px; }
.dasdir-id h3 {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: 20px; font-weight: 700; color: #0F172A;
  letter-spacing: -.015em; line-height: 1.2; margin: 0;
}
.dasdir-cat { font-size: 13.5px; color: #6B7280; margin-top: 3px; }
.dasdir-meta {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  font-size: 13px; color: #374151; margin-top: 8px;
}
.dasdir-meta span { display: inline-flex; align-items: center; gap: 7px; }
.dasdir-meta svg { width: 15px; height: 15px; color: #8B9BAC; flex: none; }
.dasdir-dot { width: 8px; height: 8px; border-radius: 50%; background: #1E8E3E; flex: none; }
.dasdir-dot.shut { background: #9AA4B2; }
.dasdir-open { color: #1E8E3E; font-weight: 600; }
.dasdir-open.shut { color: #6B7280; }

/* actions sit at the end of the bar on desktop, full width on a phone */
.dasdir-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.dasdir-acts a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  padding: 11px 18px; border-radius: 9px;
  border: 1px solid #DEE3E9; color: #1A2E6E; background: #fff;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.dasdir-acts a:hover { background: #E8F3FF; border-color: #C7DEF7; }
.dasdir-acts a.prim { background: #1A2E6E; border-color: #1A2E6E; color: #fff; }
.dasdir-acts a.prim:hover { background: #112050; border-color: #112050; }
.dasdir-acts svg { width: 16px; height: 16px; }

/* ── three columns of one kind of information each ──────────────────────── */
.dasdir-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 22px;
}
.dasdir-col {
  border: 1px solid #DEE3E9;
  border-radius: 14px;
  background: #fff;
  padding: 20px 22px 8px;
  min-width: 0;                      /* lets long values wrap instead of pushing out */
}
.dasdir-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8B9BAC; margin-bottom: 14px;
}

/* a labelled row: the rule stops with the content, which is the bug being fixed */
.dasdir-row { padding: 12px 0; border-top: 1px solid #EDF1F5; min-width: 0; }
.dasdir-row:first-of-type { border-top: 0; padding-top: 0; }
.dasdir-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #8B9BAC;
}
.dasdir-v {
  font-size: 14.5px; color: #0F172A; font-weight: 500; line-height: 1.35;
  margin-top: 4px; overflow-wrap: anywhere;      /* long emails never overflow */
}
.dasdir-v a { color: #1A2E6E; font-weight: 600; text-decoration: none; }
.dasdir-v a:hover { text-decoration: underline; }
.dasdir-d { font-size: 12.5px; color: #6B7280; margin-top: 3px; line-height: 1.45; }
.dasdir-tel { font-size: 21px; font-weight: 700; letter-spacing: -.01em;
              font-variant-numeric: tabular-nums; }

/* routing rows get a chevron and the whole row is the target */
a.dasdir-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  align-items: center; text-decoration: none;
}
a.dasdir-row:hover .dasdir-v { color: #1A2E6E; }
a.dasdir-row .chev { color: #C3CCD8; }
a.dasdir-row .chev svg { width: 16px; height: 16px; display: block; }

/* the seven-day table — tabular figures so the times form a clean column */
.dasdir-hours { margin-top: 10px; display: grid; gap: 5px; }
.dasdir-hours div { display: flex; justify-content: space-between; gap: 14px;
                    font-size: 12.5px; color: #6B7280; }
.dasdir-hours div.today { color: #0F172A; font-weight: 600; }
.dasdir-hours span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── the three steps ────────────────────────────────────────────────────── */
.dasdir-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px; margin-top: 22px;
}
.dasdir-step { border-top: 2px solid #1A2E6E; padding-top: 14px; min-width: 0; }
.dasdir-step .n {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #1A2E6E;
}
.dasdir-step b { display: block; font-size: 14.5px; color: #0F172A;
                 font-weight: 600; margin-top: 6px; }
.dasdir-step p { font-size: 12.5px; color: #6B7280; margin-top: 4px; line-height: 1.5; }

.dasdir-note { font-size: 12px; color: #8B9BAC; margin-top: 18px; line-height: 1.5; }

/* ── responsive: two columns, then one. Nothing ever gets a 380px cage. ─── */
@media (max-width: 1024px) {
  .dasdir { padding: 0 32px 64px; }
  .dasdir-cols, .dasdir-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 720px) {
  .dasdir { padding: 0 20px 56px; }
  .dasdir-cols, .dasdir-steps { grid-template-columns: 1fr; gap: 18px; }
  .dasdir-acts { margin-left: 0; width: 100%; }
  .dasdir-acts a { flex: 1 1 auto; justify-content: center; }
  .dasdir-bar { padding: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIVING INSIDE THE PAGE'S OWN GRID
   css/das-contact.css builds .contact-grid with !important column rules
   (`minmax(0,1fr) 50%` at >=1024, hero in column 1, form in column 2). Dropped
   in as an ordinary child the directory inherits one narrow cell — measured at
   392px with 85px columns, which is what made the text run out.
   Spanning every column and ordering it last makes it a full-width row under
   both, and leaves the hero/form arrangement exactly as it was.
   The grid already supplies the max-width and the page gutter, so the
   stand-alone padding is dropped here to avoid doubling it.
   ══════════════════════════════════════════════════════════════════════════ */
.contact-grid > .dasdir {
  grid-column: 1 / -1 !important;
  order: 9 !important;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 8px;
}

/* ── the column guides stay a motif, they stop being a wireframe ─────────
   .dc-guide (das-contact.css:55) draws five full-height dashed rules down the
   page. They were painting straight across the directory cards, which is what
   made the section read as unfinished. Giving the cards their own stacking
   context puts the guides behind the content instead of through it; the motif
   still shows in the gutters and between cards, which is where it reads as
   deliberate. */
.dasdir { position: relative; z-index: 1; }
.dasdir-bar, .dasdir-col { position: relative; z-index: 1; background: #fff; }