/* ===== Premium Hero Gallery Grid (big first + 2 stacked) ===== */



/* Desktop / default: 2 columns, 2 rows (big left spans 2 rows) */
.psmls-tile{
  display:grid;
  gap:10px;
  grid-template-columns: 2fr 1fr; /* big left, small right */
  grid-auto-rows: 220px;          /* overall tile height control */
}

/* Big first image */
.psmls-tile__cell:nth-child(1){
  grid-column: 1 / 2;
  grid-row: 1 / span 2;
}

/* Right top */
.psmls-tile__cell:nth-child(2){
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

/* Right bottom */
.psmls-tile__cell:nth-child(3){
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* If there are more than 3 images, hide them in the grid (they still exist in lightbox URLs) */
.psmls-tile__cell:nth-child(n+4){
  display:none;
}

/* Tile styling stays */
.psmls-tile__cell{
  position:relative;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:12px;
  overflow:hidden;
}

/* Make images fill their cell (important: remove fixed height) */
.psmls-tile__cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Mobile: stack as 1 column (big first, then 2 smaller) */
@media (max-width: 768px){
  [data-psmls-media="1"][data-psmls-premium="1"]{
    padding-left: 10px;
    padding-right: 10px;
  }

  .psmls-tile{
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
  }

  .psmls-tile__cell:nth-child(1){
    grid-column:auto;
    grid-row:auto;
    min-height: 240px;
  }

  .psmls-tile__cell:nth-child(2),
  .psmls-tile__cell:nth-child(3){
    grid-column:auto;
    grid-row:auto;
  }
}
.psmls-tile__more{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background:rgba(0,0,0,.45);
  color:#fff;
  text-align:center;
  padding:12px;
}


/* Keep Photos/Map toggle bar aligned with page container */
[data-psmls-premium="1"] .ps-mls-media__tabs{
  width: min(1100px, calc(100% - 24px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

/* Optional: if the premium gallery makes the media block full-bleed,
   ensure the tabs row doesn't inherit weird layout spacing */
.ps-mls-media__tabs{
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.psmls-lightbox{
  padding-bottom: 96px; /* reserve space for thumbs (adjust if needed) */
  box-sizing: border-box;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.psmls-lightbox.is-open{ display:flex; }
.psmls-lightbox__img{
  max-width: 96vw;
  max-height: calc(94vh - 96px); /* match the padding-bottom above */
  object-fit:contain;
  border-radius:7px;
  background:#111;
}
.psmls-lightbox__close{
  position:absolute;
  top:18px;
  right:20px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:0;
  font-size:28px;
  cursor:pointer;
}
.psmls-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  border:0;
  font-size:28px;
  cursor:pointer;
}
.psmls-lightbox__prev{ left:18px; }
.psmls-lightbox__next{ right:18px; }

.psmls-lightbox__close,
.psmls-lightbox__nav{
  background:rgba(255,255,255,.85);
  color:#111;
}
.psmls-lightbox__close:hover,
.psmls-lightbox__nav:hover{
  background:#fff;
}

.psmls-lightbox__stage{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.psmls-lightbox__thumbs{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;

  overflow-x:auto;   /* keep horizontal scroll */
  overflow-y:hidden; /* prevent vertical scrollbars */
  max-width:min(1100px, 92vw);
  padding:8px;
  border-radius:14px;
  background:rgba(0,0,0,.35);

  /* ✅ hide scrollbar UI */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge/IE */
  touch-action: pan-x;          /* nicer swipe */
}

.psmls-lightbox__thumbs::-webkit-scrollbar{
  display:none;                 /* Chrome/Safari */
}

.psmls-lb-thumb{
  border:2px solid transparent;
  border-radius:10px;
  padding:0;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
  overflow:hidden;
}

.psmls-lb-thumb img{
  width:70px;
  height:50px;
  object-fit:cover;
  display:block;
}

.psmls-lb-thumb.is-active{
  border-color:#fff;
}
/* first tile bigger (must be LAST in file) */
.psmls-tile{
  grid-auto-rows: 225px;
}

.psmls-tile .psmls-tile__cell:first-child{
  grid-row: span 2;
}

.psmls-tile .psmls-tile__cell:first-child img{
  height: 450px !important;
  max-height: 450px !important;
}

.psmls-tile .psmls-tile__cell:not(:first-child) img{
  height: 225px !important;
}
/* === Mosaic alignment fix: make rows consistent === */

/* ===== 450px main image (perfect alignment) ===== */

.psmls-tile{
  grid-auto-rows: 220px;  /* 220 + 220 + 10px gap = 450px */
  gap: 10px;
}

/* First tile spans 2 rows */
.psmls-tile__cell:first-child{
  grid-row: span 2;
}

/* Make every tile fill its grid area */
.psmls-tile__cell{
  height: 100%;
}

/* Make images fill their containers */
.psmls-tile__cell img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Mobile adjustment */
@media (max-width: 768px){
  .psmls-tile{
    grid-auto-rows: 150px;
  }
}
/* ===== Mobile: taller hero + center-crop (less “top only”) ===== */
@media (max-width: 768px){

  /* 1) Make the whole mosaic taller on mobile */
  .psmls-tile{
    gap: 8px;                 /* optional: slightly tighter */
    grid-auto-rows: 200px;    /* was 150px; bump up */
  }

  /* 2) First tile spans 2 rows => 160 + 160 + 8 gap = 328px hero */
  .psmls-tile__cell:first-child{
    grid-row: span 2;
  }

  /* 3) Center the crop so you see the middle of photos */
  .psmls-tile__cell img{
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 50%; /* center center */
  }

  /* Optional: slightly bias the HERO upward if faces are too low */
  .psmls-tile__cell:first-child img{
    object-position: 50% 45%;
  }
}

/*Google places*/
.psmls-google-places-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.psmls-google-places-group__title {
  font-weight: 700;
  margin-bottom: 8px;
}

.psmls-google-places-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.psmls-google-places-item {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.psmls-google-places-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.psmls-google-places-item__name {
  font-weight: 600;
  line-height: 1.35;
}

.psmls-google-places-item__meta {
  margin-top: 3px;
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: #ffecc2;
}

.psmls-google-places-item__vicinity {
  margin-top: 3px;
  font-size: 13px;
  color: #777;
}

.psmls-google-places-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.psmls-google-places-group__title {
  font-weight: 700;
  margin-bottom: 8px;
  color: #753700;
}


.psmls-google-places-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.psmls-google-places-item {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.psmls-google-places-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.psmls-google-places-item__name {
  font-weight: 600;
  line-height: 1.35;
  padding-left: 10px;
}

.psmls-google-places-item__meta {
  margin-top: 3px;
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: #c59a00;
  padding-left: 10px;
}

.psmls-google-places-item__vicinity {
  margin-top: 3px;
  font-size: 13px;
  color: #777;
  padding-left: 10px;
}
.psmls-google-places-group__footer {
  margin-top: 8px;
  text-align: right;
  font-size: 13px;
}

.psmls-google-places-group__footer a {
  text-decoration: none;
}

.psmls-google-places-group__footer a:hover {
  text-decoration: underline;
}