/* ==========================================================================
   EsyHR — responsive refinements
   Base styles in main.css target 375px; these adapt up and down from there.
   ========================================================================== */

/* Very small phones (iPhone SE 1st gen, 320px) */
@media (max-width: 359px) {
  .shell { padding: 16px 14px 32px; }
  .hero h1 { font-size: 28px; }
  .hero .logo { width: 72px; height: 72px; }
  .page-head h1 { font-size: 23px; }
  .card { padding: 18px 14px; }
  .role-head { padding: 14px; gap: 12px; }
  .role-icon { width: 44px; height: 44px; border-radius: 14px; }
  .features { gap: 6px; }
  .feature { font-size: 11px; padding: 12px 4px; }
  .code-box .code { font-size: 24px; }
  .app-main, .app-header .bar { padding-left: 14px; padding-right: 14px; }
  .stat-value { font-size: 22px; }
  .punch-btn { width: 148px; height: 148px; }
  .clock { font-size: 34px; }
  .bottom-nav button { font-size: 10px; }
}

/* Large phones */
@media (min-width: 414px) {
  .shell { padding-left: 24px; padding-right: 24px; }
}

/* Side-by-side fields once there is room */
@media (min-width: 440px) {
  .form-row.two { grid-template-columns: 1fr 1fr; }
}

/* Tablets and up: center the content in a floating card */
@media (min-width: 768px) {
  body { font-size: 16px; }
  .shell {
    max-width: 520px;
    padding-top: 48px;
    justify-content: flex-start;
  }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 42px; }
  .hero .logo { width: 96px; height: 96px; }
  .card { padding: 30px 28px; }
  .stats:not(.three) { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
  .shell { padding-top: 64px; }
}

/* Landscape phones: reduce vertical whitespace */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 8px 0 12px; }
  .hero .logo { width: 56px; height: 56px; margin-bottom: 10px; }
  .features { display: none; }
}

/* Installed PWA: respect notches */
@media (display-mode: standalone) {
  .shell {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
}

/* Hover only on devices that support it (avoid sticky hover on touch) */
@media (hover: none) {
  .role:hover { border-color: var(--border); }
  .role.is-open:hover { border-color: var(--brand); }
}