/* =========================================================================
   I Made It Films — Component CSS
   Requires colors_and_type.css to be imported first.
   All component classes are prefixed `imf-`.
   ========================================================================= */

/* ============ BUTTONS — PREMIUM TEXT LINKS ============
   No boxes. No fills. No borders. Buttons are typography with a hairline
   underline. The line is the only chrome; it deepens on hover, the italic
   arrow glides. This is the entire button system. */
.imf-btn {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 0; margin: 0;
  background: transparent;
  border: 0;
  font-family: var(--imf-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--imf-paper);
  cursor: pointer;
  position: relative;
  user-select: none;
  border-bottom: 1px solid rgba(244, 241, 234, 0.25);
  padding-bottom: 4px;
  transition: border-color var(--imf-dur-base) var(--imf-ease-out),
              color var(--imf-dur-base) var(--imf-ease-out);
}
.imf-btn:hover  { border-bottom-color: var(--imf-paper); }
.imf-btn:focus-visible {
  outline: 0;
  border-bottom-color: var(--imf-signal);
  border-bottom-width: 1px;
  color: var(--imf-signal);
}

/* Primary: a touch heavier — same form, more presence. */
.imf-btn--primary {
  font-weight: 400;
  border-bottom-color: var(--imf-paper);
}
.imf-btn--primary:hover { border-bottom-color: var(--imf-paper); color: var(--imf-bone); }

/* Ghost: the default tertiary — quietest possible. */
.imf-btn--ghost { font-weight: 300; }

/* Signal: the one red moment. Type and underline in oxblood. */
.imf-btn--signal {
  color: var(--imf-signal);
  border-bottom-color: var(--imf-signal);
}
.imf-btn--signal:hover { color: var(--imf-signal-deep); border-bottom-color: var(--imf-signal-deep); }

/* Sizes — pure typographic */
.imf-btn--lg { font-size: 20px; }
.imf-btn--sm { font-size: 14px; }

/* Italic serif arrow — glides on hover. */
.imf-btn .imf-btn-arrow {
  display: inline-block;
  font-family: var(--imf-font-serif);
  font-style: italic;
  transition: transform var(--imf-dur-base) var(--imf-ease-out);
}
.imf-btn:hover .imf-btn-arrow { transform: translateX(6px); }

/* Bare link — no underline at all, for nav-style copy where context implies link. */
.imf-btn--bare {
  border-bottom: 0;
  padding-bottom: 0;
  font-family: var(--imf-font-serif);
  font-style: italic;
  opacity: 0.7;
}
.imf-btn--bare:hover { opacity: 1; }

/* ============ TAG / CHIP ("ticket stub") ============ */
.imf-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--imf-font-mono);
  font-size: var(--imf-fs-meta);
  letter-spacing: var(--imf-track-label);
  text-transform: uppercase;
  background: var(--imf-ink-3);
  color: var(--imf-paper);
  border-radius: var(--imf-r-1);
}
.imf-tag--outline { background: transparent; border: 1px solid var(--imf-rule); color: var(--imf-fg); }
.imf-tag--signal  { background: var(--imf-signal); color: var(--imf-paper); }
.imf-tag--paper   { background: var(--imf-paper); color: var(--imf-ink); }



/* ============ SLATE METADATA ROW ============
   The signature key-value row, modeled on a film slate.
   Use for film credits, project metadata, footer info. */
.imf-slate {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--imf-t-3) var(--imf-t-5);
  font-family: var(--imf-font-mono);
  font-size: var(--imf-fs-caption);
  letter-spacing: var(--imf-track-mono);
}
.imf-slate dt {
  font-size: var(--imf-fs-meta);
  letter-spacing: var(--imf-track-label);
  text-transform: uppercase;
  color: var(--imf-fg-muted);
  font-weight: 500;
  padding-top: 1px;
}
.imf-slate dd { margin: 0; color: var(--imf-fg); }

/* ============ CARD — POSTER ============ */
.imf-poster-card {
  display: flex; flex-direction: column;
  background: var(--imf-ink-2);
  color: var(--imf-paper);
  border: 1px solid var(--imf-ink-3);
  text-decoration: none;
  transition: transform var(--imf-dur-base) var(--imf-ease-out),
              border-color var(--imf-dur-base) var(--imf-ease-out);
  overflow: hidden;
}
.imf-poster-card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--imf-paper);
}
.imf-poster-card .imf-poster-art {
  aspect-ratio: 2 / 3;
  background: var(--imf-ink-3);
  position: relative;
  overflow: hidden;
}
.imf-poster-card .imf-poster-meta {
  padding: var(--imf-t-4);
  display: flex; flex-direction: column; gap: 4px;
}
.imf-poster-card .imf-poster-title {
  font-family: var(--imf-font-display);
  font-size: 22px;
  letter-spacing: var(--imf-track-display);
  line-height: 1;
  text-transform: lowercase;
}
.imf-poster-card .imf-poster-byline {
  font-family: var(--imf-font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--imf-fg-muted);
}

/* ============ FILMSTRIP — horizontal scroller ============ */
.imf-filmstrip {
  display: flex; gap: 2px; /* tight gap = strip-frame look */
  overflow-x: auto; overflow-y: hidden;
  padding: 16px 0;
  background: var(--imf-ink);
  position: relative;
  scrollbar-width: none;
}
.imf-filmstrip::-webkit-scrollbar { display: none; }
.imf-filmstrip > * { flex: 0 0 auto; }

/* ============ INPUT ============ */
.imf-input {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  color: var(--imf-fg);
  border: 0;
  border-bottom: var(--imf-bw-rule) solid var(--imf-rule);
  font-family: var(--imf-font-body);
  font-size: var(--imf-fs-body);
  border-radius: 0;
  transition: border-color var(--imf-dur-fast) var(--imf-ease-out);
}
.imf-input:focus {
  outline: 0;
  border-bottom-color: var(--imf-signal);
}
.imf-input::placeholder { color: var(--imf-fg-muted); }

.imf-field {
  display: flex; flex-direction: column; gap: 6px;
}
.imf-field-label {
  font-family: var(--imf-font-mono);
  font-size: var(--imf-fs-meta);
  letter-spacing: var(--imf-track-label);
  text-transform: uppercase;
  color: var(--imf-fg-muted);
}

/* ============ SECTION HEADER ============
   The signature: a uppercase label + heavy display + optional rule. */
.imf-section-head {
  display: flex; flex-direction: column; gap: var(--imf-t-3);
  border-top: var(--imf-bw-thick) solid var(--imf-fg);
  padding-top: var(--imf-t-5);
}
.imf-section-head .imf-section-label {
  display: flex; align-items: center; gap: var(--imf-t-3);
  font-family: var(--imf-font-mono);
  font-size: var(--imf-fs-meta);
  letter-spacing: var(--imf-track-label);
  text-transform: uppercase;
}
.imf-section-head .imf-section-label::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--imf-signal);
}
.imf-section-head .imf-section-title {
  font-family: var(--imf-font-display);
  font-size: clamp(40px, 6vw, 88px);
  line-height: var(--imf-lh-display);
  letter-spacing: var(--imf-track-display);
  text-transform: lowercase;
  margin: 0;
}

/* ============ NAV ============ */
.imf-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--imf-t-4) var(--imf-t-6);
  border-bottom: 1px solid var(--imf-rule);
  font-family: var(--imf-font-mono);
  font-size: var(--imf-fs-meta);
  letter-spacing: var(--imf-track-label);
  text-transform: uppercase;
}
.imf-nav-links { display: flex; gap: var(--imf-t-6); }
.imf-nav-links a {
  color: var(--imf-fg);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}
.imf-nav-links a:hover { color: var(--imf-signal); }
.imf-nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--imf-signal);
}