/*
  Community portrait scaling module.
  Extracted from the former pages/70-community.css; keep after 72-community-smartphone.css.
*/

/* =========================================================
   P299 — Community portrait adaptation and global scaling
   ========================================================= */
body.page-community .communityShell.panel,
body.page-community #communityPage{
  --community-ui-scale-local: var(--community-ui-scale, 1);
}

/* Closed mobile layers must stay truly hidden in portrait/compact modes.
   The [hidden] attribute from HTML was getting overridden by later display:block rules
   for the backdrops, which created a constant dark film over the whole screen. */
.communityDrawerBackdrop[hidden],
.communityRosterBackdrop[hidden]{
  display:none !important;
}

@media (max-width: 1120px), (orientation: portrait) and (max-width: 1366px){
  .communityDrawerBackdrop,
  .communityRosterBackdrop{
    opacity:0;
    pointer-events:none;
  }
  .communityDrawerBackdrop:not([hidden]),
  .communityRosterBackdrop:not([hidden]){
    opacity:1;
    pointer-events:auto;
  }
  .communitySidebar,
  .communityRoster{
    visibility:hidden;
  }
  .communitySidebar.is-open,
  .communityRoster.is-open{
    visibility:visible;
  }
  .communityBoard{
    grid-column:1 / -1;
    width:100%;
    justify-self:stretch;
  }
}
body.page-community .communityShell.panel,
body.page-community .communityShell.panel .communityTopbar,
body.page-community .communityShell.panel .communitySidebar,
body.page-community .communityShell.panel .communityBoard,
body.page-community .communityShell.panel .communityRoster,
body.page-community .communityShell.panel .communityComposer,
body.page-community .communityShell.panel .communityHistory,
body.page-community .communityShell.panel .communityMessage,
body.page-community .communityShell.panel .communityChannel,
body.page-community .communityShell.panel .communityRosterCard,
body.page-community .communityShell.panel .communityUploadItem,
body.page-community .communityShell.panel .communityMediaCard,
body.page-community .communityShell.panel .communityEmbedCard,
body.page-community .communityShell.panel .communityLinkCard,
body.page-community .communityShell.panel .communitySearch,
body.page-community .communityShell.panel .communityComposer__input{
  transform-origin: top center;
}

@media (orientation: portrait) and (max-width: 1366px){
  body.page-community .communityShell.panel{
    gap:max(5px, calc(6px * var(--community-ui-scale-local)));
  }
  .communityWorkspace{
    gap:max(6px, calc(8px * var(--community-ui-scale-local)));
  }
  .communityTopbar{
    padding:max(6px, calc(6px * var(--community-ui-scale-local))) max(8px, calc(9px * var(--community-ui-scale-local)));
    border-radius:calc(12px * var(--community-ui-scale-local));
  }
  .communityTopbar__left,
  .communityTopbar__right,
  .communityBoard__topLeft,
  .communityBoard__topRight,
  .communityBoard__top,
  .communitySidebar__head,
  .communityRoster__head,
  .communityComposer__toolbar,
  .communityComposer__bottom{
    gap:max(6px, calc(7px * var(--community-ui-scale-local)));
  }
  .communitySidebar,
  .communityBoard,
  .communityRoster{
    padding:max(8px, calc(9px * var(--community-ui-scale-local)));
    border-radius:calc(15px * var(--community-ui-scale-local));
  }
  .communityComposer,
  .communityHistory,
  .communityMessage,
  .communityChannel,
  .communityRosterCard,
  .communityUploadItem,
  .communityMediaCard,
  .communityEmbedCard,
  .communityLinkCard,
  .communitySearch,
  .communityComposer__input{
    border-radius:calc(12px * var(--community-ui-scale-local));
  }
  .communityMiniProfile{
    grid-template-columns:calc(34px * var(--community-ui-scale-local)) minmax(0,1fr);
    gap:max(6px, calc(8px * var(--community-ui-scale-local)));
    padding:max(4px, calc(5px * var(--community-ui-scale-local))) max(8px, calc(9px * var(--community-ui-scale-local))) max(4px, calc(5px * var(--community-ui-scale-local))) max(4px, calc(5px * var(--community-ui-scale-local)));
  }
  .communityMiniProfile__avatar{
    width:calc(34px * var(--community-ui-scale-local));
    height:calc(34px * var(--community-ui-scale-local));
    border-radius:calc(10px * var(--community-ui-scale-local));
  }
  .communityMiniProfile__name,
  .communityMessage__name,
  .communityChannel__titleText,
  .communitySearch .input{
    font-size:clamp(12px, calc(13px * var(--community-ui-scale-local)), 14px);
  }
  .communityMiniProfile__meta,
  .communitySidebar__title,
  .communityRoster__title,
  .communitySidebar__hint,
  .communityRoster__hint,
  .communityBoard__eyebrow,
  .communityBoard__desc,
  .communityComposer__hint,
  .communityComposer__status,
  .communityComposer__counter,
  .communityRoster__count,
  .communityMessage__time,
  .communityMessage__edited,
  .communityMessage__deleted,
  .communityRosterCard__meta,
  .communityRosterBadge,
  .communityUnread,
  .communityChannel__count{
    font-size:clamp(10px, calc(11px * var(--community-ui-scale-local)), 12px);
  }
  .communityTopbar .btn,
  .communityTopbar__back,
  .communityBoard__channelsBtn,
  .communityBoard__rosterBtn,
  .communityComposer__toolbar .btn,
  .communityComposer__actions .btn,
  .communityMessage__actions .btn{
    min-height:calc(32px * var(--community-ui-scale-local));
    padding:0 max(8px, calc(10px * var(--community-ui-scale-local)));
    border-radius:calc(10px * var(--community-ui-scale-local));
    font-size:clamp(12px, calc(12px * var(--community-ui-scale-local)), 13px);
  }
  .communityBoard__title{
    font-size:clamp(16px, calc(18px * var(--community-ui-scale-local)), 18px);
    line-height:1.08;
  }
  .communityChannel{
    min-height:calc(40px * var(--community-ui-scale-local));
    padding:max(7px, calc(8px * var(--community-ui-scale-local))) max(8px, calc(10px * var(--community-ui-scale-local)));
  }
  .communityChannel__meta{
    gap:max(4px, calc(5px * var(--community-ui-scale-local)));
  }
  .communityChannel__count,
  .communityUnread,
  .communityRosterBadge{
    min-width:calc(18px * var(--community-ui-scale-local));
    height:calc(18px * var(--community-ui-scale-local));
    padding:0 max(5px, calc(6px * var(--community-ui-scale-local)));
  }
  .communityHistory{
    padding:max(5px, calc(6px * var(--community-ui-scale-local)));
  }
  .communityMessages,
  .communityChannels,
  .communityRoster__sections,
  .communityRosterSection__list,
  .communityComposerUploads__list,
  .communityMediaGrid{
    gap:max(6px, calc(7px * var(--community-ui-scale-local)));
  }
  .communityMessage{
    gap:max(6px, calc(8px * var(--community-ui-scale-local)));
    padding:max(8px, calc(8px * var(--community-ui-scale-local))) max(8px, calc(9px * var(--community-ui-scale-local)));
  }
  .communityMessage__avatar,
  .communityRosterCard__avatar{
    width:calc(30px * var(--community-ui-scale-local));
    height:calc(30px * var(--community-ui-scale-local));
    border-radius:calc(9px * var(--community-ui-scale-local));
  }
  .communityMessage__body{
    max-width:min(92%, 100%);
  }
  .communityMessage__reply{
    margin-top:max(5px, calc(6px * var(--community-ui-scale-local)));
    padding:max(5px, calc(6px * var(--community-ui-scale-local))) max(7px, calc(8px * var(--community-ui-scale-local)));
    border-radius:calc(9px * var(--community-ui-scale-local));
  }
  .communityMessage__text,
  .communityComposer__input{
    font-size:clamp(13px, calc(13px * var(--community-ui-scale-local)), 15px);
    line-height:1.42;
  }
  .communityComposer{
    padding:max(7px, calc(8px * var(--community-ui-scale-local)));
  }
  .communityComposer__toolbar,
  .communityComposer__bottom{
    margin-top:0;
  }
  .communityComposerUploads{
    margin-bottom:max(6px, calc(8px * var(--community-ui-scale-local)));
  }
  .communityUploadItem{
    min-width:min(220px, 100%);
    max-width:100%;
    padding:max(7px, calc(8px * var(--community-ui-scale-local)));
  }
  .communityUploadItem__thumb{
    width:calc(40px * var(--community-ui-scale-local));
    height:calc(40px * var(--community-ui-scale-local));
  }
  .communityComposer__input{
    min-height:calc(68px * var(--community-ui-scale-local));
    max-height:calc(138px * var(--community-ui-scale-local));
  }
  .communityComposer__context{
    padding:max(7px, calc(8px * var(--community-ui-scale-local))) max(8px, calc(9px * var(--community-ui-scale-local)));
  }
  .communityRosterCard{
    grid-template-columns:calc(30px * var(--community-ui-scale-local)) minmax(0,1fr) auto;
    gap:max(6px, calc(7px * var(--community-ui-scale-local)));
    padding:max(7px, calc(7px * var(--community-ui-scale-local)));
  }
  .communityMediaGrid.is-single{
    grid-template-columns:minmax(0, 1fr);
  }
}

@media (orientation: portrait) and (max-width: 1366px){
  html.page-community,
  html.page-community body,
  body.page-community,
  body.page-community main.wrap--community,
  body.page-community .communityShell.panel{
    min-height:var(--community-vh, 100dvh);
    height:var(--community-vh, 100dvh);
  }
  body.page-community .communityShell.panel{
    overflow:hidden;
  }
  .communityWorkspace{
    grid-template-columns:1fr;
    grid-template-areas:none;
  }
  .communitySidebar{
    position:fixed;
    inset:max(8px, calc(var(--safe-top) + 8px)) auto max(8px, calc(var(--safe-bottom) + 8px)) max(8px, calc(var(--safe-left) + 8px));
    width:min(360px, calc(100vw - var(--safe-left) - var(--safe-right) - 16px));
    max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 16px);
    max-height:calc(var(--community-vh, 100dvh) - var(--safe-top) - var(--safe-bottom) - 16px);
    z-index:40;
    transform:translateX(calc(-100% - 18px));
    transition:transform .18s ease, opacity .18s ease;
    opacity:0;
  }
  .communitySidebar.is-open{
    transform:translateX(0);
    opacity:1;
  }
  .communityDrawerBackdrop{
    position:fixed;
    inset:0;
    z-index:35;
    display:block;
    background:rgba(2,5,9,.62);
    border:none;
    padding:0;
    cursor:pointer;
  }
  .communityRoster{
    position:fixed;
    left:max(8px, calc(var(--safe-left) + 8px));
    right:max(8px, calc(var(--safe-right) + 8px));
    bottom:max(8px, calc(var(--safe-bottom) + 8px));
    max-height:min(72vh, calc(var(--community-vh, 100dvh) - var(--safe-top) - var(--safe-bottom) - 112px));
    z-index:42;
    transform:translateY(calc(100% + 18px));
    transition:transform .18s ease, opacity .18s ease;
    opacity:0;
    pointer-events:none;
  }
  .communityRoster.is-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .communityRosterBackdrop{
    position:fixed;
    inset:0;
    z-index:41;
    display:block;
    background:rgba(2,5,9,.62);
    border:none;
    padding:0;
    cursor:pointer;
  }
  .communityBoard__rosterBtn,
  .communityRoster__close,
  .communitySidebar__close,
  .communityBoard__channelsBtn{
    display:inline-flex;
  }
  .communityBoard{
    min-height:0;
    height:100%;
    max-height:100%;
  }
}

@media (orientation: portrait) and (min-width: 721px) and (max-width: 1366px){
  .communityTopbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:8px;
  }
  .communityTopbar__left,
  .communityTopbar__right{
    width:100%;
    min-width:0;
  }
  .communityTopbar__right{
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .communityBoard__top{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .communityBoard__meta{
    display:none;
  }
  .communityBoard__rosterBtn{
    min-width:120px;
    justify-content:center;
  }
  .communityMediaGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (orientation: portrait) and (max-width: 560px){
  body.page-community .communityShell.panel{
    padding-top:max(5px, calc(var(--safe-top) + 4px));
    padding-right:max(5px, calc(var(--safe-right) + 4px));
    padding-bottom:max(5px, calc(var(--safe-bottom) + 4px));
    padding-left:max(5px, calc(var(--safe-left) + 4px));
  }
  .communityTopbar{
    display:grid;
    grid-template-columns:1fr;
  }
  .communityTopbar__right,
  .communityTopbar__right .btn,
  .communityBoard__rosterBtn,
  .communityBoard__channelsBtn{
    width:100%;
    justify-content:center;
  }
}