/**
 * Conceptobg — Peter McKinnon / Squarespace gallery aesthetic
 * Homepage feed only. Modal, closeup, JS behaviour unchanged.
 * Reference: https://www.petermckinnon.com/portraits
 */

/* ========================  PM tokens  ======================== */
:root {
  --pm-bg:           #ffffff;
  --pm-ink:          #111111;
  --pm-muted:        #767676;
  --pm-line:         rgba(0, 0, 0, 0.08);
  --pm-gap:          11px;
  --pm-mobile-gap:   8px;
  --pm-mobile-pad:   0px;
  --pm-radius:       0px;
  --mobile-pin-height-boost: 1.62;
  --pm-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pm-display:      "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[data-theme="dark"] {
  --pm-bg:           #0a0a0a;
  --pm-ink:          #f5f5f5;
  --pm-muted:        #9a9a9a;
  --pm-line:         rgba(255, 255, 255, 0.1);
}


/* ========================  Page shell  ======================== */
body:not(.pin-detail-open):not(.pin-modal-open) {
  background: var(--pm-bg) !important;
  color: var(--pm-ink);
  font-family: var(--pm-font);
}

body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-container {
  background: var(--pm-bg) !important;
  padding-left: clamp(12px, 2vw, 28px) !important;
  padding-right: clamp(12px, 2vw, 28px) !important;
  padding-top: 0 !important;
}

body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid-column {
  max-width: none;
  margin: 0;
}


/* ========================  Hero — compact under header  ======================== */
.pm-gallery-hero {
  text-align: center;
  padding: 12px 12px 8px;
  background: var(--pm-bg);
}

.pm-gallery-logo {
  display: inline-block;
  margin: 0 0 6px;
  font-family: var(--pm-display);
  font-size: clamp(0.75rem, 1.6vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pm-ink);
  transition: opacity 0.2s ease;
}

.pm-gallery-logo:hover {
  opacity: 0.65;
}

.pm-gallery-kicker {
  margin: 0;
  font-family: var(--pm-font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pm-muted);
}

body.pin-detail-open .pm-gallery-hero {
  display: none;
}


/* ========================  PM feed mode — full-width, hide Pinterest chrome  ======================== */
@media (min-width: 769px) {
  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) .pinterest-rail,
  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) header.desktop-header.pinterest-topbar {
    display: none !important;
  }

  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) {
    margin-left: 0 !important;
    padding-top: 0 !important;
    --header-h: 0px;
    --content-below-header: 0px;
  }

  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) .pinterest-container,
  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) .pinterest-grid-column {
    margin-left: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* PM feed — без Pinterest хедър за гости; админ запазва минимален бар */
  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) .mobile-mini-header {
    display: none !important;
  }

  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) {
    padding-top: 0 !important;
  }

  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) .guest-welcome-strip,
  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) .theme-toggle {
    display: none !important;
  }

  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open) .pinterest-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .mobile-mini-header {
    background: var(--pm-bg) !important;
    border-bottom: 1px solid var(--pm-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: max(12px, env(safe-area-inset-top));
  }

  body.pm-feed-mode.is-admin:not(.pin-detail-open):not(.pin-modal-open) .mobile-mini-header .mobile-logo {
    font-family: var(--pm-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--pm-ink) !important;
  }

  .pm-gallery-hero {
    padding: max(10px, calc(env(safe-area-inset-top) + 6px)) 12px 6px;
  }

  body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open):not(.is-admin) .pm-gallery-hero {
    padding-top: max(14px, calc(env(safe-area-inset-top) + 8px));
  }

  .pm-gallery-logo {
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    margin-bottom: 4px;
  }

  .pm-gallery-kicker {
    margin-bottom: 0;
    font-size: 9px;
  }
}
/* ========================  Chrome — minimal B&W (desktop)  ======================== */
@media (min-width: 769px) {
  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-rail {
    background: var(--pm-bg) !important;
    border-right: 1px solid var(--pm-line) !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .rail-logo-mark {
    background: var(--pm-ink) !important;
    border-radius: 0 !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .rail-item {
    color: var(--pm-muted) !important;
    border-radius: 0 !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .rail-item:hover,
  body:not(.pin-detail-open):not(.pin-modal-open) .rail-item.is-active {
    color: var(--pm-ink) !important;
    background: transparent !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) header.desktop-header.pinterest-topbar {
    background: var(--pm-bg) !important;
    border-bottom: 1px solid var(--pm-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-header-search {
    background: var(--pm-bg) !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-topbar-login:not(.is-admin) {
    background: var(--pm-ink) !important;
    color: var(--pm-bg) !important;
    border-radius: 0 !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-guest-hint {
    color: var(--pm-muted) !important;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
}


/* ========================  Masonry grid — PM flat gallery  ======================== */
body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid-flow {
  padding-top: 0;
}

body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid-flow > #pinterest-grid,
body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid.pinterest-grid--mobile-cols {
  column-gap: var(--pin-col-gap, var(--pm-gap)) !important;
  padding: 4px 0 80px !important;
}

body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid-flow > #pinterest-grid,
body.pm-feed-mode:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid.pinterest-grid--mobile-cols {
  column-gap: var(--pin-col-gap, var(--pm-gap)) !important;
  padding: 4px 0 80px !important;
}

body.pm-feed-mode.has-desktop-topbar.is-admin:not(.pin-detail-open) {
  scroll-padding-top: var(--content-below-header, 64px);
}

body.pm-feed-mode.pin-detail-open.is-admin .pinterest-grid-flow.has-closeup {
  padding-top: 8px;
}

/* Masonry grid — PM flat gallery (all feed pins) */
body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid:not(.pinterest-grid-aside) .pin,
body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin,
body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid.pinterest-grid--mobile-cols .pin-masonry-col .pin {
  background: transparent !important;
  border: none !important;
  border-radius: var(--pm-radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin-bottom: var(--pin-row-gap, var(--pm-gap)) !important;
  overflow: hidden;
  transform: none !important;
  transition: opacity 0.25s ease !important;
  cursor: pointer;
}

body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid:not(.pinterest-grid-aside) .pin:hover,
body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin:hover,
body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid.pinterest-grid--mobile-cols .pin:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 0.88;
}

body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin:active {
  opacity: 0.78;
}

/* Images fill cell — sharp edges like Squarespace gallery */
body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin > img,
body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin .pin-image-wrap > img,
body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid.pinterest-grid--mobile-cols .pin > img,
body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid.pinterest-grid--mobile-cols .pin .pin-image-wrap > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* „View fullsize“ feel — title only on hover, minimal */
body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid .pin-title-text {
  font-family: var(--pm-font) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: #fff !important;
  text-shadow: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0;
  transition: opacity 0.2s ease !important;
}

body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin:hover .pin-title-text {
  opacity: 1;
}

body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin:hover::after {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin:hover::after {
  background: rgba(255, 255, 255, 0.06);
}


/* ========================  Mobile — 2-col PM masonry  ======================== */
@media (max-width: 768px) {
  body:not(.pin-detail-open):not(.pin-modal-open) {
    --pm-mobile-gap: var(--ph-mobile-gap, 8px);
    --mobile-pin-height-boost: 1.62;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid-flow {
    padding-top: 0;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid-flow > #pinterest-grid,
  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid.pinterest-grid--mobile-cols {
    padding: 0 0 72px !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid {
    column-gap: var(--ph-mobile-gap, var(--pm-mobile-gap)) !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid .pin {
    margin-bottom: var(--ph-mobile-gap, var(--pm-mobile-gap)) !important;
    border-radius: 0 !important;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pin-masonry-row--mobile {
    gap: var(--ph-mobile-gap, var(--pm-mobile-gap)) !important;
    padding: 0 var(--ph-mobile-gap, var(--pm-mobile-gap));
    box-sizing: border-box;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pin-masonry-row--mobile > .pin-masonry-col {
    flex-basis: calc(50% - calc(var(--ph-mobile-gap, var(--pm-mobile-gap)) / 2)) !important;
    max-width: calc(50% - calc(var(--ph-mobile-gap, var(--pm-mobile-gap)) / 2)) !important;
  }

  /* Touch — лек fade при натискане вместо hover */
  body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin:hover {
    opacity: 1;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid > .pin:active {
    opacity: 0.88;
  }

  body:not(.pin-detail-open):not(.pin-modal-open) .pinterest-grid .pin .lazy-load.loaded {
    opacity: 1 !important;
    filter: none !important;
  }
}


body:not(.pin-detail-open):not(.pin-modal-open) #pinterest-grid .pin .lazy-load.loaded {
  opacity: 1 !important;
  filter: none !important;
}


/* ========================  Misc homepage  ======================== */
body:not(.pin-detail-open):not(.pin-modal-open) .guest-welcome-strip {
  background: var(--pm-bg) !important;
  border: 1px solid var(--pm-line) !important;
  box-shadow: none !important;
  color: var(--pm-muted) !important;
  border-radius: 0 !important;
}

body:not(.pin-detail-open):not(.pin-modal-open) #empty-state {
  font-family: var(--pm-font) !important;
  color: var(--pm-muted) !important;
  letter-spacing: 0.02em;
}


/* ========================  Closeup — balanced modal + aside grid  ======================== */
@media (min-width: 769px) {
  body.pin-detail-open {
    --closeup-max-panel-h: min(
      calc(100dvh - var(--content-below-header, 0px) - 28px),
      820px
    );
  }

  body.pin-detail-open .pin-closeup-slot.is-active {
    z-index: 12 !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: min(var(--closeup-panel-h), var(--closeup-max-panel-h)) !important;
    max-height: min(var(--closeup-panel-h), var(--closeup-max-panel-h)) !important;
  }

  body.pin-detail-open .pin-closeup-slot .pin-closeup-panel.pin-closeup-in-grid,
  body.pin-detail-open .pin-closeup-slot .pin-closeup-panel.pin-closeup-in-grid.active,
  body.pin-detail-open #pin-detail.pin-closeup-panel.pin-closeup-in-grid {
    z-index: 12 !important;
    max-width: 100% !important;
    height: min(var(--closeup-panel-h), var(--closeup-max-panel-h)) !important;
    max-height: min(var(--closeup-panel-h), var(--closeup-max-panel-h)) !important;
    overflow: hidden !important;
  }

  body.pin-detail-open .pin-closeup-panel .closeup-side {
    position: relative;
    z-index: 3;
    min-width: 0;
  }

  body.pin-detail-open .pinterest-grid-aside:not([hidden]) {
    z-index: 1 !important;
    pointer-events: auto;
    height: min(var(--closeup-panel-h), var(--closeup-max-panel-h)) !important;
    max-height: min(var(--closeup-panel-h), var(--closeup-max-panel-h)) !important;
  }

  body.pin-detail-open .pinterest-grid-aside:not([hidden]) .pin-masonry-row {
    height: min(var(--closeup-panel-h), var(--closeup-max-panel-h)) !important;
    max-height: min(var(--closeup-panel-h), var(--closeup-max-panel-h)) !important;
  }

  body.pin-detail-open .pinterest-grid-flow.has-closeup {
    grid-template-columns: minmax(0, var(--closeup-panel-w)) minmax(0, var(--closeup-aside-w, 1fr));
    grid-template-rows: min(var(--closeup-panel-h), var(--closeup-max-panel-h)) auto;
    column-gap: var(--pin-col-gap, 11px);
    align-items: start;
  }

  body.pin-detail-open .pinterest-grid-flow.has-closeup .pin-closeup-slot.is-active {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  body.pin-detail-open .pinterest-grid-aside:not([hidden]) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  /* PM mobile modal — балансирана снимка + видими действия/коментари */
  #pinModal,
  #pinModal .pin-modal-scroll,
  #pinModal .pin-modal-hero {
    background: var(--pm-bg) !important;
  }

  #pinModal .pin-modal-image-container {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    background: #0a0a0a !important;
  }

  #pinModal .pin-modal-image,
  #pinModal .pin-modal-video {
    max-height: min(68vh, 68dvh) !important;
  }

  #pinModal .pin-modal-image-container .pin-embed-scaler--modal {
    max-height: min(68vh, 68dvh) !important;
    min-height: 0 !important;
  }

  #pinModal .pin-modal-image-container.pin-modal-has-embed {
    min-height: min(56vh, 56dvh) !important;
  }

  #pinModal #pinModalClose {
    top: max(10px, calc(env(safe-area-inset-top) + 4px)) !important;
    left: 10px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--pm-line) !important;
    box-shadow: none !important;
  }

  #pinModal .pin-modal-fullscreen-btn {
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important;
  }

  #pinModal .pin-modal-bottom-bar,
  #pinModal .pin-modal-pin-meta,
  #pinModal .pin-modal-explore {
    background: var(--pm-bg) !important;
    font-family: var(--pm-font) !important;
  }

  #pinModal .pin-modal-bottom-bar {
    border-bottom: 1px solid var(--pm-line) !important;
  }

  #pinModal .pin-modal-pin-title {
    font-family: var(--pm-display) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
  }

  #pinModal .pin-modal-save-btn {
    border-radius: 0 !important;
    background: var(--pm-ink) !important;
  }

  #pinModal .pin-modal-explore-heading {
    font-family: var(--pm-font) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--pm-muted) !important;
    padding: 16px var(--ph-mobile-gap, 8px) 10px !important;
  }

  #pinModal .pin-modal-explore-grid {
    gap: var(--ph-mobile-gap, 8px) !important;
    padding: 0 var(--ph-mobile-gap, 8px) calc(20px + env(safe-area-inset-bottom)) !important;
  }

  #pinModal .pin-modal-explore-col {
    gap: var(--ph-mobile-gap, 8px) !important;
  }

  #pinModal .pin-modal-explore-grid .pin {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #pinModal .pin-comments-sheet .pin-comments-panel,
  #pinModal .pin-options-panel {
    border-radius: 0 !important;
  }

  #pinModal .pin-mobile-comment-composer .closeup-composer-field {
    border-radius: 0 !important;
    border: 1px solid var(--pm-line) !important;
  }

  #pinModal .pin-mobile-comment-composer .closeup-composer-send.is-ready {
    border-radius: 0 !important;
    background: var(--pm-ink) !important;
  }
}


/* ========================  Admin grid size panel  ======================== */
.grid-size-panel {
  position: fixed;
  left: calc(var(--rail-w, 80px) + 16px);
  bottom: 24px;
  z-index: 2050;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--pm-font);
}

body.is-admin .grid-size-panel {
  display: none;
}

body.is-admin .grid-size-panel.is-open {
  display: flex;
}

@media (min-width: 769px) {
  body.is-admin .grid-size-panel {
    display: flex;
  }
}

@media (max-width: 768px) {
  body.is-admin .grid-size-panel {
    left: 12px;
    right: 12px;
    bottom: 16px;
    align-items: stretch;
  }

  .grid-size-toggle {
    display: none !important;
  }

  .grid-size-body {
    width: 100%;
  }
}

.grid-size-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--pm-line);
  border-radius: 0;
  background: var(--pm-bg);
  color: var(--pm-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.grid-size-body {
  width: min(280px, calc(100vw - 120px));
  padding: 14px;
  border: 1px solid var(--pm-line);
  border-radius: 0;
  background: var(--pm-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.grid-size-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-ink);
}

.grid-size-row label {
  font-size: 12px;
  color: var(--pm-muted);
}

.grid-size-btn {
  border-radius: 0;
  border: 1px solid var(--pm-line);
  background: var(--pm-bg);
  color: var(--pm-ink);
}

.grid-size-save {
  background: var(--pm-ink);
  color: var(--pm-bg);
  border-radius: 0;
}

.grid-size-reset {
  background: #efefef;
  border-radius: 0;
}

body.pin-detail-open .grid-size-panel,
body.pin-modal-open .grid-size-panel {
  display: none !important;
}