/* V28 gallery skin for your existing #grid */
#grid.grid,
#grid{
  column-count:4;
  column-gap:18px;
  display:block !important;
}

#grid > *{
  break-inside:avoid;
  margin:0 0 22px !important;
}

/* Try to cover common card class names in your existing render.js */
#grid .card,
#grid .postcard-card,
#grid article,
#grid > div{
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#grid img{
  max-width:100%;
  height:auto;
}

/* Visual treatment for cards with images */
#grid .card img,
#grid .postcard-card img,
#grid article img,
#grid > div img{
  border-radius:24px !important;
  background:var(--v28-soft);
  transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s ease;
}

#grid .card:hover img,
#grid .postcard-card:hover img,
#grid article:hover img,
#grid > div:hover img{
  transform:scale(1.08);
  box-shadow:var(--v28-shadow);
}

/* Lower information density */
#grid .card-content,
#grid .content,
#grid .postcard-info,
#grid .info{
  padding:10px 4px 0 !important;
  background:transparent !important;
}

/* Existing buttons become softer */
#grid button{
  border-radius:999px !important;
}

#grid .like-button,
#grid .heart-button,
#grid .want-button{
  background:var(--v28-pink) !important;
  color:#9a5963 !important;
  border:0 !important;
}

#grid .copy-button,
#grid .share-button{
  background:rgba(255,255,255,.84) !important;
  border:1px solid var(--v28-line) !important;
}

/* category pill */
#grid .category,
#grid .tag,
#grid .country{
  display:inline-flex;
  border-radius:999px !important;
  background:var(--v28-green-soft) !important;
  color:#4d8d4c !important;
}

@media(max-width:1050px){
  #grid.grid,#grid{column-count:3}
}
@media(max-width:760px){
  #grid.grid,#grid{column-count:2}
}
@media(max-width:520px){
  #grid.grid,#grid{column-count:1}
}

.v28-card-secondary-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.v28-soft-action{
  flex:1;
  border:1px solid var(--v28-line);
  background:rgba(255,255,255,.86);
  color:#3f5942;
  border-radius:999px;
  padding:8px 10px;
  font-weight:700;
  cursor:pointer;
}

.v28-soft-action.danger{
  color:#a85858;
}
.postcard-hover-actions{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:.2s ease !important;
  z-index:5 !important;
}

@media (hover: hover) {
  .postcard-card:hover .postcard-hover-actions{
    opacity:1 !important;
    pointer-events:auto !important;
  }
}

/* 行動裝置：讓按鈕始終可見，並固定在上方 */
@media (hover: none) {
  .postcard-hover-actions {
    opacity: 1 !important;
    pointer-events: none !important; /* 讓點擊穿透到下層的 card */
    background: transparent !important;
  }
  .postcard-actions-group {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    pointer-events: auto !important; /* 但按鈕本身要可以點 */
  }
  .postcard-card:active img {
    transform: scale(0.98) !important;
  }
}

.postcard-photo{
  position:relative !important;
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  height: auto !important;
  overflow:hidden !important;
  border-radius:24px !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Fix for Safari border-radius overflow clip bug */
}

.postcard-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.postcard-hover-actions .map-btn{
  position:absolute !important;
  left:12px !important;
  bottom:12px !important;
  width:auto !important;
  display:inline-flex !important;
}

.postcard-hover-actions .copy-btn{
  position:absolute !important;
  right:12px !important;
  bottom:12px !important;
  width:auto !important;
  display:inline-flex !important;
}
.v28-card-secondary-actions{
  display:none !important;
}
/* V28 clean readable card info */
.v28-scope .postcard-info{
  padding:8px 2px 18px !important;
}

.v28-scope .postcard-title-row{
  display:block !important;
}

.v28-scope .postcard-title{
  font-size:15px !important;
  font-weight:700 !important;
  margin-bottom:3px !important;
}

.v28-scope .postcard-want{
  margin-top:4px !important;
  padding:3px 8px !important;
  font-size:13px !important;
  background:transparent !important;
  border:1px solid rgba(0,0,0,.18) !important;
}

.v28-scope .postcard-coords{
  margin-top:4px !important;
  font-size:13px !important;
  color:#444 !important;
}

.v28-scope .postcard-country{
  display:block !important;
  margin-top:3px !important;
  padding:0 !important;
  background:transparent !important;
  color:#222 !important;
  font-size:13px !important;
  font-weight:600 !important;
}

.v28-scope .v28-card-secondary-actions{
  display:none !important;
}