/* Gabriel Scicluna — iPhone gallery-card layout & unified editorial arrows.
   Scoped overrides: photos, gallery data and admin remain unchanged. */

#app a.gs-arrow-normalized::after,
#app button.gs-arrow-normalized::after {
  content: none !important;
  display: none !important;
}
#app .gs-arrow-icon {
  display: inline-block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 10px !important;
  color: #9b845e !important;
  vertical-align: middle !important;
  background: none !important;
  transform: none !important;
}
#app .ed-contact a.gs-arrow-normalized,
#app .ed-contact button.gs-arrow-normalized {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  max-width: 100% !important;
  min-height: 60px;
}
#app .ed-contact .gs-arrow-icon {
  flex: 0 0 21px !important;
  width: 21px !important;
  height: 21px !important;
  color: #dbc9a4 !important;
  margin-left: auto !important;
}
#app .ed-contact :is(a,button).gs-arrow-normalized > span:empty {
  display: none !important;
}

/* On small screens each photograph, its number and its title are one
   self-contained card; no staggered-grid positioning is allowed. */
@media (max-width: 767px) {
  #app .ed-collection-grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: clamp(32px, 9vw, 50px) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }
  #app .ed-collection-grid > .ed-collection-card,
  #app .ed-collection-grid > .ed-collection-card:nth-child(n) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    isolation: isolate;
  }
  #app .ed-collection-card > .ed-card-image {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  #app .ed-collection-card > .ed-card-image img {
    display: block;
    max-width: 100%;
  }
  #app .ed-collection-card > .ed-card-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    padding: 13px 0 0 !important;
    margin: 0 !important;
    gap: clamp(13px, 3.4vw, 20px) !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: left !important;
  }
  #app .ed-collection-card > .ed-card-label > * {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
  #app .ed-card-label :is(.ed-card-title, .ed-card-name, h2, h3, h4) {
    flex: 1 1 auto !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(25px, 7vw, 36px) !important;
    line-height: 1.07 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    margin: 0 !important;
    text-align: left !important;
  }
  #app .ed-card-label :is(.ed-card-number, .ed-number, .card-number, .ed-card-index) {
    flex: 0 0 26px !important;
    align-self: center !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: .14em !important;
  }
  #app .ed-collection-card > .ed-card-label :is(.ed-card-arrow, .ed-arrow, .link-arrow, .arrow-icon) {
    display: none !important;
  }
  #app .ed-collection-card > .ed-card-label::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 0 0 auto !important;
    background: #9b845e !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center / contain no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  #app .ed-collection-card::after { content: none !important; display: none !important; }
  #app .ed-collections {
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  #app .ed-contact a.gs-arrow-normalized,
  #app .ed-contact button.gs-arrow-normalized {
    padding-block: 17px !important;
  }
}
@media (max-width: 390px) {
  #app .ed-card-label :is(.ed-card-title, .ed-card-name, h2, h3, h4) {
    font-size: clamp(24px, 6.8vw, 30px) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #app .gs-arrow-icon { transition: none !important; }
}