/* Expansions of the mobile layout for larger screens. */

@media (min-width: 420px) {
  .swatches--small { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 700px) {
  :root { --gutter: 40px; }

  .hero__actions { flex-direction: row; align-items: center; gap: 18px; }
  .hero__actions .btn--wide { width: auto; padding: 0 36px; }
  .hero__trust { text-align: left; }

  .pillars { grid-template-columns: repeat(3, 1fr); border: 0; background: none; gap: 32px; }
  .pillar { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 12px; padding: 0; background: none; }
  .pillar__visual { width: 100%; height: auto; aspect-ratio: 1.3; grid-row: auto; }
  .pillar__visual--face, .pillar__visual--style { border: 1px solid var(--line); padding: 18%; }
  .pillar__visual--face svg, .pillar__visual--style svg { width: 100%; height: 100%; }

  .method__grid { grid-template-columns: repeat(4, 1fr); }

  .ob, .check, .calibrate { max-width: 640px; margin: 0 auto; }
  .ob__progress { margin: 0; }
  .check__photo, .calibrate__stage { margin: 0; }

  .capture { max-width: 640px; margin: 0 auto; }
  .capture__stage { margin: 0; min-height: 60vh; }

  .swatches { grid-template-columns: repeat(4, 1fr); }
  .swatches--small { grid-template-columns: repeat(6, 1fr); }
  .metals { grid-template-columns: repeat(4, 1fr); }
  .actions-row { grid-template-columns: repeat(2, 1fr); }
  .face { grid-template-columns: 1fr 1fr; align-items: start; }
  .band { height: 168px; margin-inline: 0; }

  .sheet { margin: auto; border-radius: 6px; }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
}

@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: auto;
    align-content: center;
    column-gap: 56px;
    max-width: var(--max);
    margin: 0 auto;
    padding-block: 64px;
  }
  .hero::after { display: none; }
  .hero > *:not(.hero__swatches) { grid-column: 1; }
  .hero__swatches {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1 / span 5;
    width: 100%;
    align-self: center;
  }
  .returning, .intro, .privacy > *, .method > * { max-width: var(--max); margin-inline: auto; }
  .returning { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: end; padding-inline: calc((100% - var(--max)) / 2 + var(--gutter)); max-width: none; }
  .returning .stack-actions { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .intro { padding-block: 112px; }
  .privacy { padding-block: 96px; }

  /* Result: editorial side panel + content */
  #screen-result:not([hidden]) {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    max-width: var(--max);
    margin: 0 auto;
    column-gap: 40px;
    padding: 0 var(--gutter);
  }
  .tabs {
    position: sticky;
    top: calc(var(--topbar) + 32px);
    align-self: start;
    background: none;
    backdrop-filter: none;
    border: 0;
    padding-top: 48px;
  }
  .tabs__track { flex-direction: column; padding: 0; gap: 0; overflow: visible; border-left: 1px solid var(--line); }
  .tab { text-align: left; padding: 0 18px; min-height: 46px; font-size: 0.95rem; }
  .tab[aria-selected='true']::after { left: -1px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .result { max-width: 860px; }
  .result .block, .result .r-hero { padding-inline: 0; }
  .result .rule { margin-inline: 0; }
  .band { margin-inline: 0; height: 200px; }
  .formula div { grid-template-columns: 160px 1fr; }
}

@media (hover: hover) {
  .choice:hover:not([aria-checked='true']):not([aria-pressed='true']) { border-color: var(--ink); }
  .chip:hover:not([aria-pressed='true']) { border-color: var(--ink); }
  .tab:hover { color: var(--ink); }
}