/* ==========================================================================
   Taq Ventures — Content & Community page-only styles
   Loaded after assets/styles.css on content-community.html

   Two layouts in one file: the wall as a visitor sees it, and the editing
   affordances layered on top of it for a signed-in editor. The editor's own
   chrome all sits behind `.is-editing` on the board, so a visitor's copy of
   this stylesheet describes controls their page never builds.
   ========================================================================== */

/* ---- intro ---- */
.intro{
  padding: 84px 0 60px;
  border-bottom: 1px solid var(--line);
}
.intro .eyebrow{
  display:flex; align-items:center; gap: 10px;
  color: var(--muted); font-size: 14px; margin-bottom: 24px;
}
.intro .eyebrow .rule{ width: 28px; height: 2px; background: var(--accent-bright); }
.intro h1{
  font-size: clamp(32px, 4.5vw, 46px);
  letter-spacing: -0.01em;
}
.intro p{
  color: var(--muted);
  font-size: 18px;
}

/* ---- board header ---- */
.board-section{
  padding: 60px 0 76px;
  border-bottom: 1px solid var(--line);
}
.board-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.board-head h2{ font-size: clamp(26px, 3.4vw, 34px); }
.board-note{
  color: var(--muted);
  font-size: 15px;
  margin-top: 8px;
  max-width: 52ch;
}
.board-sources{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.board-sources .sources-label{ text-transform: uppercase; letter-spacing: 0.08em; }
.board-sources .source-tag{
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  background: #FFFFFF;
}

/* ---- the wall ----
   Three columns on a wide screen, and a card can claim two or three of them
   via its `span`. Auto-flow dense is deliberate: a two-wide card dropped into
   a row with one slot left would otherwise leave a hole, and a wall with holes
   in it looks broken rather than arranged. */
.board{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px){
  .board{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .board{ grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

.card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}
/* A span only means anything where there is more than one column to span. */
.card[data-span="2"]{ grid-column: span 2; }
.card[data-span="3"]{ grid-column: span 3; }
@media (max-width: 900px){
  .card[data-span="3"]{ grid-column: span 2; }
}
@media (max-width: 620px){
  .card[data-span="2"], .card[data-span="3"]{ grid-column: span 1; }
}

.card-head{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  min-width: 0;
}
.card-platform{
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.card-byline{
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-date{
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ---- embed body ----
   The frame's height is set inline per card, because only the platform knows
   how tall its own post is. Ratio-driven embeds (video) get aspect-ratio
   instead, so they stay correct at any column width. */
.card-frame{
  position: relative;
  background: var(--panel);
}
.card-frame iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.card-frame[data-ratio]{ aspect-ratio: var(--ratio); }
.card-frame:not([data-ratio]){ height: var(--frame-height, 480px); }

/* ---- quote and mention bodies ---- */
.card-body{
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.card-title{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
}
.card-quote{
  font-size: 16px;
  line-height: 1.55;
}
.card-quote::before{ content: '\201C'; }
.card-quote::after{ content: '\201D'; }
.card-attrib{
  color: var(--muted);
  font-size: 14px;
}

/* The owner's own line about why a card is on the wall. Set apart from the
   post it annotates — a visitor should never have to guess which words are
   ours and which are the original poster's. */
.card-note{
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 12px 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.card-foot{
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.card-foot a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.card-foot a:hover{ color: var(--accent-bright); text-decoration: underline; }

/* ---- empty, loading and error states ---- */
.board-status:empty{ display: none; }
.board-loading{ color: var(--muted); font-size: 15px; }
.board-note-box{
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 4px;
  padding: 28px 26px;
  max-width: 62ch;
}
.board-note-box h3{ font-size: 24px; margin-bottom: 8px; }
.board-note-box p{ color: var(--muted); font-size: 15px; }

/* ==========================================================================
   Editing
   ========================================================================== */

.board-editor-mount:empty{ display: none; }

/* The way in, for a visitor who is actually the owner. Deliberately quiet —
   it sits under the wall, reads as a tool, and asks for nothing until pressed. */
.board-editor-link{
  margin-top: 28px;
}
.board-editor-link .tool{
  font-size: 13px;
  padding: 7px 12px;
  color: var(--muted);
}

/* The bar. Sticks to the bottom of the viewport while you work, because the
   wall is taller than the screen and the paste field is the thing you keep
   coming back to. */
.editor-bar{
  position: sticky;
  bottom: 16px;
  z-index: 40;
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(22, 24, 27, 0.12);
}
.editor-bar form{
  display: flex;
  gap: 8px;
  flex: 1 1 380px;
  min-width: 0;
}
.editor-bar input{
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #FFFFFF;
  color: var(--text);
}
.editor-bar input:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.editor-who{
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}
.editor-message{
  flex: 1 1 100%;
  font-size: 14px;
  color: var(--muted);
}
.editor-message[data-tone="error"]{ color: #8A2B24; }
.editor-message:empty{ display: none; }

/* Small square-ish controls, distinct from the site's marketing buttons —
   these are tools, and they should not compete with "Book a video call". */
.tool{
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #FFFFFF;
  color: var(--text);
  cursor: pointer;
}
.tool:hover{ border-color: var(--accent); color: var(--accent); }
.tool[disabled]{ opacity: 0.5; cursor: default; }
.tool-primary{
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #FFFFFF;
}
.tool-primary:hover{ background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.tool-danger:hover{ border-color: #8A2B24; color: #8A2B24; }

/* Getting back in. There is no signup here, so an editor who has lost the
   password has no other door — but it is still a way out rather than a second
   action, so it carries no border until you reach for it. */
.editor-forgot{
  font-size: 13px;
  padding: 7px 10px;
  color: var(--muted);
  border-color: transparent;
}
.editor-forgot:hover{ border-color: var(--line-strong); color: var(--accent); }

/* The reset row opens under the sign-in fields, on its own line, so nothing
   already typed above moves or is lost. */
.editor-bar form.editor-recover{
  flex: 1 1 100%;
}
/* `.editor-bar form` sets display:flex, which would otherwise beat the
   browser's own [hidden] rule and leave the reset row on screen. */
.editor-bar form[hidden]{ display: none; }

/* ---- per-card controls ---- */
.card-tools{
  display: none;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}
.board.is-editing .card-tools{ display: flex; }
.card-tools .tool{ padding: 6px 10px; font-size: 13px; }
.card-tools .grip{
  cursor: grab;
  touch-action: none;
  letter-spacing: 2px;
  color: var(--muted);
}
.card-tools .grip:active{ cursor: grabbing; }
.card-tools .spacer{ margin-left: auto; }

.card[data-published="false"]{
  border-style: dashed;
  border-color: var(--line-strong);
}
.card-draft-flag{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 2px 8px;
}

/* While a drag is in progress the frames stop swallowing the pointer, which
   they otherwise do the moment the cursor crosses one. */
.board.is-dragging iframe{ pointer-events: none; }
.card.is-dragging{
  opacity: 0.55;
  box-shadow: 0 14px 34px rgba(22, 24, 27, 0.18);
}
.card.is-drop-target{ outline: 2px dashed var(--accent); outline-offset: 3px; }

/* The FLIP animation the reorder uses. Honouring reduced-motion here matters
   more than usual: this transition fires on every card that moved, so a wall
   of twenty is twenty things sliding at once. */
@media (prefers-reduced-motion: no-preference){
  .card.is-sliding{ transition: transform 220ms cubic-bezier(0.2, 0, 0.2, 1); }
}

/* ---- the edit dialog ---- */
.card-dialog{
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0;
  max-width: 520px;
  width: calc(100vw - 32px);
  background: #FFFFFF;
  color: var(--text);
}
.card-dialog::backdrop{ background: rgba(22, 24, 27, 0.42); }
.card-dialog form{ padding: 22px 24px 20px; }
.card-dialog h3{ font-size: 24px; margin-bottom: 4px; }
.card-dialog .dialog-sub{
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 18px;
  overflow-wrap: anywhere;
}
.field{ display: block; margin-bottom: 14px; }
.field > span{
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}
.field input,
.field select,
.field textarea{
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #FFFFFF;
  color: var(--text);
}
.field textarea{ min-height: 76px; resize: vertical; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-check{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 18px;
}
.field-check input{ width: auto; }
.dialog-actions{
  display: flex;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.dialog-actions .spacer{ margin-left: auto; }

/* ---- CTA ---- */
.cta-block{ padding: 76px 0; }
.cta-block h2{ font-size: 34px; }
.cta-block p{
  color: var(--muted);
  margin-bottom: 24px;
}

/* ---- mobile vertical rhythm: see the matching block in styles.css ---- */
@media (max-width: 640px){
  .intro{ padding: 40px 0 32px; }
  .intro .eyebrow{ margin-bottom: 18px; }
  .intro p{ font-size: 17px; }
  .board-section{ padding: 40px 0 44px; }
  .board-head{ margin-bottom: 24px; }
  .cta-block{ padding: 44px 0; }
  .cta-block h2{ font-size: 28px; }
  .editor-bar{ bottom: 8px; }
  .field-row{ grid-template-columns: 1fr; }
}