/* Community mobile hardening.
   Apply the mobile layout to every CommunityBankPanel entry point, including
   the global Community hub and the Community button inside a subject bank. */

@media (max-width: 767px) {
  /* CommunityBankPanel itself carries data-wol-i18n-ignore. This selector is
     stable for both entry points; do not depend on the optional subject picker. */
  [role="dialog"][data-wol-i18n-ignore="true"] {
    align-items: stretch;
    padding-top: max(0.35rem, env(safe-area-inset-top));
    padding-right: 0.35rem;
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
    padding-left: 0.35rem;
  }

  [role="dialog"][data-wol-i18n-ignore="true"] > div {
    max-height: calc(100dvh - 0.7rem) !important;
    border-radius: 1rem !important;
  }

  /* On mobile Community must be one normal scrolling flow. The desktop grid
     can otherwise shrink the result row and hide the card actions behind the
     publishing panel. */
  [role="dialog"][data-wol-i18n-ignore="true"] > div > div.grid {
    display: block !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  [role="dialog"][data-wol-i18n-ignore="true"] > div > div.grid > section,
  [role="dialog"][data-wol-i18n-ignore="true"] > div > div.grid > aside {
    width: 100% !important;
    min-height: auto !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }

  /* The global Community hub has an optional subject selector. Only that
     variant needs the two-row mobile header treatment. The subject-local panel
     keeps its simpler title + Close header. */
  [role="dialog"][data-wol-i18n-ignore="true"]:has([data-community-control="subject"]) > div > header {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.9rem !important;
  }

  [role="dialog"][data-wol-i18n-ignore="true"]:has([data-community-control="subject"]) > div > header > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }

  [role="dialog"][data-wol-i18n-ignore="true"]:has([data-community-control="subject"]) > div > header > div:first-child p {
    max-width: none;
  }

  [role="dialog"][data-wol-i18n-ignore="true"]:has([data-community-control="subject"]) > div > header > div:last-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    gap: 0.5rem !important;
  }

  [role="dialog"][data-wol-i18n-ignore="true"] [data-community-control="subject"] {
    width: 100%;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Result cards must fully contain their action row in every Community entry. */
  [role="dialog"][data-wol-i18n-ignore="true"]
    section .mt-4.space-y-3 > article {
    display: flow-root !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    contain: none !important;
  }

  [role="dialog"][data-wol-i18n-ignore="true"]
    section .mt-4.space-y-3 > article > div:last-child:has(> button) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem !important;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.75rem !important;
    position: static !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  [role="dialog"][data-wol-i18n-ignore="true"]
    section .mt-4.space-y-3 > article > div:last-child:has(> button) > button {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    white-space: normal;
    text-align: center;
    touch-action: manipulation;
  }

  /* With an odd number of actions, the final action uses a full-width row. */
  [role="dialog"][data-wol-i18n-ignore="true"]
    section .mt-4.space-y-3 > article > div:last-child:has(> button) > button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  [role="dialog"][data-wol-i18n-ignore="true"]
    section .mt-4.space-y-3 > article > div:last-child:has(> button) > button:disabled {
    visibility: visible !important;
  }

  [role="dialog"][data-wol-i18n-ignore="true"] aside {
    clear: both !important;
    z-index: auto !important;
  }
}