/* ============================================================
   Me&Co. newsletter, events, partners and interest pages.
   Loaded after styles.css on those pages only; everything
   sitewide (nav, footer, buttons, reveal) lives in styles.css.
   ============================================================ */

/* ---------- Blobs ---------- */
.blob {
  position: absolute; border-radius: 50%; filter: blur(38px);
  pointer-events: none; animation: drift 17s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(24px,-22px) scale(1.09); }
}

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.field label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brown);
}
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--sand-line);
  border-radius: 12px; padding: 14px 16px; outline: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 4px rgba(42,79,191,0.12);
}
.field ::placeholder { color: #A79E92; }

/* ---------- Placeholder copy ----------
   Anything wrapped in [brackets] on the event pages is copy to swap.
   Delete this one rule to drop the dotted hint everywhere at once. */
.ph { border-bottom: 1.5px dotted rgba(228,87,46,0.55); }

/* ---------- Agenda rows (event detail) ---------- */
.agenda-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--sand-line);
}
.agenda-row:last-child { border-bottom: 1px solid var(--sand-line); }
.agenda-time {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brown); padding-top: 3px;
}

/* ---------- Issue list (newsletter archive, events list) ---------- */
.issue-list { display: flex; flex-direction: column; }
.issue {
  display: grid; grid-template-columns: 168px 1fr; gap: 24px; align-items: start;
  padding: 26px 20px; margin: 0 -20px;
  border-top: 1px solid var(--sand-line); border-radius: 16px;
  color: inherit;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.issue:last-child { border-bottom: 1px solid var(--sand-line); }
.issue:hover { background: var(--cream); transform: translateX(4px); color: inherit; }
.issue-meta { display: flex; flex-direction: column; gap: 5px; padding-top: 3px; }
.issue-no {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue);
}
.issue-date { font-size: 13px; color: var(--ink-soft); }
.issue-title {
  font-weight: 600; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.28;
  color: var(--navy); text-wrap: pretty;
}
.issue:hover .issue-title { color: var(--blue); }
.issue-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 11px; font-size: 13.5px; color: var(--ink-soft);
}
.issue-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brown); background: var(--sand-light);
  border: 1px solid var(--sand-line); border-radius: 999px; padding: 4px 11px;
}
.issue-go { color: var(--blue); font-weight: 600; }

@media (max-width: 620px) {
  .issue { grid-template-columns: 1fr; gap: 8px; }
  .agenda-row { grid-template-columns: 1fr; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}