/* gw-mobile.css - Grangewood Court: the DESIGNED tablet and phone layer (Stage 4, skill Rule 2). Loads LAST, after gw-design.css.
   Started from the starter pack's render_mobile_css.py output (build/stage4/gw-mobile.starter-rendered.css, palette from
   build/site-params.json, AA check exit 0), then rewritten for THIS site's shell (header band + logo swoosh, oval booking panel
   in #feature, .upper-content > .upper-bg + .mid-bg + .lower-bg curves, home .special and .bottom-area-container, fixed footer).
   None of the starter's VARIANT blocks exist on this site; they are not used.
   WIDTH BANDS:
     1250 and up    live's exact look (gw-design.css only; nothing here applies).
     1170 to 1249   live's layout; the AA layer below (14px text, 16px inputs, 24px taps, AA colours in every state) plus fitted rows.
     768 to 1169    a reflow: fluid 1170 container, live's header and oval booking panel kept, menu behind a button, columns stacked
                    where they no longer fit, footer released from its fixed height. Plus the AA layer.
     below 768      the phone design: compact header, booking as a stacked block under the photo, one column, 2-up galleries.
   AA palette (site-params.json): teal #00707d for buttons and links (white 5.8:1, 5.1:1 on the cream band), muted #666666,
   navy #25315a for the menu, #264c76 for active states. Live's own teal #00becf with white text is 2.3:1, so below 1250 every
   button uses #00707d in every state, with an inset darkening on hover/focus/active (white then gains contrast). */

/* =================== below 1250: the AA layer (every state; 14px text floor; 16px inputs; 24px taps) =================== */
@media (max-width: 1249px) {
  /* text floor: live's footer, footer menu, blog details, captcha note, "more" links, pager and smalltext are 11 to 13px */
  body.gw-site #page-container :is(#footer, #footer p, #footer li, #footer a, .copyright p, .copyright li, .copyright a, .footer-tags, .footer-tags p, .footer-tags a,
    .footermenu, .footermenu li, .footermenu a, .panel, .panel li, .panel li em, .panel .date, .panel .details, .panel .summary, .entry .details, .entry .details a,
    .paging, .paging a, .paging em, div.top, div.top a, a.more, .smalltext, .smalltext a, .panel.blog .summary, .vcard, .vcard li, .vcard a, blockquote .details,
    p.ils-required-note em.required, .upper-content h6) { font-size: 14px; line-height: 1.5; }
  body.gw-site.gw-home #page-container .panel.blog .details { font-size: 15px; line-height: 18px; }
  body.gw-site.gw-home #page-container .panel.blog .details .day { font-size: 30px; line-height: 28px; }
  body.gw-site.gw-home #page-container .panel.blog .details { height: auto; min-height: 48px; padding-bottom: 4px; }
  /* form controls 16px (also stops iOS zooming on focus) */
  body.gw-site #page-container :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) { font-size: 16px; }
  body.gw-site #page-container .gw-contact-form p.et_pb_contact_field .input, body.gw-site #page-container .gw-contact-form input.et_pb_contact_captcha { font-size: 16px; height: 40px; }
  body.gw-site #page-container .gw-contact-form p.et_pb_contact_field textarea.input { height: 120px; }
  body.gw-site #page-container .gw-contact-form .et_pb_contact_form_label { padding-top: 14px; padding-bottom: 6px; }
  /* tap targets 24px: inline vertical padding on list and running-text links (no change to how a line wraps) */
  body.gw-site #page-container :is(#footer a:not(.socialmedia a), .footermenu a, .panel a, .copyright li a, .footer-tags a, .details a, a.more:not(.button), .upper-content li a, .upper-content td a, .upper-content p a:not(.button), .content p a:not(.button)) { padding-top: 5px; padding-bottom: 5px; }
  body.gw-site #page-container :is(.paging a, .paging em) { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; box-sizing: border-box; text-align: center; }
  body.gw-site #page-container #menu > ul > li > a, body.gw-site #page-container #menu li ul a { padding-top: 3px; padding-bottom: 3px; }
  body.gw-site #page-container #header .logo a { display: block; }
  /* the header phone number is a tel: link (fix round 1, N1): its tap box is the band's whole text line (24 to 27px), not the 18px glyphs.
     (Its invisible navy ground is in gw-design.css section 13; the band under the whole box is flat #25315a at every width, n1/band_under_tel-*.txt.)
     The footer and contact-table tel links get the 5px tap padding above with the other footer and table links. */
  body.gw-site #page-container #header .phone a.tel-link { display: inline-block; min-height: 24px; }
  /* room thumbnails: the link box is the 19px text line around the photo; make it the photo's size */
  body.gw-site #page-container .gallery.room a.gallery-item { display: inline-block; vertical-align: top; }
  /* colours, every state: live changes only the background on hover, so set text and fill together */
  body.gw-site #page-container :is(a.button, input.button, .bookingbutton .button),
  body.gw-site #page-container :is(a.button, input.button, .bookingbutton .button):is(:link, :visited, :hover, :focus, :focus-visible, :active) {
    background-color: #00707d; color: #ffffff; text-decoration: none; }
  body.gw-site #page-container :is(a.button, input.button, .bookingbutton .button):is(:hover, :focus, :focus-visible, :active) { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.18); }
  body.gw-site #page-container .et_pb_section .gw-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button,
  body.gw-site #page-container .et_pb_section .gw-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active) { background: #00707d !important; color: #ffffff !important; }
  body.gw-site #page-container .et_pb_section .gw-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active) { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.18); }
  body.gw-site #page-container :is(a, input, select, textarea, button):focus-visible { outline: 3px solid #444444; outline-offset: 2px; }
  /* links on white and on the cream band: live #0aa3c1 is 3.0:1 on white, 2.6:1 on cream */
  /* links: live's generic a:link/a:hover teal #0aa3c1 is 3.0:1 on white and 2.6:1 on the cream band. Same selectors and
     specificity as live's rule, so every more specific live link colour (h2 a, .panel .title a, menu, paging, footer) still wins;
     the two equal-specificity live rules that this one would beat are restored right after it. */
  body.gw-site #page-container a:link, body.gw-site #page-container a:active, body.gw-site #page-container a:visited, body.gw-site #page-container a:hover { color: #00707d; }
  body.gw-site #page-container .special .text-wrapper a:not(.button) { color: #444444; }
  body.gw-site #page-container .special .text-wrapper h2 a:not(.button) { color: #264c76; }
  body.gw-site #page-container :is(span.options a, .paging span.options a) { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-align: center; }
  body.gw-site #page-container div.top a { padding-top: 2px; padding-bottom: 2px; }
  /* home: teal headline (#00becf: 2.3:1 on white) and the white words on the teal pie and the FAQ oval */
  body.gw-site.gw-home #page-container .upper-content h1 { color: #00808c; }
  body.gw-site.gw-home #page-container .special .special-top-bg { filter: brightness(0.6); }
  /* the heading sits on the (darkened) flat part of the pie: its own ground is that colour (#00becf x 0.6), so the box is invisible
     and contrast checkers measure the real pair (white on #00727c, 5.6:1) instead of the white offer box it is nested in */
  body.gw-site.gw-home #page-container .special h3 { background-color: #00727c; }
  body.gw-site.gw-home #page-container .home-faq { background-color: #00707d; }
  body.gw-site.gw-home #page-container .home-faq-bg { opacity: 0.25; }
  body.gw-site.gw-home #page-container .home-faq a:is(:link, :visited) { color: #ffffff; }
  body.gw-site.gw-home #page-container .home-faq a:is(:hover, :focus, :active) { color: #ffffff; text-decoration: underline; text-shadow: none; }
  body.gw-site #page-container .panel .title a:is(:link, :visited, :hover, :focus, :active) { color: #25315a; }
  body.gw-site #page-container :is(.panel .date, .panel .details, .entry .details, .panel li em, blockquote .details) { color: #666666; }
  body.gw-site #page-container :is(.panel .details a, .entry .details a):is(:link, :visited, :hover, :focus, :active) { color: #5c5c5c; }
  body.gw-site.gw-home #page-container .panel.blog .details { color: #ffffff; background-color: #00707d; }
  body.gw-site #page-container blockquote .highlight { color: #00707d; }
  body.gw-site #page-container a.more:not(.button):is(:link, :visited, :hover, :focus, :active) { color: #00707d; }
  /* "Back to top" box: live hover is white on #e3e3e3 (1.3:1) */
  body.gw-site #page-container div.top a:is(:link, :visited) { color: #5c5c5c; }
  body.gw-site #page-container div.top a:is(:hover, :focus, :active) { color: #ffffff; background: #5c5c5c; }
  /* pager: live #808080 on #ededed (3.4:1) and white on #b0b0b0 (2.1:1) */
  body.gw-site #page-container .paging { color: #5c5c5c; }
  body.gw-site #page-container .paging a:is(:link, :visited, :active) { color: #444444; background-color: #ededed; }
  body.gw-site #page-container :is(.paging a:hover, .paging a:focus, .paging em) { color: #ffffff; background-color: #264c76; }
  /* menu: live #444 / active #196ca1 on white; Book Now teal #00becf (2.3:1) */
  body.gw-site #page-container #menu li.alt a:is(:link, :visited, :active) { color: #00707d; }
  body.gw-site #page-container #menu li.alt a:hover { color: #25315a; }
  /* footer: white on navy passes; live's hover #bbbbbb on navy passes (6.5:1); copyright and vcard links */
  body.gw-site #page-container .footermenu a:is(:link, :visited, :hover, :focus, :active) { color: #5c5c5c; }
  body.gw-site #page-container .vcard a:is(:link, :visited, :active) { color: #5fd9e4 !important; }
  body.gw-site #page-container .vcard a:is(:hover, :focus) { color: #f2f0e7 !important; }
  /* live's page heading is 48px on a 30px line: a heading that wraps draws its lines on top of each other (live does this on long
     post titles at desktop; kept there). Below 1250 the lines get room. */
  body.gw-site #page-container .upper-content h1 { line-height: 1.15; }
  body.gw-site.gw-home #page-container .upper-content h1 { line-height: 66px; }
  /* TripAdvisor rating widget (test page): its review count is 11px and its rating-image link a 16px line */
  body.gw-site #page-container .TA_cdsratingsonlynarrow :is(span, a, div, li) { font-size: 14px; }
  body.gw-site #page-container .TA_cdsratingsonlynarrow a { display: inline-block; min-height: 24px; }
  /* home offer box: live's 160px text wrapper (plus 23px padding) overhangs its 170px white box by 36px of empty padding, which the
     box clips (live parity from 1250 up). Below 1250 the wrapper takes its content's height. */
  body.gw-site.gw-home #page-container .special .text-wrapper { height: auto; padding-bottom: 12px; }
  /* and live's ".special a" (block, 15px bottom padding) also pads the photo link 15px past the 567px photo box */
  body.gw-site.gw-home #page-container .special .image a { padding-bottom: 0; }
  body.gw-site.gw-home #page-container .special .image svg { display: block; }
  /* booking calendar (appended to <body>; mobile_audit cannot see it: build/stage4/calendar_audit.js opens it). Live: white on
     #00becf in the Clear/Close row (1.9:1), #eee day names on #777 (3.9:1), 11px control text, 16px-tall links. */
  body.gw-site #datepicker_div .datepicker_control { background: #00707d; }
  body.gw-site #datepicker_div :is(.datepicker_titleRow, .datepicker_titleRow .datepicker_weekEndCell) { background: #595959; }
  body.gw-site #datepicker_div :is(.datepicker_control, .datepicker_links) { font-size: 14px; }
  body.gw-site #datepicker_div :is(.datepicker_control, .datepicker_links) a { display: inline-block; line-height: 24px; }
  body.gw-site #datepicker_div .datepicker_oneMonth { width: 252px; }
  body.gw-site #datepicker_div td a { line-height: 28px; }
  body.gw-site #datepicker_div .datepicker_header { height: auto; }
  body.gw-site #datepicker_div .datepicker_header select { font-size: 16px; }
  /* captcha question and required notes */
  body.gw-site #page-container .upper-content p.ils-required-note em.required { color: #666666; }
  /* the 14px note is wider than live's 11px one: its box widens to the left, the star stays 541px into the form as on live */
  body.gw-site.page-id-1370 #page-container .upper-content p.ils-required-note { width: 110px; margin-left: 432px; background-position: 109px 7px; }
  /* booking panel: field text is white on navy (12.6:1); the select's options stay dark on white */
  body.gw-site #page-container .bookingform span input, body.gw-site #page-container .bookingform span select { font-size: 16px; }
  /* search page: live's image "go" button is 27 x 23px; padding grows the tap area, the image stays the same size */
  body.gw-site #page-container .form.searchpage input[type="image"] { box-sizing: content-box; padding: 10px 8px; margin: -8px 0 0 0; vertical-align: top; }
}

/* =================== 1170 to 1249: live's layout with the fixed rows fitted =================== */
@media (min-width: 1170px) and (max-width: 1249px) {
  /* 16px booking fields in live's fixed oval: the date needs a little more room */
  body.gw-site #page-container .bookingform em { width: 105px; }
  body.gw-site #page-container .bookingform span input { width: 145px; }
  body.gw-site #page-container .bookingform span select { width: 160px; background-position: 145px 13px; }
  /* the footer is a fixed 264px box (overflow hidden): 14px text needs it to grow */
  body.gw-site #page-container #footer { height: auto; min-height: 264px; }
}

/* =================== below 1170: the reflow (tablet and phone) =================== */
@media (max-width: 1169px) {
  body.gw-site #page-container :is(#header, #feature, .featureimage, .upper-content, .bottom-area-container, .home-center-bg, .home-center-bg-inner, .panel.blog, #footer, .footermenu) { min-width: 0; }
  body.gw-site #page-container .container { width: auto; max-width: 1170px; padding-left: 24px; padding-right: 24px; }
  body.gw-site #page-container .panel .container { padding-left: 0; padding-right: 0; }
  /* home.css pins the Latest Blogs container at 1170px with a home-only selector (one class more specific) */
  body.gw-site.gw-home #page-container .panel.blog .container { width: auto; max-width: 1170px; padding-left: 24px; padding-right: 24px; }
  body.gw-site #page-container :is(.upper-content, .content, #footer) img { max-width: 100%; height: auto; }
  body.gw-site #page-container :is(.upper-content, .content) :is(table, iframe) { max-width: 100%; }
  body.gw-site #page-container :is(.upper-content, .content) :is(h1, h2, h3, h4, p, li, td) { overflow-wrap: break-word; }
  /* live's h2 sits on a 46px line: a title that wraps in a narrower column gets a gap between its lines */
  body.gw-site #page-container :is(.upper-content, .content) h2 { line-height: 1.3; }
  /* blog list, page 2, category and month archive titles (fix round 1, 3.18 N3): live's ".list .entry h2" is 42px while its link is
     24px, so with the 1.3 line above a wrapped title had a 55px line pitch (36px on phones) and read as two headings. The heading takes
     its link's size: two lines 31px apart. Only titles that ARE a link (the apartments room names in .list .entry h2 are 42px text). */
  body.gw-site #page-container .list .entry h2:has(> a) { font-size: 24px; line-height: 1.3; }

  /* ---- header: live's band and logo swoosh; phone number in the band; the menu behind a button ---- */
  body.gw-site #page-container #header { min-width: 0; }
  body.gw-site #page-container #header .container { padding-left: 24px; padding-right: 24px; }
  body.gw-site #page-container #header .logo { margin-left: -146px; }
  /* home.css makes ".container .right" relative, which would turn the open menu into a narrow drawer under the phone number:
     the open menu spans the screen, so it is placed against the header container */
  body.gw-site #page-container #header .right { width: auto; position: static; }
  body.gw-site #page-container #header .phone { margin-left: 0; }
  body.gw-site #page-container .ils-menu-toggle { position: absolute; top: 56px; right: 24px; z-index: 1001; display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 16px;
    border: 0; border-radius: 4px; background: #25315a; color: #ffffff; font: 16px/44px 'robotoregular', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.gw-site #page-container .ils-menu-toggle span, body.gw-site #page-container .ils-menu-toggle span::before, body.gw-site #page-container .ils-menu-toggle span::after {
    display: block; position: relative; width: 18px; height: 2px; background: #ffffff; content: ""; }
  body.gw-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.gw-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.gw-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #1a2342; }
  body.gw-site #page-container .ils-menu-toggle:is(:hover, :focus-visible) { background: #1a2342; }
  body.gw-site #page-container #menu { display: none; position: absolute; top: 106px; left: 0; right: 0; z-index: 1000; font-size: 17px; text-align: left; background: #25315a; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); }
  body.gw-site #page-container #header.ils-menu-open #menu { display: block; }
  /* the header's own layer (live z-index 100) sits under the oval booking panel (999): lift it while the menu is open */
  body.gw-site #page-container #header.ils-menu-open { z-index: 2000; }
  /* live colours every link under the active item #196ca1 (the FAQs sub-item on /contact): white on the navy panel */
  body.gw-site #page-container #menu li.active li a:link, body.gw-site #page-container #menu li.active li a:visited, body.gw-site #page-container #menu li:hover li a:link { color: #ffffff; }
  body.gw-site #page-container #menu > ul { display: block; width: auto; }
  body.gw-site #page-container #menu li { display: block; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
  body.gw-site #page-container #menu li a:link, body.gw-site #page-container #menu li a:visited, body.gw-site #page-container #menu li a:active,
  body.gw-site #page-container #menu li:hover a:link, body.gw-site #page-container #menu li:hover a:visited {
    display: block; padding: 0 24px; line-height: 50px; font-size: 17px; color: #ffffff; background: none; }
  body.gw-site #page-container #menu li a:hover, body.gw-site #page-container #menu li a:focus { color: #ffffff !important; background: #264c76; }
  body.gw-site #page-container #menu li.active > a:link, body.gw-site #page-container #menu li.active > a:visited { background: #264c76; color: #ffffff; }
  body.gw-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: none; }
  body.gw-site #page-container #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  body.gw-site #page-container #menu li ul a:link, body.gw-site #page-container #menu li ul a:visited,
  body.gw-site #page-container #menu li:hover ul a:link, body.gw-site #page-container #menu li:hover ul a:visited { padding: 0 24px 0 44px; line-height: 46px; font-size: 16px; color: #ffffff; }
  body.gw-site #page-container #menu li.alt a:link, body.gw-site #page-container #menu li.alt a:visited, body.gw-site #page-container #menu li.alt a:hover { background: #00707d; color: #ffffff; }

  /* ---- hero and the oval booking panel (kept from live at tablet widths) ---- */
  body.gw-site #page-container #feature { min-width: 0; }
  body.gw-site #page-container .featureimage { min-width: 0; }
  body.gw-site #page-container .bookingbutton .button { padding: 10px 70px; }

  /* ---- content band: live's curves stay centred (the band clips them) ---- */
  body.gw-site #page-container .upper-content { min-width: 0; }
  body.gw-site #page-container .upper-content .left, body.gw-site #page-container .upper-content .right { box-sizing: border-box; }
  body.gw-site #page-container .upper-content .container.split .left, body.gw-site #page-container .upper-content .container.split .right { float: none; width: auto; }
  body.gw-site #page-container .gw-contact-form { width: auto; max-width: 562px; }
  body.gw-site #page-container .gw-contact-form form.et_pb_contact_form { grid-template-columns: 111px minmax(0, 1fr); }
  body.gw-site #page-container .gw-contact-form p.et_pb_contact_field .input { width: auto; max-width: 426px; }

  /* home: welcome text, then the special offer, then the FAQ oval and Latest Blogs */
  body.gw-site.gw-home #page-container .upper-content { min-height: 0; }
  body.gw-site.gw-home #page-container .upper-content .left { float: none; width: auto; margin: 0; }
  body.gw-site.gw-home #page-container .upper-content .right { float: none; width: 600px; max-width: 100%; height: 600px; margin: 10px auto 0; }
  body.gw-site.gw-home #page-container .upper-content .mid-bg { margin-bottom: 260px; }
  body.gw-site.gw-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  body.gw-site.gw-home #page-container .panel.blog li { float: none; width: auto; margin: 0; }
  body.gw-site.gw-home #page-container .panel.blog img { float: none; display: block; width: 100%; height: auto; margin: 0 0 15px; }
  /* the panel's cream curve image is 650px tall: the colour continues under a taller (wrapped) list */
  body.gw-site.gw-home #page-container .panel.blog { background-image: url(/wp-content/uploads/ilaunch/skin/images/curve-bottom-home.png), linear-gradient(#f2f0e7, #f2f0e7);
    background-position: top center, left 0 top 640px; background-size: auto, 100% 100%; background-repeat: no-repeat; }

  /* apartments: photo then text; thumbnails one swipeable row */
  body.gw-site #page-container .list .entry .images { width: 670px; max-width: 100%; }

  /* blog list and post: live's 70/28 columns where they fit */
  body.gw-site:not(.gw-home) #page-container .upper-content .container:not(.split) > .left { width: 68%; }
  body.gw-site:not(.gw-home) #page-container .upper-content .container:not(.split) > .right { width: 28%; }

  /* ---- footer: released from its fixed 264px box; live's three columns, fluid ---- */
  body.gw-site #page-container #footer { height: auto; padding: 60px 0 40px; }
  body.gw-site #page-container #footer .copyright { float: none; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 24px; }
  body.gw-site #page-container #footer .copyright .left { float: none; width: auto !important; }
  body.gw-site #page-container #footer .vcard { float: none; width: auto; padding: 0; }
  body.gw-site #page-container #footer .copyright .right { float: none; }
  body.gw-site #page-container #footer .copyright .right img { display: block; width: 400px; max-width: 100%; height: auto; }
  /* the faded photo is a fixed 454px box (live's footer height): it now spans the released footer exactly */
  body.gw-site #page-container #footer .footer-bg-fade { left: 0; margin-left: 0; width: 100%; top: 0; bottom: 0; height: auto; background-size: cover; }
  body.gw-site #page-container #footer .copyright li { display: inline-block; white-space: nowrap; }
  body.gw-site #page-container .footermenu ul { margin: 8px 16px; }
  body.gw-site #page-container .footermenu li { margin-right: 6px; }
}

/* =================== 768 to 1169: the photo gallery as full rows (fix round 1, 3.18 N2) =================== */
/* live's gallery items are fixed 366px inline boxes (350px photo + 8px navy border). From 768 to 783px two no longer fit the 720px
   column, so /facilities fell to one photo per row with the right half empty, and up to 1151px a two-up row left up to 367px empty.
   A fluid grid instead: two columns from 768, three once three 300px columns fit (960px and up), photos keep live's 8px border.
   Same markup handling as the phone grid below (heading spans the row, the two empty name anchors and line breaks take no cell). */
@media (min-width: 768px) and (max-width: 1169px) {
  body.gw-site #page-container .gallery:not(.room) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px; }
  body.gw-site #page-container .gallery:not(.room) > :is(h3, p) { grid-column: 1 / -1; }
  body.gw-site #page-container .gallery:not(.room) > a:not(.gallery-item) { position: absolute; }
  body.gw-site #page-container .gallery:not(.room) > br { display: none; }
  body.gw-site #page-container .gallery:not(.room) a.gallery-item { display: block; }
  body.gw-site #page-container .gallery:not(.room) a.gallery-item img { display: block; width: 100%; height: auto; box-sizing: border-box; }
}

/* =================== below 1250: no broken footer map (fix round 1, J1: owner's default, DELIBERATE) =================== */
/* live's footer static map is a keyless Google Static Maps URL that Google answers with 403, so every page ends in an empty box with
   a broken-image mark (358 x 263px on a phone). From 1250 up it stays exactly as live prints it (D4, the 1:1 copy). Below 1250, our
   designed band, the box is hidden: it shows nothing a visitor can use (the address is in the column beside it and the contact and
   location pages carry a working map). On tablets the two remaining columns share the row. */
@media (max-width: 1249px) {
  body.gw-site #page-container #footer .copyright > .right:has(> img.map-container) { display: none; }
}
@media (min-width: 768px) and (max-width: 1169px) {
  body.gw-site #page-container #footer .copyright { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* =================== below 980: single column for the side-by-side blocks =================== */
@media (max-width: 979px) {
  /* (same specificity as the 68/28 rule above, which it follows) */
  body.gw-site:not(.gw-home) #page-container .upper-content .container:not(.split) > .left, body.gw-site:not(.gw-home) #page-container .upper-content .container:not(.split) > .right { float: none; width: auto; }
  body.gw-site #page-container .upper-content .container > .right { margin-top: 24px; }
  body.gw-site.gw-home #page-container .upper-content .container > .right { margin-top: 10px; width: 600px; max-width: 100%; }
  body.gw-site #page-container .list .entry .images { float: none; width: auto; margin: 0 0 20px; }
  body.gw-site #page-container .list .entry .images > img { display: block; width: 100%; height: auto; }
  body.gw-site #page-container .gallery.room { display: flex; gap: 8px; padding: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  body.gw-site #page-container .gallery.room a { flex: 0 0 auto; scroll-snap-align: start; }
  body.gw-site #page-container .gallery.room a img { display: block; margin: 0; }
}

/* =================== phone: below 768 =================== */
@media (max-width: 767px) {
  body.gw-site #page-container .container, body.gw-site.gw-home #page-container .panel.blog .container { padding-left: 16px; padding-right: 16px; }

  /* header: the logo swoosh at 61%, the phone number in the navy band, the menu button in the white band */
  body.gw-site #page-container #header-bg { height: 76px; }
  body.gw-site #page-container #header-bg .upper-bg { height: 27px; }
  body.gw-site #page-container #header .container { padding-left: 16px; padding-right: 16px; }
  body.gw-site #page-container #header .logo { width: 280px; margin-left: -89px; }
  body.gw-site #page-container #header .logo img { display: block; width: 280px; height: auto; }
  body.gw-site #page-container #header .phone { position: absolute; top: 0; right: 16px; float: none; margin: 0; padding-left: 28px; font-size: 15px; line-height: 27px; background-size: 19px auto; }
  body.gw-site #page-container .ils-menu-toggle { top: 30px; right: 16px; }
  body.gw-site #page-container #menu { top: 76px; }
  body.gw-site #page-container #menu li a:link, body.gw-site #page-container #menu li a:visited, body.gw-site #page-container #menu li a:active,
  body.gw-site #page-container #menu li:hover a:link, body.gw-site #page-container #menu li:hover a:visited { padding: 0 16px; }
  body.gw-site #page-container #menu li ul a:link, body.gw-site #page-container #menu li ul a:visited,
  body.gw-site #page-container #menu li:hover ul a:link, body.gw-site #page-container #menu li:hover ul a:visited { padding: 0 16px 0 36px; }
  body.gw-site #page-container #feature { margin-top: -15px; }

  /* hero: shorter photo; the booking panel becomes a stacked block under it */
  body.gw-site #page-container .featureimage { height: 210px; }
  body.gw-site #page-container .featuremain, body.gw-site #page-container .featuremain li, body.gw-site #page-container .featuremain li img { height: 240px !important; }
  body.gw-site #page-container .featuremain li img { width: 100% !important; object-fit: cover; }
  body.gw-site #page-container #booking { position: relative; bottom: auto; left: auto; width: auto; height: auto; margin: 0; padding: 18px 16px 22px; border-radius: 0; z-index: 5; }
  body.gw-site #page-container #booking h3 { font-size: 26px; line-height: 30px; margin: 0; padding: 0 0 14px; }
  body.gw-site #page-container .bookingform { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 0; }
  body.gw-site #page-container .bookingform > .clearboth, body.gw-site #page-container .bookingform > .clearleft { display: none; }
  body.gw-site #page-container .bookingform span.check-in, body.gw-site #page-container .bookingform span.duration {
    float: none; display: flex; align-items: center; margin: 0; padding: 0 8px 0 0; height: 50px; line-height: 50px; }
  body.gw-site #page-container .bookingform em { flex: 0 0 auto; width: 118px; padding-left: 12px; font-size: 15px; }
  /* the calendar plugin wraps the date field (and its calendar icon) in span.datepicker_wrap: that is the flex item that must shrink */
  body.gw-site #page-container .bookingform .datepicker_wrap { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; float: none; }
  body.gw-site #page-container .bookingform span input { flex: 1 1 auto; width: auto; min-width: 0; height: 40px; }
  body.gw-site #page-container .bookingform .datepicker_wrap > :not(input) { flex: 0 0 auto; margin: 0 6px 0 4px; }
  body.gw-site #page-container .bookingform span select { flex: 1 1 auto; width: auto; min-width: 0; height: 46px; background-position: right 6px center; }
  body.gw-site #page-container .bookingbutton { margin-top: 4px; }
  body.gw-site #page-container .bookingbutton .button { display: block; width: 100%; height: 52px; padding: 0 20px; font-size: 20px; }

  /* content band: starts under the booking block; the bottom curve scaled to the screen */
  body.gw-site #page-container .upper-content { margin-top: 0; overflow: hidden; }
  body.gw-site #page-container .upper-content .upper-bg { display: none; }
  body.gw-site #page-container .upper-content .mid-bg { margin-top: 0; margin-bottom: 30px; padding-top: 24px; padding-bottom: 8px; }
  /* the curve image has a transparent strip along its top edge (hidden behind the cream band on live): overlap the band by 10px */
  body.gw-site #page-container .upper-content .lower-bg { left: 0; margin-left: 0; width: 100%; height: 40px; bottom: 0; background-size: 100% 40px; }

  /* type: headings scaled down, nothing under 14px */
  body.gw-site #page-container .upper-content h1 { font-size: 32px; line-height: 36px; margin-bottom: 20px; }
  body.gw-site #page-container .upper-content h2, body.gw-site #page-container .content h2 { font-size: 24px; line-height: 30px; margin: 24px 0 8px; }
  body.gw-site #page-container .upper-content h3 { font-size: 20px; line-height: 26px; }
  body.gw-site #page-container .upper-content h4 { font-size: 20px; line-height: 26px; }
  body.gw-site #page-container :is(.upper-content, .content) p { margin: 14px 0; }
  body.gw-site #page-container :is(.upper-content, .content) :is(p, h1, h2, h3, h4, li, td):not(.special *) { text-align: left !important; }
  body.gw-site #page-container .content { padding: 24px 0 16px; }

  /* home */
  body.gw-site.gw-home #page-container .upper-content h3:first-child { font-size: 22px; }
  body.gw-site.gw-home #page-container .upper-content h1 { font-size: 36px; line-height: 42px; margin: 0; }
  body.gw-site.gw-home #page-container .upper-content h2 { font-size: 21px; line-height: 27px; margin: 6px 0 0; }
  body.gw-site.gw-home #page-container .upper-content .container > .right { height: auto; aspect-ratio: 600 / 587; }
  /* the offer box scales with the screen. The white text box sits in the flow at the bottom (flex end) so the heading can be
     placed against the whole box (on live it hangs 350px above the text box); the photo goes under it in the box's own layer. */
  body.gw-site.gw-home #page-container .special { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    width: 100%; height: auto; aspect-ratio: 600 / 567; margin-top: 10px; }
  body.gw-site.gw-home #page-container .special .image { z-index: -1; }
  body.gw-site.gw-home #page-container .special .image, body.gw-site.gw-home #page-container .special .image svg { width: 100%; height: auto; }
  body.gw-site.gw-home #page-container .special .special-top-bg { width: 74.5%; height: 23.6%; background-size: contain; }
  body.gw-site.gw-home #page-container .special h3 { top: 7%; right: 2.5%; font-size: 22px; line-height: 28px; }
  body.gw-site.gw-home #page-container .special .text { position: static; width: 80%; height: auto; margin: 0; }
  body.gw-site.gw-home #page-container .special .text-wrapper { width: auto; height: auto; padding: 12px 10px 14px; }
  body.gw-site.gw-home #page-container .special .button { padding: 10px 30px; }
  body.gw-site.gw-home #page-container .upper-content .mid-bg { margin-bottom: 40px; }
  body.gw-site.gw-home #page-container .home-center-bg, body.gw-site.gw-home #page-container .home-center-bg-inner { display: none; }
  body.gw-site.gw-home #page-container .home-faq { position: relative; top: auto; left: auto; width: auto; max-width: 300px; height: auto; margin: 0 auto; padding: 34px 24px 30px; }
  body.gw-site.gw-home #page-container .home-faq-bg { width: 100%; height: 100%; background-size: cover; }
  body.gw-site.gw-home #page-container .home-faq p { font-size: 22px; line-height: 28px; margin: 0; }
  body.gw-site.gw-home #page-container .panel.blog { padding: 70px 0 36px; }
  body.gw-site.gw-home #page-container .panel.blog h3 { font-size: 28px; line-height: 34px; margin-bottom: 18px; }
  body.gw-site.gw-home #page-container .panel.blog ul { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }

  /* apartments and galleries */
  body.gw-site #page-container .list .entry { margin: 10px 0 40px; }
  body.gw-site #page-container .list .entry h2 { font-size: 28px; line-height: 34px; }
  body.gw-site #page-container .gallery:not(.room) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 36px; }
  body.gw-site #page-container .gallery:not(.room) > :is(h3, p) { grid-column: 1 / -1; margin: 0; }
  body.gw-site #page-container .gallery:not(.room) > a:not(.gallery-item) { position: absolute; }
  body.gw-site #page-container .gallery:not(.room) > br { display: none; }
  body.gw-site #page-container .gallery:not(.room) a.gallery-item img { display: block; width: 100%; height: auto; box-sizing: border-box; border-width: 4px; }

  /* blog list, post, sidebar */
  body.gw-site #page-container .blog-image { float: none; display: block; margin: 4px 0 14px; max-width: 100%; height: auto; }
  body.gw-site #page-container .panel { padding: 20px 0; }
  body.gw-site #page-container .panel h3 { font-size: 24px; margin-bottom: 16px; }
  body.gw-site #page-container .panel li { margin: 14px 0; }

  /* contact and review forms: label over a full-width field */
  body.gw-site #page-container .gw-contact-form { max-width: none; }
  body.gw-site #page-container .gw-contact-form form.et_pb_contact_form { grid-template-columns: minmax(0, 1fr); }
  body.gw-site #page-container .gw-contact-form .et_pb_contact_form_label { grid-column: 1; padding: 8px 0 4px; font-size: 15px; }
  body.gw-site #page-container .gw-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { position: static; display: inline-block; margin-left: 6px; vertical-align: -2px; }
  body.gw-site #page-container .gw-contact-form p.et_pb_contact_field .input { grid-column: 1; width: 100%; max-width: none; height: 48px; margin: 0 0 6px; }
  body.gw-site #page-container .gw-contact-form p.et_pb_contact_field textarea.input { height: 140px; margin-bottom: 6px; }
  body.gw-site #page-container .gw-contact-form .et_pb_contact_right p.clearfix { grid-column: 1; min-height: 0; padding: 8px 0 12px; font-size: 16px; line-height: 48px; background-position: right 16px; }
  body.gw-site #page-container .gw-contact-form input.et_pb_contact_captcha { width: 90px; height: 48px; }
  body.gw-site #page-container .et_pb_section .gw-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { grid-column: 1; justify-self: stretch; width: 100%; height: 52px; margin: 4px 0 0 !important; padding: 0 20px !important; font-size: 20px !important; line-height: 52px !important; }
  body.gw-site #page-container .upper-content p.ils-required-note,
  body.gw-site.page-id-1370 #page-container .upper-content p.ils-required-note { width: auto; height: auto; max-width: none; margin: 10px 0 20px; padding: 0 22px 0 0; text-align: left; background-position: left 112px top 3px; }
  body.gw-site.page-id-1370 #page-container .upper-content p.ils-required-note em.required { float: none; display: inline; }
  body.gw-site #page-container .upper-content p.ils-required-note { background: none; }
  body.gw-site #page-container .upper-content p.ils-required-note em.required { padding-right: 22px; background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat right 1px; }

  /* search: the field and live's "go" button on one row, both 45px tall */
  body.gw-site #page-container table.form.searchpage, body.gw-site #page-container table.form.searchpage tbody, body.gw-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.gw-site #page-container table.form.searchpage td { display: flex; align-items: center; gap: 8px; width: auto; padding: 8px 0; }
  body.gw-site #page-container .form.searchpage input.clicknclear { float: none; flex: 1 1 auto; min-width: 0; width: auto; height: 45px; margin: 0; box-sizing: border-box; }
  body.gw-site #page-container .form.searchpage input[type="image"] { flex: 0 0 auto; margin: 0; }
  /* footer: one column */
  body.gw-site #page-container #footer { padding: 36px 0 28px; }
  body.gw-site #page-container #footer .copyright { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  body.gw-site #page-container #footer .copyright .right img { width: 100%; }
  body.gw-site #page-container #footer .copyright ul { margin-bottom: 8px !important; }
  body.gw-site #page-container #footer .copyright li { display: inline-block; }
  body.gw-site #page-container .footermenu ul { margin: 6px 16px 10px; }
  body.gw-site #page-container .footermenu li { display: block; background: none; margin: 0; padding: 0; }
  body.gw-site #page-container .footermenu a { display: inline-block; padding: 7px 0; }
}

/* =================== narrow phones (320 to 379): the booking labels give the date field room for "Click for calendar" =================== */
@media (max-width: 379px) {
  body.gw-site #page-container .bookingform em { width: 100px; padding-left: 10px; font-size: 14px; }
  body.gw-site #page-container .bookingform span input { padding-left: 4px; }
  body.gw-site #page-container .bookingform span select { padding-left: 4px; }
}

/* =================== phone: the booking calendar (appended to <body>) at a usable size =================== */
@media (max-width: 767px) {
  body.gw-site #datepicker_div { width: calc(100vw - 32px) !important; left: 16px !important; font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); z-index: 100001 !important; }
  body.gw-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.gw-site #datepicker_div .datepicker_control a, body.gw-site #datepicker_div .datepicker_links a { display: block; padding: 0 12px !important; line-height: 42px; font-size: 15px; }
  body.gw-site #datepicker_div .datepicker_control, body.gw-site #datepicker_div .datepicker_links { padding: 0; }
  body.gw-site #datepicker_div .datepicker_header select { font-size: 16px; height: 36px; padding: 0 6px; }
  body.gw-site #datepicker_div td { font-size: 16px !important; height: 42px; line-height: 42px; }
  body.gw-site #datepicker_div td a { line-height: 42px; }
}