/* * The Selective Traveler — Review Template System v1.1.3 * Responsive gallery normalization. * * The theme intentionally contains older generic mobile gallery rules that * force every Gallery block to two columns and crop every image square. Those * rules are useful for multi-image mosaics, but they break one-image Photo * Journal cards by leaving an empty second column. This stylesheet is loaded * after the theme and makes the layout depend on the REAL image count. */ .tst-review-photo-placeholder { box-sizing: border-box; border: 2px dashed rgba(100, 100, 100, .35); border-radius: 12px; padding: 24px; margin-top: 18px; margin-bottom: 6px; text-align: center; background: rgba(127, 127, 127, .06); } .tst-review-photo-placeholder p { margin: 0; opacity: .78; } /* Keep every Photo Journal box internally contained. */ html body .review-content.chubby-review .tst-chubby-photo-moment-v1623 { box-sizing: border-box !important; max-width: 100% !important; overflow: hidden; } /* Remove Gutenberg/gallery margins that can create uneven internal spacing. */ html body .review-content.chubby-review .tst-chubby-photo-moment-v1623 > .wp-block-gallery, html body .review-content.chubby-review .tst-chubby-photo-moment-v1623 > ul.wp-block-gallery, html body .review-content.chubby-review .tst-chubby-photo-moment-v1623 > .gallery, html body .review-content.chubby-review .tst-chubby-photo-moment-v1623 > .wp-block-jetpack-tiled-gallery, html body .review-content.chubby-review .tst-chubby-photo-moment-v1623 > .tst-editorial-gallery, html body .review-content.chubby-review .tst-chubby-photo-moment-v1623 > figure.wp-block-image, html body .review-content.chubby-review .tst-chubby-photo-moment-v1623 > .wp-block-image { margin-top: 0 !important; margin-bottom: 0 !important; } /* --------------------------------------------------------------- ONE-IMAGE RESPONSIVE NOTE Desktop intentionally inherits the theme/review-builder crop system. The corrective one-column + natural-ratio rules are PHONE-ONLY below. This prevents the mobile fix from stretching desktop Photo Journals. --------------------------------------------------------------- */ /* Narrow/atmosphere is a generic presentation option, not restaurant-specific. */ @media (min-width: 783px) { html body .review-content.chubby-review .tst-review-photo-journal--narrow .tst-review-gallery--count-1, html body .review-content.chubby-review .tst-review-photo-journal--narrow > figure.wp-block-image, html body .review-content.chubby-review .tst-review-photo-journal--narrow > .wp-block-image { width: 82% !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; } } /* --------------------------------------------------------------- MOBILE IMAGE-COUNT LOGIC 1 = full width 2 = balanced pair 3 = two tiles + one full-width finish 4+ = balanced two-column mosaic --------------------------------------------------------------- */ @media (max-width: 640px) { html body .review-content.chubby-review .tst-chubby-photo-moment-v1623 { width: 100% !important; max-width: 100% !important; } /* ONE IMAGE — mobile-only correction. Keep one-photo journals full width on phones without leaking the natural-ratio/contain behavior into desktop. */ html body .review-content.chubby-review .tst-review-gallery--count-1, html body .review-content.chubby-review .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-of-type(2))), html body .review-content.chubby-review ul.wp-block-gallery:not(:has(> li:nth-child(2))), html body .review-content.chubby-review .gallery:not(:has(> .gallery-item:nth-child(2))) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; } html body .review-content.chubby-review .tst-review-gallery--count-1 > figure, html body .review-content.chubby-review .tst-review-gallery--count-1 > li, html body .review-content.chubby-review .tst-review-gallery--count-1 > .gallery-item, html body .review-content.chubby-review .tst-review-gallery--count-1 > .tst-editorial-gallery__item, html body .review-content.chubby-review .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-of-type(2))) > figure.wp-block-image, html body .review-content.chubby-review ul.wp-block-gallery:not(:has(> li:nth-child(2))) > li, html body .review-content.chubby-review .gallery:not(:has(> .gallery-item:nth-child(2))) > .gallery-item { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 0 0 100% !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image > a, html body .review-content.chubby-review .tst-review-gallery--count-1 .tst-editorial-gallery__frame, html body .review-content.chubby-review .tst-review-gallery--count-1 picture, html body .review-content.chubby-review .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-of-type(2))) .wp-block-image > a, html body .review-content.chubby-review .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-of-type(2))) picture { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; } html body .review-content.chubby-review .tst-review-gallery--count-1 img, html body .review-content.chubby-review .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-of-type(2))) img, html body .review-content.chubby-review ul.wp-block-gallery:not(:has(> li:nth-child(2))) img, html body .review-content.chubby-review .gallery:not(:has(> .gallery-item:nth-child(2))) img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center center !important; } /* A one-image Photo Journal that uses a normal Image block rather than Gallery. */ html body .review-content.chubby-review .tst-photo-count-1 > figure.wp-block-image, html body .review-content.chubby-review .tst-photo-count-1 > .wp-block-image, html body .review-content.chubby-review .tst-photo-count-1 > :not(.tst-chubby-photo-moment__header) figure.wp-block-image { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } html body .review-content.chubby-review .tst-photo-count-1 > figure.wp-block-image img, html body .review-content.chubby-review .tst-photo-count-1 > .wp-block-image img, html body .review-content.chubby-review .tst-photo-count-1 > :not(.tst-chubby-photo-moment__header) figure.wp-block-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; } html body .review-content.chubby-review .tst-review-gallery--count-2, html body .review-content.chubby-review .tst-review-gallery--count-3, html body .review-content.chubby-review .tst-review-gallery--count-many { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; } html body .review-content.chubby-review .tst-review-gallery--count-2 > figure, html body .review-content.chubby-review .tst-review-gallery--count-2 > li, html body .review-content.chubby-review .tst-review-gallery--count-2 > .gallery-item, html body .review-content.chubby-review .tst-review-gallery--count-2 > .tst-editorial-gallery__item, html body .review-content.chubby-review .tst-review-gallery--count-3 > figure, html body .review-content.chubby-review .tst-review-gallery--count-3 > li, html body .review-content.chubby-review .tst-review-gallery--count-3 > .gallery-item, html body .review-content.chubby-review .tst-review-gallery--count-3 > .tst-editorial-gallery__item, html body .review-content.chubby-review .tst-review-gallery--count-many > figure, html body .review-content.chubby-review .tst-review-gallery--count-many > li, html body .review-content.chubby-review .tst-review-gallery--count-many > .gallery-item, html body .review-content.chubby-review .tst-review-gallery--count-many > .tst-editorial-gallery__item { width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } /* Prevent the classic three-image blank cell. */ html body .review-content.chubby-review .tst-review-gallery--count-3 > :nth-child(3) { grid-column: 1 / -1 !important; width: 100% !important; } /* The third image is a real feature image, not a forced square. */ html body .review-content.chubby-review .tst-review-gallery--count-3 > :nth-child(3) img { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; } /* Narrow/atmosphere becomes full width on phones. */ html body .review-content.chubby-review .tst-review-photo-journal--narrow .tst-review-gallery--count-1, html body .review-content.chubby-review .tst-review-photo-journal--narrow > figure.wp-block-image, html body .review-content.chubby-review .tst-review-photo-journal--narrow > .wp-block-image { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } } /* Very small phones: preserve the same logic without horizontal overflow. */ @media (max-width: 420px) { html body .review-content.chubby-review .tst-chubby-photo-moment-v1623, html body .review-content.chubby-review .tst-review-gallery-normalized, html body .review-content.chubby-review .tst-review-gallery-normalized > * { min-width: 0 !important; max-width: 100% !important; } } /* --------------------------------------------------------------- MOBILE SINGLE-IMAGE FRAME CLEANUP Some legacy review-builder wrappers keep a fixed frame and blurred helper background/pseudo elements. Once the image is allowed to use its natural height, that helper fill can peek out at the bottom. Remove those supports for single-image mobile journals. --------------------------------------------------------------- */ @media (max-width: 640px) { html body .review-content.chubby-review .tst-review-gallery--count-1 > figure.wp-block-image, html body .review-content.chubby-review .tst-review-gallery--count-1 > li, html body .review-content.chubby-review .tst-review-gallery--count-1 > .gallery-item, html body .review-content.chubby-review .tst-review-gallery--count-1 > .tst-editorial-gallery__item, html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image, html body .review-content.chubby-review .tst-review-gallery--count-1 .tst-editorial-gallery__frame, html body .review-content.chubby-review .tst-review-gallery--count-1 picture, html body .review-content.chubby-review .tst-photo-count-1 > figure.wp-block-image, html body .review-content.chubby-review .tst-photo-count-1 > .wp-block-image, html body .review-content.chubby-review .tst-photo-count-1 > :not(.tst-chubby-photo-moment__header) figure.wp-block-image, html body .review-content.chubby-review .tst-photo-count-1 .tst-editorial-gallery__frame, html body .review-content.chubby-review .tst-photo-count-1 picture { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; background: transparent !important; background-image: none !important; filter: none !important; overflow: hidden !important; } html body .review-content.chubby-review .tst-review-gallery--count-1 > figure.wp-block-image::before, html body .review-content.chubby-review .tst-review-gallery--count-1 > figure.wp-block-image::after, html body .review-content.chubby-review .tst-review-gallery--count-1 > li::before, html body .review-content.chubby-review .tst-review-gallery--count-1 > li::after, html body .review-content.chubby-review .tst-review-gallery--count-1 > .gallery-item::before, html body .review-content.chubby-review .tst-review-gallery--count-1 > .gallery-item::after, html body .review-content.chubby-review .tst-review-gallery--count-1 > .tst-editorial-gallery__item::before, html body .review-content.chubby-review .tst-review-gallery--count-1 > .tst-editorial-gallery__item::after, html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image::before, html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image::after, html body .review-content.chubby-review .tst-review-gallery--count-1 .tst-editorial-gallery__frame::before, html body .review-content.chubby-review .tst-review-gallery--count-1 .tst-editorial-gallery__frame::after, html body .review-content.chubby-review .tst-review-gallery--count-1 picture::before, html body .review-content.chubby-review .tst-review-gallery--count-1 picture::after, html body .review-content.chubby-review .tst-photo-count-1 > figure.wp-block-image::before, html body .review-content.chubby-review .tst-photo-count-1 > figure.wp-block-image::after, html body .review-content.chubby-review .tst-photo-count-1 > .wp-block-image::before, html body .review-content.chubby-review .tst-photo-count-1 > .wp-block-image::after, html body .review-content.chubby-review .tst-photo-count-1 > :not(.tst-chubby-photo-moment__header) figure.wp-block-image::before, html body .review-content.chubby-review .tst-photo-count-1 > :not(.tst-chubby-photo-moment__header) figure.wp-block-image::after, html body .review-content.chubby-review .tst-photo-count-1 .tst-editorial-gallery__frame::before, html body .review-content.chubby-review .tst-photo-count-1 .tst-editorial-gallery__frame::after, html body .review-content.chubby-review .tst-photo-count-1 picture::before, html body .review-content.chubby-review .tst-photo-count-1 picture::after { content: none !important; display: none !important; background: none !important; filter: none !important; } } /* --------------------------------------------------------------- DESKTOP SINGLE-IMAGE BLUR ARTIFACT CLEANUP — v1.1.3 IMPORTANT: This desktop patch intentionally changes ONLY visual-effect layers on one-image Photo Journals. It does NOT change width, height, aspect-ratio, object-fit, grid sizing, padding, margins, or the proven desktop crop/layout restored in v1.1.1. --------------------------------------------------------------- */ @media (min-width: 641px) { html body .review-content.chubby-review .tst-review-gallery--count-1 > figure.wp-block-image, html body .review-content.chubby-review .tst-review-gallery--count-1 > li, html body .review-content.chubby-review .tst-review-gallery--count-1 > .gallery-item, html body .review-content.chubby-review .tst-review-gallery--count-1 > .tst-editorial-gallery__item, html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image, html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image > a, html body .review-content.chubby-review .tst-review-gallery--count-1 .tst-editorial-gallery__frame, html body .review-content.chubby-review .tst-review-gallery--count-1 picture, html body .review-content.chubby-review .tst-photo-count-1 > figure.wp-block-image, html body .review-content.chubby-review .tst-photo-count-1 > .wp-block-image, html body .review-content.chubby-review .tst-photo-count-1 > :not(.tst-chubby-photo-moment__header) figure.wp-block-image, html body .review-content.chubby-review .tst-photo-count-1 .wp-block-image > a, html body .review-content.chubby-review .tst-photo-count-1 .tst-editorial-gallery__frame, html body .review-content.chubby-review .tst-photo-count-1 picture { background-image: none !important; filter: none !important; -webkit-filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body .review-content.chubby-review .tst-review-gallery--count-1 img, html body .review-content.chubby-review .tst-photo-count-1 img { filter: none !important; -webkit-filter: none !important; } html body .review-content.chubby-review .tst-review-gallery--count-1 > figure.wp-block-image::before, html body .review-content.chubby-review .tst-review-gallery--count-1 > figure.wp-block-image::after, html body .review-content.chubby-review .tst-review-gallery--count-1 > li::before, html body .review-content.chubby-review .tst-review-gallery--count-1 > li::after, html body .review-content.chubby-review .tst-review-gallery--count-1 > .gallery-item::before, html body .review-content.chubby-review .tst-review-gallery--count-1 > .gallery-item::after, html body .review-content.chubby-review .tst-review-gallery--count-1 > .tst-editorial-gallery__item::before, html body .review-content.chubby-review .tst-review-gallery--count-1 > .tst-editorial-gallery__item::after, html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image::before, html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image::after, html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image > a::before, html body .review-content.chubby-review .tst-review-gallery--count-1 .wp-block-image > a::after, html body .review-content.chubby-review .tst-review-gallery--count-1 .tst-editorial-gallery__frame::before, html body .review-content.chubby-review .tst-review-gallery--count-1 .tst-editorial-gallery__frame::after, html body .review-content.chubby-review .tst-review-gallery--count-1 picture::before, html body .review-content.chubby-review .tst-review-gallery--count-1 picture::after, html body .review-content.chubby-review .tst-photo-count-1 > figure.wp-block-image::before, html body .review-content.chubby-review .tst-photo-count-1 > figure.wp-block-image::after, html body .review-content.chubby-review .tst-photo-count-1 > .wp-block-image::before, html body .review-content.chubby-review .tst-photo-count-1 > .wp-block-image::after, html body .review-content.chubby-review .tst-photo-count-1 .wp-block-image > a::before, html body .review-content.chubby-review .tst-photo-count-1 .wp-block-image > a::after, html body .review-content.chubby-review .tst-photo-count-1 .tst-editorial-gallery__frame::before, html body .review-content.chubby-review .tst-photo-count-1 .tst-editorial-gallery__frame::after, html body .review-content.chubby-review .tst-photo-count-1 picture::before, html body .review-content.chubby-review .tst-photo-count-1 picture::after { content: none !important; display: none !important; background-image: none !important; filter: none !important; -webkit-filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }