/* ==========================================================================
   Site layout tweaks (wuzheng.de5.net)

   Upstream MAZANOKE stacks the drop zone (a hardcoded 500px tall block) above
   the settings panel, so on 720p/768p laptops the settings sit below the fold
   and you cannot reach them without scrolling past a mostly empty box.

   Two changes, no markup edits:
   1. The drop zone height becomes viewport-aware instead of a fixed 500px.
   2. On wide screens, `.content` becomes a two-column grid: drop zone on the
      left, upload/settings column on the right. Both stay visible together.

   Loaded after style.css, so equal-specificity rules win by order.
   ========================================================================== */

/* ---------- 1. Fluid drop zone height ---------- */
.drop-zone {
  height: clamp(200px, calc(100vh - 190px), 500px);
}

@media (max-height: 800px) {
  .drop-zone {
    height: clamp(180px, calc(100vh - 170px), 380px);
    margin-top: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
  }

  .drop-zone-content__actions-title {
    font-size: 15px;
  }

  .drop-zone-content__actions-description {
    font-size: 12px;
  }
}

@media (max-height: 640px) {
  .drop-zone {
    height: clamp(150px, calc(100vh - 150px), 260px);
  }

  .drop-zone-content__actions-description {
    display: none;
  }
}

/* ---------- 2. Two-column layout on wide screens ---------- */
@media (min-width: 1000px) {
  /* Everything below the top nav lives in .content */
  .content {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
  }

  /* Drop zone: left column, row 1 */
  .drop-zone {
    grid-column: 1;
    grid-row: 1;
    margin-top: var(--space-lg, 24px);
    margin-bottom: var(--space-md, 16px);
    height: clamp(240px, calc(100vh - 220px), 520px);
    position: sticky;
    top: 16px;
  }

  /* Progress + result list: left column below the drop zone */
  .progress-container {
    grid-column: 1;
    grid-row: 2;
  }

  /* Settings column: right side, starts at the top */
  .image-subpage-container {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: var(--space-lg, 24px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* The settings/output tabs above the panels must also move right */
  #selectSettingsSubpage {
    grid-column: 2;
    grid-row: 1;
    margin-top: var(--space-lg, 24px);
  }

  /* Results grid still uses the full width when it has content */
  .image-output {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* Very wide screens: a bit more room for each side */
@media (min-width: 1400px) {
  .content {
    grid-template-columns: minmax(0, 1.25fr) minmax(400px, 0.75fr);
    column-gap: 32px;
  }
}

/* ---------- Small screens: keep the original single column ---------- */
@media (max-width: 640px) {
  .drop-zone {
    height: clamp(180px, calc(100vh - 230px), 320px);
  }
}

/* ---------- 3. Compact the settings column on wide screens ----------
   Upstream renders every option as a tall "card radio" (min-height 96px for
   the format cards, plus a description line under each). Inside a narrower
   right-hand column that becomes ~1900px of scrolling, so most options are
   still unreachable. These rules keep the same controls, only tighter. */
@media (min-width: 1000px) {
  /* Format / method cards: drop the fixed minimums and let them wrap tightly */
  #formatMethodGroup .button-card-radio {
    min-width: 0;
    min-height: 0;
    flex: 1 1 calc(50% - var(--space-xs));
    padding-top: var(--space-3xs, 4px);
    padding-bottom: var(--space-3xs, 4px);
  }

  .button-card-radio {
    min-width: 0;
    padding-top: var(--space-3xs, 4px);
    padding-bottom: var(--space-3xs, 4px);
  }

  /* The "• JPG, PNG, WebP, ICO -> Unchanged." helper lines are 2 extra rows */
  #formatMethodGroup .button-card-radio__description {
    display: none;
  }

  /* Long per-card blurbs only make sense in the wide stacked layout: keep them
     but cap to one line so a card never grows past ~3 rows. */
  .button-card-radio .button-card-radio__description-text {
    font-size: 11px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Radio icon + label on one compact row */
  #formatMethodGroup .button-card-radio__content {
    gap: 2px;
  }

  #formatMethodGroup .button-card-radio__label {
    font-size: var(--text-sm, 13px);
  }

  /* Tighten the vertical rhythm of the settings groups themselves */
  .image-subpage-container .form-group {
    margin-top: var(--space-2xs, 6px);
  }

  .image-subpage-title-container {
    padding-bottom: var(--space-2xs, 6px);
  }

  .image-subpage-title-description {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drop-zone {
    transition: none !important;
  }
}