/* ============================================================
   parity-overrides-tools.css  (P3b — tool pages only)
   Linked from the ToolPage component (layout.tsx is frozen for
   P3b, so this loads from the page body — CSS applies the same).
   Every rule below is a verbatim port from the live tool pages'
   inline <head> <style> blocks, with a WHY note. No redesign.
   ============================================================ */

/* [MOVED by P4 — JS layer] The every-page inline head style (dropdown item
   min-width + mega-menu grid + .custom-tag) now lives in the GLOBAL
   parity-overrides.css: the vendored JS opens dropdowns on every page, so
   the homepage needs it too. Kept out of this file to avoid duplication. */

/* [REMOVED by P4 — JS layer] The static 2-row grid stand-in for the
   avatar/headshot template strip is gone: the vendored facegen.min.js now
   runs the real slick carousel with rows:2 (as live), which builds the
   two-row column-major slide DOM itself. The grid override's
   display:grid!important would break slick's runtime layout. */

/* WHY: the face-swapper / meme-face pages carry a page-specific inline
   <style> for the 2-pane faceswap layout (discovery/pages/face-swapper.html
   lines 70-191). Ported verbatim below. Two dead rules from that block are
   deliberately OMITTED: `#avatar_preview{...}` and `.custom-file-label{...}`
   match no element on the face pages, and #avatar_preview WOULD wrongly
   restyle the upload preview img on avatar/bg-remover/outpainting (where the
   live pages have no such rule). All selectors kept below only match
   elements that exist on the face pages. */
.faceswap-container {
  display: flex;
  padding: 60px;
}

.options-container {
  min-width: 460px;
  max-width: 1440px;
  padding: 0 30px;
  height: 100vh;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-bottom: 20px;
}

.template-image {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
}

.small-images-container {
  margin-right: 50px;
}

.active-template {
  border: 3px solid #4790f5;
}

@media only screen and (max-width: 1199px) {
  .faceswap-container {
    flex-direction: column;
  }

  .options-container {
    margin-top: 50px;
    height: auto;
    overflow-y: auto;
  }

  .options-grid {
    display: flex;
    flex-flow: column wrap;
    gap: 0px;
    height: 326px;
  }

  .template-image {
    width: 90px;
    height: 90px;
    margin-bottom: 12px;
    margin-right: 12px;
  }

  .upload-note {
    position: sticky;
    left: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .preview-container {
    flex-direction: column !important;
  }

  .faceswap-container {
    padding: 0 !important;
  }

  .options-container {
    padding: 0 !important;
  }

  .small-images-container {
    margin-right: 0px;
  }
}
