.rhc-bento {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-auto-rows: 200px;
grid-auto-flow: row dense;
gap: 6px;
border-radius: 16px;
overflow: hidden;
margin-bottom: 40px;
}
.rhc-bento .wp-block-image {
margin: 0;
overflow: hidden;
display: block;
}
.rhc-bento .wp-block-image figure,
.rhc-bento .wp-block-image a {
height: 100%;
display: block;
} .rhc-bento .wp-block-image:first-child {
grid-row: span 2;
grid-column: 1;
} .rhc-bento:not(.is-expanded) .wp-block-image:nth-child(n+6) {
display: none;
} .rhc-bento-wrap {
position: relative;
margin-bottom: 40px;
}
.rhc-bento-wrap .rhc-bento {
margin-bottom: 0;
}
.rhc-show-all-btn {
position: absolute;
bottom: 16px;
right: 16px;
background: #fff;
border: 1.5px solid #222;
border-radius: 8px;
padding: 8px 16px;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: background .15s;
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.rhc-show-all-btn:hover { background: #f5f5f5; } #rhc-gallery-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background: #fff;
overflow-y: auto;
flex-direction: column;
}
#rhc-gallery-overlay.is-open { display: flex; }
.rhc-go-header {
position: sticky;
top: 0;
z-index: 2;
background: #fff;
border-bottom: 1px solid #e5e7eb;
padding: 14px 24px;
}
.rhc-go-back {
background: none;
border: 1.5px solid #222;
border-radius: 8px;
padding: 8px 18px;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.rhc-go-back:hover { background: #f5f5f5; }
.rhc-go-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 8px;
padding: 24px;
}
.rhc-go-cell { overflow: hidden; border-radius: 10px; aspect-ratio: 4/3; }
.rhc-go-cell img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .3s ease;
}
.rhc-go-cell img:hover { transform: scale(1.04); }
@media (max-width: 480px) {
.rhc-go-grid { grid-template-columns: 1fr; padding: 12px; }
}
.rhc-bento .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
cursor: zoom-in;
}
.rhc-bento .wp-block-image img:hover {
transform: scale(1.04);
}
@media (max-width: 768px) {
.rhc-bento {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 180px;
border-radius: 0;
}
.rhc-bento .wp-block-image:first-child {
grid-column: 1 / 3;
grid-row: span 1;
}
.rhc-bento .wp-block-image:nth-child(n+5) {
display: none;
}
}
@media (max-width: 480px) {
.rhc-bento {
grid-template-columns: 1fr;
grid-auto-rows: 240px;
}
.rhc-bento .wp-block-image:not(:first-child) {
display: none;
}
} .rhc-apt-layout.wp-block-columns {
align-items: stretch !important;
gap: 48px !important;
}
.rhc-apt-layout > .wp-block-column {
min-width: 0;
} .rhc-sticky-sidebar {
position: sticky;
top: calc(var(--wp-admin--admin-bar--position-offset, 0px) + 24px);
} .rhc-highlights-row.wp-block-columns {
flex-wrap: nowrap !important;
gap: 16px !important;
}
.rhc-highlights-row > .wp-block-column {
flex: 1 1 0 !important;
min-width: 0 !important;
}
@media (max-width: 600px) {
.rhc-highlights-row.wp-block-columns {
flex-direction: column !important;
}
} .rhc-apt-meta.wp-block-columns {
gap: 0 !important;
margin-bottom: 0 !important;
}
.rhc-apt-meta .wp-block-column {
text-align: center;
padding: 16px 8px;
border-right: 1px solid #e5e7eb;
}
.rhc-apt-meta .wp-block-column:last-child {
border-right: none;
}
.rhc-apt-meta-number {
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
display: block;
margin-bottom: 4px;
}
.rhc-apt-meta-label {
font-size: .78rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: .05em;
} .rhc-highlight-item {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 16px !important;
padding: 12px 0;
}
p.rhc-highlight-icon {
width: 32px;
flex-shrink: 0;
margin: 0 !important;
line-height: 1.4;
}
.rhc-highlight-text {
flex: 1;
min-width: 0;
}
.rhc-highlight-text .wp-block-heading {
margin-bottom: 4px;
}
.rhc-highlight-text strong {
display: block;
font-size: .95rem;
font-weight: 600;
margin-bottom: 2px;
}
.rhc-highlight-text span {
font-size: .85rem;
color: #6b7280;
} .rhc-host-card {
display: flex;
align-items: center;
gap: 16px;
}
.rhc-host-card .wp-block-image {
margin: 0;
flex-shrink: 0;
}
.rhc-host-card .wp-block-image img {
border-radius: 50%;
width: 56px !important;
height: 56px !important;
object-fit: cover;
}
.rhc-host-info strong {
display: block;
font-size: 1rem;
font-weight: 700;
}
.rhc-host-info span {
font-size: .85rem;
color: #6b7280;
} .rhc-amenities-grid.wp-block-columns {
gap: 8px !important;
}
.rhc-amenities-grid .wp-block-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
border-bottom: 1px solid #f3f4f6;
font-size: .9rem;
}
.rhc-amenities-grid .wp-block-list li::marker {
content: none;
} .rhc-apt-page hr.wp-block-separator {
border-color: #e5e7eb !important;
margin: 28px 0 !important;
} #rhc-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 100000;
background: rgba(0,0,0,.92);
align-items: center;
justify-content: center;
gap: 16px;
}
#rhc-lightbox.is-open { display: flex; }
.rhc-lb-img-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: calc(100vw - 160px);
max-height: 100vh;
padding: 48px 0;
}
.rhc-lb-img {
max-width: 100%;
max-height: calc(100vh - 96px);
object-fit: contain;
border-radius: 8px;
display: block;
}
.rhc-lb-close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: #fff;
font-size: 1.6rem;
cursor: pointer;
line-height: 1;
opacity: .8;
transition: opacity .15s;
}
.rhc-lb-close:hover { opacity: 1; }
.rhc-lb-prev,
.rhc-lb-next {
background: rgba(255,255,255,.12);
border: none;
color: #fff;
font-size: 1.8rem;
width: 52px;
height: 52px;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
transition: background .15s;
display: flex;
align-items: center;
justify-content: center;
}
.rhc-lb-prev:hover,
.rhc-lb-next:hover { background: rgba(255,255,255,.25); }
@media (max-width: 600px) {
.rhc-lb-img-wrap { max-width: 100vw; padding: 60px 8px 40px; }
.rhc-lb-prev, .rhc-lb-next { width: 40px; height: 40px; font-size: 1.3rem; }
}