/* Responsive overrides for the Claude Design home page (export/index.html).
   The export uses inline styles, so overrides need !important. Hooks
   (.aqua-header, .aqua-menu-btn, .aqua-team-*) are added by src/patch-index.mjs. */

/* Menu button: hidden on wide screens */
.aqua-menu-btn { display: none; }
.aqua-menu-btn {
  width: 44px; height: 44px; margin-left: auto; padding: 0;
  border: 1px solid var(--color-neutral-400); background: #fff; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.aqua-menu-btn span { display: block; width: 20px; height: 2px; background: #101214; transition: transform .2s, opacity .2s; }
html.aqua-menu-open .aqua-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.aqua-menu-open .aqua-menu-btn span:nth-child(2) { opacity: 0; }
html.aqua-menu-open .aqua-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Compact header + drop-down menu (the full header needs ~950px in French) */
@media (max-width: 960px) {
  .aqua-header > div { gap: 0 16px !important; padding: 10px 20px !important; }
  .aqua-menu-btn { display: inline-flex; }
  .aqua-header > div > nav,
  .aqua-header > div > [role="group"],
  .aqua-header > div > a:last-child { display: none !important; }

  html.aqua-menu-open .aqua-header > div > nav {
    display: flex !important; flex-direction: column; flex-basis: 100%;
    gap: 0 !important; margin: 10px 0 0 !important; border-top: 1px solid var(--color-neutral-300);
  }
  html.aqua-menu-open .aqua-header > div > nav a {
    padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--color-neutral-200);
  }
  html.aqua-menu-open .aqua-header > div > [role="group"] { display: flex !important; margin-top: 16px; }
  html.aqua-menu-open .aqua-header > div > [role="group"] button { min-width: 48px; min-height: 44px; }
  html.aqua-menu-open .aqua-header > div > a:last-child {
    display: block !important; flex: 0 0 100% !important; margin: 16px 0 12px; padding: 15px 18px !important; text-align: center;
  }

  /* Hero text scales with the viewport; keep it readable on tablets */
  #top > div > div > div > div:first-child { font-size: 12px !important; }
  #top p { font-size: 15px !important; }
  #top a { font-size: 13px !important; padding: 12px 16px !important; }
}

@media (max-width: 640px) {
  /* Hero: image fills the whole block, darker overlay for legibility */
  #top { position: relative; }
  #top > img { position: absolute; inset: 0; height: 100% !important; object-fit: cover; object-position: 72% center; }
  #top > div { background: linear-gradient(180deg, rgba(4,8,16,.5) 0%, rgba(4,8,16,.72) 55%, rgba(4,8,16,.88) 100%) !important; }
  #top > div > div { grid-template-columns: 1fr !important; padding: 56px 20px 60px !important; }
  #top > div > div > div:empty { display: none; }
  #top h1 { font-size: 38px !important; line-height: 0.98 !important; }
  #top p { font-size: 16px !important; }
  #top > div > div > div > div:first-child { font-size: 12px !important; }
  #top a { font-size: 14px !important; padding: 14px 18px !important; }

  /* Tighter cards and section spacing */
  #participate > div > div:last-child { gap: 16px !important; }
  #participate > div > div:last-child > div { padding: 24px 20px 26px !important; gap: 12px !important; }
  #priorities > div > div:last-child { gap: 16px !important; }

  /* Tap targets */
  #register form button[type="button"] { min-height: 44px; }

  /* Team teaser: compact horizontal cards */
  .aqua-team-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .aqua-team-grid > a { flex-direction: row !important; border-top-width: 1px !important; border-left: 5px solid #0e8ba3 !important; }
  .aqua-team-grid img { width: 96px !important; flex: 0 0 96px; }
  .aqua-team-grid .aqua-team-body { justify-content: center; padding: 12px 16px !important; }
  .aqua-team-grid .aqua-team-body > div:first-child { font-size: 22px !important; }

  /* Footer: two-column link list */
  footer nav { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 16px !important; }
  footer nav a { padding: 10px 0; }
}