/* Explore SEQ community (pack 3): Community, Local events, Groups, group and outing pages, Feature your business, the My SEQ tab and the home
   page photo band. Loaded only while the community switch is On (or Preview with the preview link). Big Sky look: the site's tokens and
   component classes (btn, es-chip, es-link, es-pagehero); everything of its own is es-comm-*. */

.es-comm-section { padding: 48px 0 104px; }
.es-comm { max-width: 100%; padding: 48px 0 104px; }
.es-comm-lock { overflow: hidden; }

/* ------------------------------------------------------------ action buttons (same-height row) */
.es-comm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.es-comm-actions .btn { height: 54px; padding: 0 24px; }
.es-comm [hidden], .es-comm-modal [hidden] { display: none !important; }
.es-comm-detail > p:has(> .btn) { margin: 0 0 14px; }
.es-comm-small { margin: 4px 0 36px; font: 500 15px/1.5 var(--font-body); color: var(--muted); }
.es-comm-small a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.es-comm-chips { margin: 22px 0 0; }
.es-comm-chips + .es-comm-chips, .es-comm-chips + .es-comm-grid { margin-top: 12px; }
.es-comm-chips + .es-comm-grid { margin-top: 28px; }

/* ------------------------------------------------------------ sections */
.es-comm-sec { margin: 44px 0 0; }
.es-comm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 22px; }
.es-comm .es-comm-head h2 { margin: 0; font: 700 clamp(26px, 3vw, 36px)/1.1 var(--font-heading); letter-spacing: -.03em; }
.es-comm-head .es-link { white-space: nowrap; padding-bottom: 4px; }
.es-comm-how { margin: 52px 0 0; max-width: 46em; font: 500 15.5px/1.55 var(--font-body); color: var(--muted); }
.es-comm-how a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.es-comm-empty { margin: 28px 0; font: 500 17px/1.55 var(--font-body); color: var(--muted); max-width: 40em; }

/* ------------------------------------------------------------ cards: every row runs the full width of the page; cards in a row share one height */
.es-comm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.es-comm-grid:has(> :only-child) { grid-template-columns: minmax(260px, 440px); }
.es-comm-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-md); box-shadow: 0 1px 0 rgba(18, 34, 44, .04), 0 22px 40px -30px rgba(18, 34, 44, .4); overflow: hidden; min-width: 0; }
.es-comm-card[hidden] { display: none; }
.es-comm-card__a { display: flex; flex: 1; gap: 16px; align-items: flex-start; height: 100%; padding: 22px; box-sizing: border-box; color: inherit; text-decoration: none; transition: background .2s; }
.es-comm-card__a:hover { background: var(--alt); }
.es-comm-card--group .es-comm-card__a { display: block; }
.es-comm-card--event { padding: 0; }
.es-comm-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.es-comm-card__row { display: flex; flex: 1; gap: 16px; align-items: flex-start; padding: 22px; }
.es-comm-card__t { min-width: 0; flex: 1; }
.es-comm .es-comm-card__t h3 { margin: 0 0 8px; font: 700 21px/1.15 var(--font-heading); letter-spacing: -.025em; overflow-wrap: anywhere; }
.es-comm-card__t p { margin: 0 0 6px; font: 500 15.5px/1.45 var(--font-body); color: var(--muted); overflow-wrap: anywhere; }
.es-comm-card__t p.es-comm-tag, .es-comm-tag { margin: 0 0 8px; font: 700 12px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.es-comm-by { color: var(--text) !important; font-weight: 600 !important; }
.es-comm-next { color: var(--action) !important; font-weight: 600 !important; margin-top: 10px !important; }
.es-comm-desc { color: var(--text); }
.es-comm-card__t .es-comm-desc { color: var(--muted); }
.es-comm-report { margin: 6px 0 0 !important; }
.es-comm-date { flex: none; display: grid; justify-items: center; gap: 1px; min-width: 58px; padding: 9px 10px 8px; background: var(--alt); border-radius: 14px; }
.es-comm-date span { font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.es-comm-date b { font: 700 27px/1 var(--font-heading); letter-spacing: -.03em; color: var(--text); }

/* ------------------------------------------------------------ visitor photos, reviews, conditions */
.es-comm-potw { margin: 0 0 20px; position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--ink); }
.es-comm-potw img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
/* Photo of the week beside the latest photos (above them on a narrow screen): the big one fills the height of the small ones, so no empty corner */
.es-comm-visitors--both { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.es-comm-visitors--both .es-comm-potw { margin: 0; min-height: 300px; }
.es-comm-visitors--both .es-comm-potw img { position: absolute; inset: 0; height: 100%; max-height: none; }
.es-comm-visitors--both .es-comm-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-content: stretch; }
.es-comm-visitors--both .es-comm-ph { display: flex; flex-direction: column; }
.es-comm-visitors--both .es-comm-ph > a, .es-comm-visitors--both .es-comm-ph > img { flex: 1; min-height: 0; display: block; }
.es-comm-visitors--both .es-comm-ph img { height: 100%; aspect-ratio: auto; }
.es-comm-visitors--both .es-comm-ph figcaption { display: none; }
.es-comm-potw figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 38px 20px 16px; background: linear-gradient(transparent, rgba(11, 27, 38, .78)); color: #fff; font: 500 15.5px/1.35 var(--font-body); }
.es-comm-potw figcaption b { font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.es-comm-potw figcaption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.es-comm-potw figcaption span { opacity: .8; }
.es-comm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.es-comm-ph { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.es-comm-ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.es-comm-ph figcaption { padding: 8px 12px 10px; font: 500 13.5px/1.35 var(--font-body); color: var(--muted); }
.es-comm-ph figcaption span { display: block; }
.es-comm-ph a { color: inherit; }
.es-comm-rev { background: #fff; border-radius: var(--radius-md); padding: 20px 22px; box-shadow: 0 1px 0 rgba(18, 34, 44, .04), 0 22px 40px -30px rgba(18, 34, 44, .4); }
.es-comm-rev p { margin: 0 0 8px; font: 500 16px/1.5 var(--font-body); overflow-wrap: anywhere; }
.es-comm-rev p.es-comm-by { font-size: 14.5px; margin: 0; }
.es-comm-rev a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.es-comm-cond { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.es-comm-cond li { background: #fff; border-radius: var(--radius-sm); padding: 14px 18px; font: 500 16px/1.4 var(--font-body); box-shadow: inset 0 0 0 1.5px var(--line); }
.es-comm-cond a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ group and outing pages */
.es-comm-detail { max-width: 760px; }
.es-comm-desc--lg { font: 500 19px/1.6 var(--font-body); margin: 0 0 22px; overflow-wrap: anywhere; }
.es-comm-facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px 18px; margin: 0 0 26px; padding: 22px; background: #fff; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--line); }
.es-comm-facts dt { font: 700 13px/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.es-comm-facts dd { margin: 0; font: 500 17px/1.5 var(--font-body); overflow-wrap: anywhere; }
.es-comm-facts a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.es-comm-note { margin: 0 0 18px; padding: 12px 16px; background: var(--alt-2); border-radius: var(--radius-sm); font: 600 15.5px/1.4 var(--font-body); }
.es-comm-safety { margin: 26px 0 0; }
.es-comm-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; background: rgba(11, 27, 38, .12); font: 700 14px/1 var(--font-body); }
.es-comm-actions .btn.is-on { background: var(--ink); color: #fff; }
.es-comm-actions .btn.is-on .es-comm-count { background: rgba(255, 255, 255, .2); }
.es-comm-detail > .btn { margin: 0 0 18px; }
.es-comm-detail p.es-comm-count { margin: 4px 0 0; font: 500 13px/1.3 var(--font-body); color: var(--muted); display: block; background: none; padding: 0; height: auto; }

/* ------------------------------------------------------------ forms (inside the account dialogs' look) */
.es-comm-form textarea { width: 100%; padding: 14px 16px; font: 500 16px/1.45 var(--font-body); color: var(--text); background: #fff; border: 1px solid var(--line-2); border-radius: 14px; box-sizing: border-box; resize: vertical; min-height: 110px; }
.es-comm-form textarea:focus-visible, .es-comm-form input[type="file"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }
.es-comm-form input[type="time"], .es-comm-form input[type="date"] { width: 100%; height: 54px; padding: 0 16px; font: 500 16px/1.2 var(--font-body); color: var(--text); background: #fff; border: 1px solid var(--line-2); border-radius: 14px; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.es-comm-form input[type="file"] { width: 100%; font: 500 15px/1.4 var(--font-body); }
.es-comm-form p.es-comm-count { margin: 6px 0 0; font: 500 13px/1.3 var(--font-body); color: var(--muted); display: block; background: none; padding: 0; height: auto; min-width: 0; }
.es-acct-form .es-comm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.es-comm-place .es-comm-picked { margin: 12px 0 0; font: 500 16px/1.4 var(--font-body); }
.es-comm-place .es-comm-picked[hidden] { display: none; }
.es-comm-picks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.es-comm-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 48px; padding: 10px 14px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; font: 500 15px/1.3 var(--font-body); color: var(--text); text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.es-comm-pick:hover { border-color: var(--ink); }
.es-comm-pick span { font-size: 13.5px; color: var(--muted); }
.es-comm-modal .es-acct-lead { margin-bottom: 14px; }
.es-comm-modal .btn[data-comm-done] { width: 100%; margin-top: 8px; }

/* ------------------------------------------------------------ My SEQ tab */
.es-comm-mine { margin: 0 0 30px; }
.es-comm-mine__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.es-comm-mine .es-comm-mine__head h3 { margin: 0; font: 700 22px/1.1 var(--font-heading); letter-spacing: -.02em; }
.es-comm-mine__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.es-comm-mine__list li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 14px 18px; background: #fff; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1.5px var(--line); }
.es-comm-mine__list small { color: var(--muted); font: 500 14px/1.4 var(--font-body); }
.es-comm-mine__list a { color: inherit; }
.es-comm-mine__act { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.es-comm-status { display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 99px; background: var(--alt); font: 700 12px/1.4 var(--font-body); color: var(--accent-ink); vertical-align: middle; }

/* ------------------------------------------------------------ the home page band */
.es-potw-band { background: var(--alt); padding: 18px 0; }
.es-potw-band__a { display: flex; align-items: center; gap: 18px; color: inherit; text-decoration: none; }
.es-potw-band__a img { flex: none; width: 96px; height: 72px; object-fit: cover; border-radius: 12px; }
.es-potw-band__t { flex: 1; min-width: 0; display: grid; gap: 2px; font: 500 15.5px/1.35 var(--font-body); color: var(--muted); }
.es-potw-band__t b { font: 700 18px/1.2 var(--font-heading); letter-spacing: -.02em; color: var(--text); }
.es-potw-band__a .es-link { flex: none; }

@media (max-width: 960px) {
  .es-comm-visitors--both { grid-template-columns: minmax(0, 1fr); }
  .es-comm-visitors--both .es-comm-potw { min-height: 0; }
  .es-comm-visitors--both .es-comm-potw img { position: static; height: auto; max-height: 420px; }
  .es-comm-visitors--both .es-comm-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: auto; }
  .es-comm-visitors--both .es-comm-ph img { height: auto; aspect-ratio: 4 / 3; }
  .es-comm-visitors--both .es-comm-ph figcaption { display: block; }
}

@media (max-width: 640px) {
  .es-comm { padding: 28px 0 72px; }
  .es-comm-actions { gap: 10px; }
  .es-comm-actions .btn { flex: 1 1 100%; width: 100%; }
  .es-comm-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .es-comm-grid { grid-template-columns: minmax(0, 1fr); }
  .es-comm-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-comm-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 18px; }
  .es-comm-facts dd { margin-bottom: 12px; }
  .es-comm-sec { margin-top: 36px; }
  .es-comm-card__a { padding: 18px; }
  .es-comm-card__row { padding: 18px; }
  .es-potw-band__a { flex-wrap: wrap; gap: 12px; }
  .es-potw-band__a img { width: 80px; height: 60px; }
  .es-potw-band__a .es-link { flex-basis: 100%; }
  .es-acct-form .es-comm-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ------------------------------------------------------------ round 6: host updates, the follow switch, How outings work, My SEQ updates */
.es-comm .es-comm-updates { margin: 0 0 22px; padding: 18px 20px; background: var(--alt-2); border-radius: var(--radius-md); }
.es-comm .es-comm-updates h2 { margin: 0 0 10px; font: 700 18px/1.2 var(--font-heading); letter-spacing: -.02em; }
.es-comm-updates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.es-comm-updates li p { margin: 0; font: 500 16.5px/1.5 var(--font-body); overflow-wrap: anywhere; }
.es-comm-updates li b { font-weight: 700; }
.es-comm-follow { margin: 4px 0 18px; }
.es-comm-follow .es-acct-tick { margin: 0; }
.es-comm-follow .es-comm-follow__msg { margin: 6px 0 0; min-height: 0; }
.es-comm-follow .es-comm-follow__msg:empty { display: none; }
.es-comm-prose h2 { margin: 40px 0 12px; font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--font-heading); letter-spacing: -.025em; }
.es-comm-prose h2:first-child { margin-top: 0; }
.es-comm-prose ul { margin: 0 0 8px; padding: 0 0 0 1.2em; display: grid; gap: 9px; }
.es-comm-prose li, .es-comm-prose p { font: 500 17px/1.55 var(--font-body); }
.es-comm-prose p { margin: 0 0 12px; }
.es-comm-prose a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.es-comm-prose p.es-comm-actions { margin: 34px 0 0; }
.es-comm-mine__ups { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.es-comm-mine__list .es-comm-mine__ups li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: space-between; padding: 8px 0 0; background: none; border-radius: 0; border-top: 1px solid var(--line); font: 500 14.5px/1.4 var(--font-body); }
.es-comm-mine__ups span { min-width: 0; overflow-wrap: anywhere; }
.es-comm-safety a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.es-comm-prose a.btn { color: #fff; text-decoration: none; }