/** * Property Photo Gallery — ported verbatim from the redcottage.com * YOOtheme template CSS (de-scoped), var-namespaced to --hrtk-pg-*. * Fonts deliberately inherit the site instead of forcing Montserrat. */ /* Layout vars (Hub "Photo Gallery" panel): --hrtk-pg-main-share is the large photo's UNITLESS share of the hero width (0.375 = the original 1.2fr of 1.2fr 1fr 1fr), --hrtk-pg-gap the space between photos, --hrtk-pg-radius the corner radius. Display.php stamps non-default values inline on #pg-wrap. */ #pg-wrap {--hrtk-pg-accent: #B89535; --hrtk-pg-text: #1A1A1A; --hrtk-pg-text-secondary: #6B6B6B; --hrtk-pg-border: #E2DFDA; --hrtk-pg-border-light: #E8E5E0; --hrtk-pg-main-share: 0.375; --hrtk-pg-gap: 3px; --hrtk-pg-radius: 0px;} #pg-wrap, #pg-wrap *, #pg-wrap *::before, #pg-wrap *::after {box-sizing: border-box !important;} #pg-wrap {position: relative;} /* Boxed mode: Display.php stamps .pg-boxed + --hrtk-pg-max-width when the Hub "Full width" toggle is off (or the shortcode passes max_width=). The cap sits on the wrapper so the fixed-position lightbox stays viewport-wide. */ #pg-wrap.pg-boxed {max-width: var(--hrtk-pg-max-width, 1200px) !important; margin-left: auto !important; margin-right: auto !important;} /* Main column = its share of the width left after the two gaps; the two cell columns split the rest (identical to 1.2fr 1fr 1fr at the default share). max-height tracks the gap so a wider gap cannot clip the bottom row. */ #pg-wrap .pg-gallery {display: grid !important; grid-template-columns: calc((100% - 2 * var(--hrtk-pg-gap)) * var(--hrtk-pg-main-share)) 1fr 1fr; grid-template-rows: 260px 260px; gap: var(--hrtk-pg-gap); max-height: calc(520px + var(--hrtk-pg-gap)); overflow: hidden; position: relative;} #pg-wrap .pg-gallery-main {grid-row: 1/3; overflow: hidden; position: relative;} #pg-wrap .pg-gallery-main img {width: 100% !important; height: 100% !important; -o-object-fit: cover !important; object-fit: cover !important; cursor: pointer;} #pg-wrap .pg-gallery-cell {overflow: hidden; position: relative;} #pg-wrap .pg-gallery-cell img {width: 100% !important; height: 100% !important; -o-object-fit: cover !important; object-fit: cover !important; cursor: pointer;} /* Corner radius: Display.php adds pg-radius-outer | pg-radius-all plus --hrtk-pg-radius only when the Hub radius is above 0. Outer rounds the grid as one block (it already clips overflow); all rounds every photo (cells clip their own overflow, so the hover overlay and the mobile slides round too). */ #pg-wrap.pg-radius-outer .pg-gallery {border-radius: var(--hrtk-pg-radius);} #pg-wrap.pg-radius-all .pg-gallery-main, #pg-wrap.pg-radius-all .pg-gallery-cell {border-radius: var(--hrtk-pg-radius);} /* Hover: a 10% darken overlay (Airbnb-style) instead of a scale-up zoom. pointer-events: none keeps clicks reaching the img openers; the show-all button sits above it at z-index 2. */ #pg-wrap .pg-gallery-main::after, #pg-wrap .pg-gallery-cell::after {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; z-index: 1;} #pg-wrap .pg-gallery-main:hover::after, #pg-wrap .pg-gallery-cell:hover::after {opacity: 1;} /* "Show all photos": Airbnb-spec (white, 1px #222 border, 8px radius, 14px/600). Unlike the rest of the module this button does NOT inherit the site font — every typographic/box property is pinned !important so theme button styles (font, letter-spacing, min-height, pill radii) cannot invade. */ #pg-wrap .pg-gallery-btn, #pg-wrap .pg-tour-btn {position: absolute !important; bottom: 20px; right: 20px; display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 7px 15px !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; background: var(--hrtk-pg-btn-bg, #fff) !important; color: var(--hrtk-pg-btn-text, #222) !important; border: 1px solid var(--hrtk-pg-btn-border, #222) !important; border-radius: var(--hrtk-pg-btn-radius, 8px) !important; box-shadow: none !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 18px !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; text-align: center !important; opacity: 1 !important; cursor: pointer !important; z-index: 2; transition: background-color 0.2s ease, transform 0.1s ease !important;} #pg-wrap .pg-gallery-btn:hover, #pg-wrap .pg-tour-btn:hover {background: var(--hrtk-pg-btn-hover, #f7f7f7) !important; box-shadow: none !important;} #pg-wrap .pg-gallery-btn:active, #pg-wrap .pg-tour-btn:active {transform: scale(0.96) !important;} #pg-wrap .pg-gallery-btn svg, #pg-wrap .pg-tour-btn svg {display: block !important; width: 16px !important; height: 16px !important; flex: 0 0 auto !important; margin: 0 !important;} #pg-wrap .pg-gallery-cell:nth-child(n+6) {display: none !important;} /* 3D tour (Display tour_button): with a tour, "3D Tour" and "Show all photos" share one row over the grid's bottom-right corner; the row is positioned, the buttons in it are not. The tour button wears the show-all armor above (it may be an , so color and decoration are pinned too). */ #pg-wrap .pg-gallery-actions {position: absolute !important; bottom: 20px; right: 20px; z-index: 2; display: flex !important; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: center; gap: 8px; max-width: calc(100% - 40px);} #pg-wrap .pg-gallery-actions > .pg-gallery-btn, #pg-wrap .pg-gallery-actions > .pg-tour-btn {position: static !important;} #pg-wrap .pg-tour-btn:focus-visible, #pg-wrap .pg-mobile-tour:focus-visible {outline: 2px solid #222 !important; outline-offset: 2px !important;} #pg-wrap .pg-mobile-counter, #pg-wrap .pg-mobile-showall, #pg-wrap .pg-mobile-actions {display: none;} /* 3D tour dialog: a centered frame over a dark backdrop, or (pg-tour-fullscreen) the whole window. The script sets the iframe src on open, clears it on close. Its base class is pg-tour-dialog, never the bare pg-tour: that class is the photo tour mode on .pg-lightbox-grid (3.318.0 to 3.321.2 shared the name, which pinned the grid to the viewport and centered its sections). */ #pg-wrap .pg-tour-dialog {position: fixed !important; inset: 0; z-index: 1000001; display: flex !important; align-items: center; justify-content: center; animation: hrtk-pg-fade-in 0.2s ease;} #pg-wrap .pg-tour-dialog[hidden] {display: none !important;} #pg-wrap .pg-tour-backdrop {position: absolute; inset: 0; background: rgba(0,0,0,0.78);} #pg-wrap .pg-tour-frame {position: relative; width: min(1200px, 92vw); height: min(800px, 82vh); background: #111; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4);} #pg-wrap .pg-tour-fullscreen .pg-tour-frame {width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none;} #pg-wrap .pg-tour-iframe {display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important;} #pg-wrap .pg-tour-close {position: absolute !important; top: 12px; right: 12px; z-index: 2; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: rgba(255,255,255,0.95) !important; color: #222 !important; border: none !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; cursor: pointer !important;} #pg-wrap .pg-tour-close:hover {background: #fff !important;} #pg-wrap .pg-tour-close:focus-visible {outline: 2px solid #fff !important; outline-offset: 2px !important;} #pg-wrap .pg-lightbox {display: none; position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; background: rgba(250,250,248,0.98) !important; z-index: 1000000; flex-direction: column; overflow-y: auto; transition: background-color 0.25s ease;} #pg-wrap .pg-lightbox.active {display: flex !important;} #pg-wrap .pg-lightbox-header {position: sticky; top: 0; z-index: 10; background: rgba(250,250,248,0.96) !important; backdrop-filter: blur(10px); display: flex !important; align-items: center; justify-content: flex-start; padding: 12px 24px; border-bottom: 1px solid var(--hrtk-pg-border-light); transition: background-color 0.25s ease;} #pg-wrap .pg-lightbox-title {font-family: inherit; font-size: 14.4px !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 3px;} /* "✕ Close", Airbnb-style: icon + label text button, left of the header. Fully armored like .pg-gallery-btn — themes style bare