/* ===========================================================================
   cinema.css — "two divisions" entry choice in the index.html hero.
   Two doors: Technical Solutions (light) and Cinema Production (dark navy door
   that previews the cinema page's mood). Roll back: remove this <link> and the
   .entry-choice block in the hero.
   =========================================================================== */

.entry-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  max-width: 720px;
  margin-inline: auto;
}

.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.entry-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -26px rgba(10, 60, 111, 0.4); }

.entry-card-eyebrow { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); }
.entry-card-title { font-family: var(--font-head); font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.01em; color: var(--text); line-height: 1.1; }
.entry-card-desc { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.entry-card-go { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; transition: gap 0.25s var(--ease); }
.entry-card:hover .entry-card-go { gap: 9px; }

/* The Cinema door = a dark navy panel that previews the cinema page mood. */
.entry-card--cinema { background: linear-gradient(150deg, #0A3C6F, #062138); border-color: rgba(173, 142, 98, 0.42); }
.entry-card--cinema .entry-card-eyebrow { color: var(--gold); }
.entry-card--cinema .entry-card-title { color: #fff; }
.entry-card--cinema .entry-card-desc { color: #aebdd6; }
.entry-card--cinema .entry-card-go { color: var(--gold-hover); }
.entry-card--cinema:hover { box-shadow: 0 24px 54px -24px rgba(0, 0, 0, 0.6); }
/* soft gold glow in the corner — a hint of the cinematic light */
.entry-card--cinema::after {
  content: "";
  position: absolute; right: -34px; top: -34px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(173, 142, 98, 0.4), transparent 70%);
  pointer-events: none;
}

@media (max-width: 560px) { .entry-choice { grid-template-columns: 1fr; max-width: 420px; } }