/* ============================================================
   TECTONICA — app styles
   Reads only from tokens.css / fonts.css. No magic numbers.
   Faithful reproduction of the Figma card system.
   ============================================================ */
@import "tokens.css";
@import "fonts.css";

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-weight: var(--w-roman);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- shared width ---- */
.site-head, .flow {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- header ---- */
.site-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-ink);
  margin-bottom: var(--s-6);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-2); align-self: center; }
.brand__mark { width: 30px; height: 30px; }
.brand__word {
  font-weight: var(--w-bold);
  font-size: var(--t-lg);
  color: var(--c-blue);
  letter-spacing: -0.01em;
}
.site-head__tagline { margin: 0; color: var(--c-ink-soft); font-size: var(--t-sm); }
.site-head__social { margin-left: auto; display: flex; gap: var(--s-4); font-size: var(--t-sm); align-self: center; }
.site-head__social a:hover { color: var(--c-blue); }

/* ---- flow ---- */
.flow { display: flex; flex-direction: column; gap: var(--s-5); padding-bottom: var(--s-8); }
.flow__empty { color: var(--c-ink-soft); }
.flow__empty a { color: var(--c-blue); }

/* ---- card ---- */
.card {
  position: relative;
  display: flex;
  background: var(--c-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* media = horizontal, scroll-snapping gallery (also a link to the post) */
.card__media {
  flex: 0 0 42%;
  min-height: 280px;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  background: #e9dede;
}
.gallery__img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  scroll-snap-align: start;
}

/* body = text column + icon rail */
.card__body { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--s-4); padding: var(--s-5); }
.card__text { flex: 1 1 auto; min-width: 0; }
.card__text-link { display: block; color: inherit; }
.card__text-link:hover .card__title { color: var(--c-blue); }

.card__title {
  margin: 0;
  font-weight: var(--w-medium);
  font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.7rem);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
.card__subtitle { margin: 0.25rem 0 0; color: var(--c-ink-soft); font-size: var(--t-sm); }
.card__summary { margin-top: var(--s-3); font-size: 1.12rem; line-height: 1.4; }
.card__summary p { margin: 0 0 0.6em; }
.card__summary p:last-child { margin-bottom: 0; }

.card__more {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: 1.05rem;
  line-height: var(--leading-body);
}
.card__more p { margin: 0 0 0.75em; }
.card__more p:last-child { margin-bottom: 0; }

/* icon rail */
.card__icons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding-top: 2px;
}
.icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: var(--c-icon);
  color: var(--c-icon-ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.icon svg { width: 18px; height: 18px; }
.icon:hover { background: #b6b2ae; }
.icon--avatar { cursor: default; }
.icon--comment[disabled] { opacity: .5; cursor: not-allowed; }
.icon--read { margin-top: auto; }
.icon--share { position: relative; }
.icon--share.is-copied::after {
  content: "Copied";
  position: absolute; right: 48px; top: 50%; transform: translateY(-50%);
  background: var(--c-ink); color: #fff; font-size: .72rem;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}

/* dog-ear save — folds down when the card is saved (hover shows a hint) */
.card__fold {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  z-index: 5;
}
.card__fold::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: linear-gradient(45deg, #d7cdcd 0%, #f3ebeb 78%);
  box-shadow: -3px 3px 6px rgba(70, 67, 67, .22);
  opacity: 0;
  transition: width .18s ease, height .18s ease, opacity .18s ease;
}
.card:hover .card__fold::after { width: 22px; height: 22px; opacity: .5; }
.card.is-saved .card__fold::after { width: 44px; height: 44px; opacity: 1; }

/* ---- responsive: below the desktop breakpoint, cards stack ---- */
@media (max-width: 819px) {
  .card { flex-direction: column; }
  .card__media { flex-basis: auto; width: 100%; aspect-ratio: 3 / 2; min-height: 0; }
  .gallery__img { min-height: 0; }
  .card__body { flex-direction: column; }
  .card__icons {
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-line);
  }
  .icon--read { margin-top: 0; margin-left: auto; }
  .site-head__social { margin-left: 0; width: 100%; }
}