/* UMA P26 — responsive hardening for custom enhancement layers.
   Mobile/tablet only. Loaded after all previous UMA patches. */

@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* All custom enhancement layers must stay inside the viewport. */
  .uma-ip-hero,
  .uma-ti-context-wrap,
  .uma-ti-context-card,
  #uma-pwa-install-card,
  html[data-uma-diagnostic-premium="1"] .uma-dx-grid,
  html[data-uma-diagnostic-premium="1"] .uma-dx-dimensions-card,
  html[data-uma-diagnostic-premium="1"] .uma-dx-context-card,
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Configuration / PWA card: tablet gets a real stacked composition. */
  .uma-appbox__grid {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .62fr) !important;
  }
  .uma-appbox__title { line-height: 1.12; }
  .uma-appbox__lead { line-height: 1.65; }

  /* Track context blocks should not inherit widths from desktop grids. */
  .uma-ti-context-card { grid-template-columns: 1fr !important; }
  .uma-ti-context-action { width: 100% !important; min-width: 0 !important; }
  .uma-ti-context-wrap--central .uma-ti-context-main { grid-template-columns: 1fr !important; }
  .uma-ti-context-wrap--central .uma-ti-context-metrics { margin-left: 55px; }

  /* Diagnóstico: explicit one-column composition on tablet. */
  html[data-uma-diagnostic-premium="1"] .uma-dx-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html[data-uma-diagnostic-premium="1"] .uma-dx-radar-svg {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: 190px;
  }
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-sources,
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-p18-host {
    width: 100% !important;
    max-width: none !important;
  }

  /* Insights: chart goes below copy, never squeezed beside it. */
  .uma-ip-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .uma-ip-chart-wrap { min-height: 270px; }
  .uma-ip-chart-caption { white-space: normal !important; text-align: center; justify-content: center; flex-wrap: wrap; width: 100%; }
}

@media (max-width: 820px) {
  /* PWA card: image over content is clearer on iPad portrait / large phones. */
  .uma-appbox__grid { display: flex !important; flex-direction: column-reverse !important; }
  .uma-appbox__visual,
  .uma-appbox__image { min-height: 220px !important; height: 220px !important; }
  .uma-appbox__visual { border-left: 0 !important; border-bottom: 1px solid rgba(103,232,249,.09); }
  .uma-appbox__content { padding: 24px 22px 23px !important; }
  .uma-appbox__install { grid-template-columns: 1fr !important; }

  /* Diagnóstico social cards remain 2-up on most phones/tablets. */
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-sources,
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-p18-host {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  /* Readable UI typography — no 8/9px informational text. */
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-label small,
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-p18-state,
  html[data-uma-diagnostic-premium="1"] .uma-dx-radar-tag,
  .uma-ti-context-eyebrow,
  .uma-ti-context-metrics small,
  .uma-ip-chart-caption,
  .uma-ip-metric-label {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 700px) {
  /* Track summary cards: editorial mobile composition. */
  .uma-ti-context-wrap { margin: 16px 0 20px !important; }
  .uma-ti-context-card,
  .uma-ti-context-wrap--central .uma-ti-context-card--inline {
    padding: 18px 16px !important;
    border-radius: 18px !important;
    gap: 16px !important;
  }
  .uma-ti-context-head { gap: 11px !important; }
  .uma-ti-context-icon { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
  .uma-ti-context-title { font-size: 15.5px !important; line-height: 1.35 !important; overflow-wrap: anywhere; }
  .uma-ti-context-sub,
  .uma-ti-context-reading { font-size: 13.5px !important; line-height: 1.65 !important; }
  .uma-ti-context-metrics,
  .uma-ti-context-wrap--central .uma-ti-context-metrics {
    margin: 14px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .uma-ti-context-metrics span {
    min-width: 0 !important;
    min-height: 39px;
    padding: 8px 9px !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  .uma-ti-context-metrics b { font-size: 12px !important; }
  .uma-ti-context-metrics small { font-size: 11px !important; }
  .uma-ti-context-action { min-height: 46px; font-size: 13.5px !important; padding: 12px 14px !important; }

  /* Diagnóstico rows: retain score/status without crushing the description. */
  html[data-uma-diagnostic-premium="1"] .uma-dx-row {
    min-height: 112px !important;
    padding: 15px 76px 15px 60px !important;
  }
  html[data-uma-diagnostic-premium="1"] .uma-dx-label { font-size: 14px !important; line-height: 1.3 !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-desc { font-size: 12.5px !important; line-height: 1.48 !important; max-width: 100% !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-score { font-size: 17px !important; right: 9px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-status { font-size: 10px !important; right: 9px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-summary { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-summary-item:first-child { grid-column: 1 / -1; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-summary-item span { font-size: 10.5px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-summary-item b { font-size: 13px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-context-stats { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-context-stats span { font-size: 9.5px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-context-stats strong { font-size: 11.5px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-radar-legend { grid-template-columns: 1fr 1fr !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-radar-legend span,
  html[data-uma-diagnostic-premium="1"] .uma-dx-radar-legend span b { font-size: 11px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-card h3 { font-size: 16px !important; line-height: 1.45 !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-card p { font-size: 13.5px !important; line-height: 1.6 !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-p18-name,
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-label b { font-size: 12px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-p18-state,
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-label small { font-size: 10.5px !important; }

  /* Insights mobile typography and spacing. */
  .uma-ip-hero { padding: 22px 17px !important; border-radius: 19px !important; }
  .uma-ip-title { font-size: clamp(29px, 8.2vw, 35px) !important; line-height: 1.08 !important; }
  .uma-ip-lead { font-size: 14.5px !important; line-height: 1.65 !important; }
  .uma-ip-producer strong { font-size: 14px !important; }
  .uma-ip-producer p { font-size: 13px !important; line-height: 1.55 !important; }
  .uma-ip-metrics { grid-template-columns: 1fr 1fr !important; }
  .uma-ip-metric { padding: 15px 10px !important; }
  .uma-ip-metric-label { font-size: 10.5px !important; }
  .uma-ip-metric-sub { font-size: 11.5px !important; white-space: normal !important; overflow: visible !important; }
  .uma-ip-chart-caption { position: static !important; transform: none !important; margin-top: 2px; font-size: 11px !important; }
  .uma-insights-artist-premium .uma-ip-insight-row { padding: 19px 7px 18px 17px !important; }
  .uma-insights-artist-premium .uma-ip-insight-row h3 { font-size: 15px !important; line-height: 1.4; }
  .uma-insights-artist-premium .uma-ip-insight-row p { font-size: 13.5px !important; line-height: 1.6; }
  .uma-insights-artist-premium .uma-ip-insight-row button { min-height: 40px; font-size: 12.5px !important; }
}

@media (max-width: 480px) {
  /* Narrow phones: simplify without shrinking text. */
  html[data-uma-diagnostic-premium="1"] .uma-dx-row {
    padding: 15px 67px 15px 57px !important;
  }
  html[data-uma-diagnostic-premium="1"] .uma-dx-icon { width: 37px !important; height: 37px !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-summary { grid-template-columns: 1fr !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-summary-item:first-child { grid-column: auto; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-context-stats { grid-template-columns: 1fr !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-radar-legend { grid-template-columns: 1fr !important; }
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-sources,
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-p18-host { grid-template-columns: 1fr 1fr !important; }
  .uma-ti-context-metrics,
  .uma-ti-context-wrap--central .uma-ti-context-metrics { grid-template-columns: 1fr 1fr !important; }
  .uma-appbox__content { padding: 21px 17px !important; }
  .uma-appbox__visual, .uma-appbox__image { height: 185px !important; min-height: 185px !important; }
}

@media (max-width: 350px) {
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-sources,
  html[data-uma-diagnostic-premium="1"] .uma-dx-social-p18-host,
  .uma-ti-context-metrics,
  .uma-ti-context-wrap--central .uma-ti-context-metrics { grid-template-columns: 1fr !important; }
}