/* Shared screen reflow. Visual identity stays in employee-cv.css. */

:root {
  --pad: clamp(16px, 4vw, 48px);
  --section: clamp(28px, 5vw, 56px);
}

html { overflow-x: clip; }
body {
  overflow-x: clip;
  padding-bottom: env(safe-area-inset-bottom);
  font-size: clamp(15px, 1.05vw, 17px);
}

.wrap {
  width: min(1180px, calc(100% - var(--pad)));
  max-width: 1180px;
  padding-inline: 0;
}

.site-header {
  top: 0;
  padding-top: env(safe-area-inset-top);
}

.header-row {
  min-height: 58px;
  gap: clamp(8px, 2vw, 16px);
}

.mark {
  min-width: 0;
  max-width: min(46vw, 280px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.portal-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hero { padding: var(--section) var(--pad) 20px; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.section { padding: var(--section) var(--pad); }
.section h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); overflow-wrap: anywhere; }
.prose p, .timeline p, .support, .tagline { overflow-wrap: anywhere; }
.prose p { max-width: 68ch; }

.timeline li { padding-left: clamp(14px, 3vw, 18px); }
.place, .timeline strong { overflow-wrap: anywhere; }

.btn,
.btn[data-examples-toggle] {
  min-height: 44px;
}

.link-cards,
.cv-grid,
.pharma-grid,
.capability-grid {
  grid-template-columns: 1fr;
}

.example-item a,
.supplement a,
.example-link {
  overflow-wrap: anywhere;
}

img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .btn[data-examples-toggle]:hover { transform: translateY(-1px); }
}
@media (hover: none) {
  .btn[data-examples-toggle]:hover { transform: none; }
}

@media (max-width: 760px) {
  .nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: min(52vw, 280px);
    margin-left: 0;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; }
  .header-row { justify-content: space-between; }
  .portal-link { margin-left: 0; }
}

@media (max-width: 480px) {
  .actions,
  .cv-actions { flex-direction: column; align-items: stretch; }
  .actions .btn,
  .cv-actions .btn,
  .btn[data-examples-toggle] { width: 100%; }
  .site-footer { flex-direction: column; }
}

@media (min-width: 701px) and (max-width: 980px) {
  .cv-grid,
  .pharma-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 981px) {
  .cv-grid { grid-template-columns: 1fr 1fr; }
  .pharma-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-top: 20px; padding-bottom: 12px; }
  .section { padding-block: 22px; }
  .site-header { position: static; }
}

@media (min-width: 1800px) {
  .wrap { width: min(1180px, calc(100% - 80px)); }
  .hero h1 { font-size: 2.8rem; }
}

@media (min-aspect-ratio: 9/16) and (min-height: 1600px) {
  .hero { padding-top: clamp(48px, 8vh, 96px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}