/* Public area: "O vile" landing and the code gate.
   Phone first (HomePhone / Code boards); desktop layout (Main board) from 960px. */

.pub{max-width:1208px;margin:0 auto;padding:0 16px}
.pub h1,.pub h2{margin:0;font-weight:900}
.pub-heading{display:flex;flex-direction:column;align-items:flex-start}
.pub-heading h2{font-size:28px}
.pub-section{padding-top:40px}

/* photos: real image or striped placeholder, same box */
.photo-img{width:100%;object-fit:cover;border-radius:20px;background:#EDE9DE}

/* hero */
.pub-hero{padding-top:8px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"mascot" "photo" "text";gap:16px}
.pub-hero-mascot{grid-area:mascot}
/* ui.mascot sets its size inline (92px, desktop board); the phone board uses 72px */
@media (max-width:759px){.pub-hero-mascot .mascot>div:first-child{width:72px!important;height:72px!important}}
.pub-hero-photo{grid-area:photo;height:260px}
.pub-hero-text{grid-area:text;display:flex;flex-direction:column;gap:16px;min-width:0}
.pub-hero-text h1{font-size:40px;line-height:1.05;color:#268217;letter-spacing:-.03em;overflow-wrap:anywhere}
.pub-lead{margin:0;font-size:16px;line-height:1.6}
.pub-chips{display:flex;flex-wrap:wrap;gap:8px}
.pub-cta{display:flex;flex-direction:column;gap:14px}
.pub-desktop-only{display:none}

/* gallery */
.pub-gallery{padding-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;scroll-margin-top:16px}
.pub-gallery>*{height:130px}

/* amenities */
.pub-section>.pub-heading{margin-bottom:16px}
.pub-amenities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pub-amenity{padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pub-amenity-icon{width:46px;height:46px;border-radius:14px;background:#DDF4CC;color:#1E5E14;display:flex;align-items:center;justify-content:center}
.pub-amenity-title{font-weight:900;font-size:17px}
.pub-amenity-text{font-size:14px;line-height:1.5;overflow-wrap:anywhere}

/* how to book */
.pub-steps-card{padding:22px 18px;display:flex;flex-direction:column;gap:20px}
.pub-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.pub-step{display:flex;gap:14px;align-items:flex-start;flex:1}
.pub-step-body{display:flex;flex-direction:column;gap:4px}
.pub-step-title{font-weight:900;font-size:18px}
.pub-step-text{font-size:14px;line-height:1.5;margin-top:4px}

/* where to find us */
.pub-where{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "info";gap:14px;scroll-margin-top:16px}
.pub-where>.pub-where-head .pub-heading{margin:0}
.pub-where-head{grid-area:head}
.pub-where-map{grid-area:map;height:200px}
.pub-where-info{grid-area:info;display:flex;flex-direction:column;gap:14px}
.pub-address{height:auto;padding:14px 16px;align-items:flex-start;line-height:1.4}
.pub-address svg{flex-shrink:0}
.pub-directions{font-weight:600}
.pub-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pub-time{padding:14px}
.pub-time-label{font-size:12px;font-weight:800;text-transform:uppercase}
.pub-time-value{font-size:20px;font-weight:900}

@media (min-width:760px){
  .pub{padding:0 20px}
  .pub-cta{flex-direction:row;flex-wrap:wrap}
  .pub-desktop-only{display:inline-flex}
  .pub-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:56px}
  .pub-gallery>*{height:200px}
  .pub-section{padding-top:72px}
  .pub-heading h2{font-size:36px}
  .pub-section>.pub-heading{margin-bottom:24px}
  .pub-amenities{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .pub-steps-card{padding:36px 40px;gap:28px}
  .pub-steps{flex-direction:row;gap:32px}
  .pub-where{gap:16px}
  .pub-times{gap:12px}
  .pub-time{padding:16px}
  .pub-time-label{font-size:13px}
  .pub-time-value{font-size:22px}
}

@media (min-width:960px){
  .pub-hero{padding-top:32px;grid-template-columns:minmax(0,520px) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:". photo" "mascot photo" "text photo" ". photo";column-gap:48px;row-gap:0}
  .pub-hero-photo{height:560px}
  .pub-hero-text{margin-top:28px;gap:20px}
  .pub-hero-text h1{font-size:64px;line-height:1}
  .pub-lead{font-size:18px}
  .pub-chips{gap:10px}
  .pub-cta{margin-top:8px}
  .pub-where{grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto 1fr;grid-template-areas:"map head" "map info";column-gap:32px;align-items:start}
  .pub-where-map{height:auto;min-height:340px;align-self:stretch}
}

/* code gate */
.pub-code{max-width:520px;margin:0 auto;padding:40px 20px 60px;display:flex;flex-direction:column;gap:24px}
.pub-code-form{display:flex;flex-direction:column;gap:14px}
.pub-code-form .btn{width:100%}
.pub-current{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.pub-code-info{padding:16px 18px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.5}
.pub-code-info>div{display:flex;gap:10px}
.pub-code-info-icon{color:#268217;flex-shrink:0}
@media (min-width:760px){.pub-code{padding-top:64px}}

/* photo album + lightbox */
.pub-album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pub-album-item{display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:2px solid var(--line);border-bottom-width:5px;background:#F4F1E8}
.pub-album-item:first-child{grid-column:span 2;aspect-ratio:16/9}
.pub-album-item img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.pub-album-item:hover img{transform:scale(1.04)}
@media (min-width:760px){.pub-album-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.pub-album-item:first-child{grid-row:span 2;aspect-ratio:auto}}
.pub-lightbox{padding:0;border:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
.pub-lightbox::backdrop{background:rgba(20,20,20,.88)}
.pub-lightbox img{position:absolute;inset:0;margin:auto;max-width:94vw;max-height:88vh;border-radius:16px;object-fit:contain}
.pub-lightbox .icon-btn{position:absolute}
.pub-lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.pub-lb-next{right:16px;top:50%;transform:translateY(-50%)}
.pub-lb-close{right:16px;top:16px;font-size:26px;font-weight:900;line-height:1}