/* JobDrop's shared layout finish: clearer rhythm, aligned surfaces and safer small-screen flow. */
:root {
  --jd-content-max: 1380px;
  --jd-radius-card: 18px;
  --jd-radius-panel: 22px;
  --jd-shadow-card: 0 8px 24px -20px rgb(22 33 58 / 30%);
  --jd-shadow-float: 0 18px 42px -30px rgb(22 33 58 / 32%);
  --jd-space-section: clamp(22px, 3vw, 38px);
}

html { scroll-behavior: smooth; overflow-x: clip; }
body { min-width: 320px; overflow-x: clip; }
main#app { min-height: 52vh; overflow-x: clip; min-width: 0; }
#app :is(.wrap, .pagehead, .slimhead, .filters, .chips, .plgrid, .tgrid,
         .carergrid, .trgrid, .regrid, .sxlist, .mpgrid, .adult-grid,
         .adult-venue-grid, .jd-rail, .jd-category-row) { min-width: 0; }
#app :is(.plgrid, .tgrid, .carergrid, .trgrid, .regrid, .sxlist, .mpgrid,
         .adult-grid, .adult-venue-grid, .jd-category-row) > * { min-width: 0; }
#app > :is(.wrap, section.block) { width: 100%; }
#app > .wrap { max-width: var(--jd-content-max); }
#app .wrap > .wrap { width: 100%; }

/* Give every route the same heading cadence while keeping its own art direction. */
#app :is(.pagehead, .slimhead) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
}
#app :is(.pagehead, .slimhead) > :first-child { min-width: 0; }
#app :is(.pagehead, .slimhead) :is(h1, h2) { text-wrap: balance; }
#app :is(.pagehead, .slimhead) :is(p, .hint) { max-width: 76ch; line-height: 1.55; }
#app :is(.pagehead, .slimhead) :is(.actions, .page-actions, .btns) { display: flex; flex-wrap: wrap; gap: 8px; }
#app section.block { padding-block: var(--jd-space-section); }
#app section.block > .wrap > :is(h2, h3) { text-wrap: balance; }
#app :is(.lede, .hint, .empty, .notice, .task h3, .tcard h3, .plcard h3) { overflow-wrap: anywhere; }

/* Dense discovery controls stay grouped, readable and scrollable when a row is too wide. */
#app :is(.filters, .chips, .plsugg, .trtabs2, .sh-nav, .mpbar, .adult-venue-tools) {
  min-width: 0;
}
#app :is(.chips, .plsugg, .trtabs2, .sh-nav) > * { flex: 0 0 auto; }
#app :is(input, select, textarea) { max-width: 100%; }
#app :is(.mpfilt, .plsearch) :is(input, select) { min-width: 0; }

/* Common result types share calm borders and a restrained lift on pointer devices. */
#app :is(.task, .tcard, .plcard, .recard, .mpcard, .trcard, .hbresult,
         .prcategory, .adult-card, .sector-hub .sh-panel, .bc-card, .comm-card) {
  border-radius: var(--jd-radius-card);
}
#app :is(.task, .tcard, .plcard, .recard, .mpcard, .trcard, .hbresult,
         .prcategory, .adult-card, .bc-card, .comm-card) {
  box-shadow: var(--jd-shadow-card);
}
#app :is(.task, .tcard, .plcard, .recard, .mpcard, .trcard, .hbresult,
         .prcategory, .adult-card, .bc-card, .comm-card) {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#app :is(.task, .tcard, .plcard, .recard, .mpcard, .trcard, .hbresult,
         .prcategory, .adult-card, .bc-card, .comm-card):focus-within {
  border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 10%, transparent), var(--jd-shadow-card);
}
#app :is(.task, .tcard, .plcard, .recard, .mpcard, .trcard, .hbresult,
         .prcategory, .adult-card, .bc-card, .comm-card) img { max-width: 100%; }

/* Forms and key actions feel consistent without changing their individual meaning. */
#app :is(.btn, button.chip, .chip, .prrow) { touch-action: manipulation; }
#app :is(.btn, .chip) { line-height: 1.25; }
#app :is(.filters, .plsearch, .trbar, .hbform, .reform, .mpfilters) { border-radius: var(--jd-radius-panel); }
#app :is(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }

body > footer.foot-site {
  margin-top: clamp(24px, 4vw, 52px);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 68%, var(--bg));
}
body > footer.foot-site > .wrap { max-width: var(--jd-content-max); }
body > footer.foot-site .footcols > div { min-width: 0; }
body > footer.foot-site a { text-underline-offset: 3px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app :is(.task, .tcard, .plcard, .recard, .mpcard, .trcard, .hbresult,
           .prcategory, .adult-card, .bc-card, .comm-card):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--teal) 32%, var(--line));
    box-shadow: var(--jd-shadow-float);
  }
}

@media (max-width: 760px) {
  :root { --jd-space-section: 22px; }
  main#app { min-height: 48vh; }
  #app > .wrap { padding-inline: var(--site-gutter, 16px); }
  #app :is(.pagehead, .slimhead) { align-items: flex-start; }
  #app :is(.pagehead, .slimhead) :is(h1, h2) { line-height: 1.14; }
  #app :is(.pagehead, .slimhead) :is(.actions, .page-actions, .btns) { width: 100%; }
  #app :is(.pagehead, .slimhead) :is(.actions, .page-actions, .btns) > .btn { flex: 1 1 auto; }
  #app :is(.chips, .plsugg, .trtabs2, .sh-nav) {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
  }
  #app :is(.chips, .plsugg, .trtabs2, .sh-nav) > * { flex: 0 0 auto; }
  #app > .wrap > .filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  #app > .wrap > .filters #q { grid-column: 1 / -1; width: 100%; min-width: 0; }
  #app > .wrap > .filters :is(#sort, #stat) { width: 100%; min-width: 0; }
  #app > .wrap > .filters :is([data-pickloc], [data-savealert]) { width: 100%; }
  #app .browse { display: flex; flex-direction: column; }
  #app .browse .list { order: 0; }
  #app .browse .mapcard { order: 1; width: 100%; }
  #app .browse #map { height: 220px; }
  #app :is(.filters, .mpfilt) :is(input, select) { min-height: 44px; font-size: 16px; }
  #app :is(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) {
    font-size: 16px;
  }
  #app :is(.task, .tcard, .plcard, .recard, .mpcard, .trcard, .hbresult,
           .prcategory, .adult-card, .bc-card, .comm-card):hover { transform: none; }
  .tabbar { padding-top: 4px; box-shadow: 0 -8px 24px rgb(22 33 58 / 8%); }
  body > footer.foot-site { margin-top: 24px; padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #app :is(.task, .tcard, .plcard, .recard, .mpcard, .trcard, .hbresult,
           .prcategory, .adult-card, .bc-card, .comm-card) { transition: none; }
}