/*
 * P3 mobile/tablet hardening (2026-10-20) -- campaigns, campaign detail, search, NGOs.
 * Same block lives in resources/css/pages/campaigns.css (source of truth, for the Tailwind build) and in
 * public/front/assets/css/v2-campaigns.css (linked by the five pages so it is live without a rebuild).
 */
/* category chips: 44px targets, edge-bleed horizontal scroller with snap on phones/tablets */
.dq-cp .dq-cp-chiprow { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.dq-cp .dq-cp-chiprow .chip { min-height: 44px; scroll-snap-align: start; }
@media (max-width: 1023.98px) {
  .dq-cp .dq-cp-chiprow { margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }
}
/* listing grids: never let a long word stretch a column; card media keeps a fixed ratio */
.dq-cp .dq-cp-grid > *, #v2Ngos #table_div > * { min-width: 0; }
.dq-cp .dq-cp-card-title, .dq-cp .v2n-title { overflow-wrap: anywhere; }
.dq-cp-pager { overflow-x: auto; }
@media (max-width: 479.98px) {
  .dq-cp .pagination .page-item .page-link { min-width: 44px; padding-inline: 8px; }
}
/* detail: media never taller than the viewport, update images keep a ratio instead of a fixed 200px box */
.dq-cp-stage { max-height: min(70vh, 560px); }
@media (min-width: 640px) and (max-width: 1023.98px) { .dq-cp-stage { aspect-ratio: 16 / 9; } }
.dq-cp-upd-img { height: auto; aspect-ratio: 16 / 9; max-width: min(100%, 460px); }
.dq-cp-prose, .dq-cp-upd-desc, .dq-cp-upd-title, .dq-cp-title { overflow-wrap: anywhere; }
.dq-cp-thumbs { overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.dq-cp-thumb { scroll-snap-align: start; }
/* donor / comment meta links: >=44px hit area without growing the visual row */
#v2Campaign .donor-list .info a { display: inline-flex; align-items: center; min-height: 44px; }
#v2Campaign .donor-list .info { row-gap: 0; }
/* iPad portrait (768-1023): stacked layout, but the donation card uses two columns so it is not a tall narrow strip */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .dq-cp-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .dq-cp-side > * { min-width: 0; }
  .dq-cp-side .dq-cp-side-top, .dq-cp-side > .progress { grid-column: 1; }
  .dq-cp-side .dq-cp-donors-block { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; border-top: 0; }
  .dq-cp-side .dq-cp-side-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dq-cp-hero-actions .dq-btn { flex: 1 1 240px; }
}
/* iPad landscape / small laptop (1024-1199): slimmer aside so the main column keeps a readable width */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .dq-cp-detail { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; }
}
/* very small phones (<=360): tighter chrome so nothing clips at 320 */
@media (max-width: 359.98px) {
  .dq-cp-h1 { font-size: 24px; }
  .dq-cp-title { font-size: 22px; }
  #v2Campaign .v2c-statstrip { margin-inline: 8px; padding: 12px; gap: 10px 12px; }
  #v2Campaign .v2c-statstrip .v2c-stat-value { font-size: 16px; overflow-wrap: anywhere; }
  .dq-cp-side { padding: 16px; }
  #v2Campaign .v2c-ring { height: 80px; width: 80px; }
  #v2Campaign .v2c-ring-inner { height: 64px; width: 64px; }
  .dq-cp-side-raised { font-size: 20px; }
  .dq-cp-amounts dd { font-size: 15px; }
  #v2Campaign .modal .modal-body, #v2Campaign .modal .modal-header { padding-inline: 16px; }
  #v2Ngos #table_div { gap: 10px; }
  #v2Ngos .v2n-card-name { font-size: 14px; padding-inline: 10px; }
}
/* modals on phones: never wider than the viewport, scroll inside, respect the notch */
@media (max-width: 575.98px) {
  #v2Campaign .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
  #v2Campaign .modal .modal-content { max-height: calc(100dvh - 16px); }
  #v2Campaign .modal .modal-body { overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  #v2Campaign .v2c-copyclip-btn { flex: 1 1 100%; }
}
/* NGO filter bar: 16px fields already; make the search/select/button stack with 44px+ targets on phones */
@media (max-width: 575.98px) { #v2Ngos .ngos-filterbar { padding: 10px; border-radius: 20px; } }
/* sticky donate bar: content never hides behind it (spacer) and it respects side safe-areas */
@media (max-width: 767.98px) {
  #v2Campaign .v2c-donate-box-mobile { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  #v2Campaign .v2c-bottom-spacer { height: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .dq-cp .dq-cp-chiprow, .dq-cp-thumbs { scroll-behavior: auto; }
}

/* Touch: the title link is the card's primary target (its ::after stretches over the whole card);
   give the link box itself a >=44px hit area without changing line layout (padding on an inline box). */
@media (pointer: coarse) {
  .dq-cp-card-title a { padding-block: 12px; }
}