/* LocalKeep landing -- phone and tablet overrides.
 *
 * index.html is a design-tool export: support.js renders its markup through React with every
 * style inline, so these rules need !important to win. Everything here sits inside a
 * max-width media query, so at 901px and wider nothing in this file applies and the desktop
 * design is untouched. Selectors use ids, data-* attributes and structure, never the inline
 * style text (React re-serialises it), so they survive a re-export of the same design.
 */

@media (max-width: 900px) {
  /* Hero: one column, phone mockup below the copy. */
  #lkRoot > header#top {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding-top: 112px !important;
    gap: 0 !important;
  }
  #lkRoot > header#top > div:first-child { max-width: none !important; }
  #lkRoot > header#top > div:nth-child(2) { min-height: 620px !important; }
  /* the glow and the floor shadow are fixed-width; keep them inside the column */
  #lkRoot > header#top > div:nth-child(2) > div:first-child { width: min(560px, 100%) !important; }
  #lkRoot > header#top > div:nth-child(2) > div:last-child { width: min(340px, 90%) !important; }

  /* Feature grids: three columns to two. The cell borders are inset shadows drawn for a
     3-column grid, so they are redrawn for two: a right edge on the left cell of each row,
     a bottom edge on every row but the last, and an odd last cell spans the row. */
  #vault > div[data-rv="2"],
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #vault > div[data-rv="2"] > div,
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] > div {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06) !important;
  }
  #vault > div[data-rv="2"] > div:nth-child(odd),
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] > div:nth-child(odd) {
    box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .06) !important;
  }
  #vault > div[data-rv="2"] > div:nth-last-child(2):nth-child(odd),
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] > div:nth-last-child(2):nth-child(odd) {
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06) !important;
  }
  #vault > div[data-rv="2"] > div:last-child,
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] > div:last-child {
    box-shadow: none !important;
  }
  #vault > div[data-rv="2"] > div:last-child:nth-child(odd),
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* "How the vault is sealed" and "Never.": stack the two columns. */
  #security > div,
  #lkRoot > section[data-screen-label="Never"] > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #security > div > div:first-child { position: static !important; }
}

@media (max-width: 640px) {
  /* Nav: the section links do not fit beside the logo; keep the logo and "Get the app". */
  #lkRoot > nav > div > a:not(:last-child) { display: none !important; }
}

@media (max-width: 600px) {
  #lkRoot > header#top { padding-top: 104px !important; }
  #lkRoot > header#top > div:first-child { gap: 26px !important; }
  #lkRoot > header#top h1 { font-size: clamp(44px, 13.5vw, 60px) !important; }
  #lkRoot > header#top > div:nth-child(2) { min-height: 600px !important; }

  #lkRoot h2 { font-size: clamp(34px, 10vw, 40px) !important; }
  #get > h2 { font-size: clamp(42px, 12.5vw, 52px) !important; }

  /* Feature grids: one column, a rule between cells. */
  #vault > div[data-rv="2"],
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 40px !important;
  }
  #vault > div[data-rv="2"] > div,
  #vault > div[data-rv="2"] > div:nth-child(odd),
  #vault > div[data-rv="2"] > div:nth-last-child(2):nth-child(odd),
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] > div,
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] > div:nth-child(odd),
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] > div:nth-last-child(2):nth-child(odd) {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06) !important;
    padding: 26px 24px !important;
    gap: 12px !important;
  }
  #vault > div[data-rv="2"] > div:last-child,
  #lkRoot > section[data-screen-label="Day to day"] > div[data-rv="2"] > div:last-child {
    box-shadow: none !important;
  }

  #security > div { margin-top: 40px !important; }

  /* Comparison table: it already scrolls inside #lkTableWrap, but its sticky 280px feature
     column left ~50px for the other columns. Narrow the columns so the LocalKeep column sits
     beside the feature names; the rest stays a horizontal scroll. (support.js re-measures
     #lkColHead for the highlight inlay on load and resize.) */
  #lkTableWrap > table { width: 790px !important; }
  #lkTableWrap > table > thead th { width: 104px !important; padding-left: 8px !important; padding-right: 8px !important; }
  #lkTableWrap > table > thead th:first-child { width: 134px !important; padding-left: 14px !important; }
  #lkTableWrap > table > thead th#lkColHead { width: 136px !important; }
  #lkTableWrap > table > tbody th { padding: 10px 12px 10px 14px !important; font-size: 13px !important; }
}