/* ==================================================================================================
   Sunny Orange Stays: open-foldable tier (2026-10-30)
   Rules for 641-1023px screens, written for the iPhone Duo inner display (669x951 held upright, 951x590 on its
   side) and similar shapes. Upright = 641-800px, sideways = 801-1023px, with max-height:700px when the problem is
   the short screen. Phones (640 and under) and desktop (1024 and up) are untouched. Enqueued last from
   functions.php ("sos-foldables"); every selector starts with `html` so it outranks the page templates' inline
   <style> blocks and the component stylesheets printed in the footer. Section order matters where the same hero
   class is padded in more than one block: the later block wins.
   ================================================================================================== */

/* ===== Group B (2026-10-30): property detail, condos and resorts, location pages, snowbird =====
   Upright Duo = 669x951 (641-800px tier), sideways Duo = 951x590 (801-1023px tier, max-height 700 when height is the issue).
   Every selector carries an `html ` prefix so these rules beat the page-template <style> blocks and the component
   stylesheets that print after this file. */

/* ---- Property detail page ---- */
@media (min-width:641px) and (max-width:800px) {
    /* The 3-up featured amenities left the fourth tile alone on its own row; four fit at this width. */
    html .sos-amenities-featured { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width:641px) and (max-width:1023px) and (max-height:700px) {
    /* Sideways the fixed header (100), the sticky section tabs (52) and the bottom booking bar (71) left 367px of
       a 590px screen for content. The tabs scroll with the page and the bar is trimmed. */
    html .sos-detail-nav { position: static; }
    html .sos-mbar { padding: 8px 16px; }
    html .sos-mbar__btn { padding: 10px 20px; }
    html #sos-main { padding-bottom: 60px; }
}

/* ---- Condos and resorts ---- */
@media (min-width:641px) and (max-width:800px) {
    /* The grid dropped to one column under 681px, so each building card ran 620px tall at 669 wide. */
    html .cdr-grid, html .cdr-grid--small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width:641px) and (max-width:1023px) and (max-height:700px) {
    /* 62vh hero with centred text put the title under the 131px logo circle on the sideways screen. */
    html .cdr-hero { min-height: 0; }
    html .cdr-hero__content { padding-top: 150px; padding-bottom: 96px; }
    html .cdr-hero__title { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
}

/* ---- Location and browse pages (Clearwater Beach etc.; the same hero is used on /contact) ---- */
@media (min-width:641px) and (max-width:800px) {
    /* Cards are minmax(320px) which only fits one column at 669; two 300px cards fit. */
    html .sos-browse-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
}
@media (min-width:641px) and (max-width:1023px) and (max-height:700px) {
    /* The eyebrow badge sat half under the logo circle sideways. */
    html .sos-browse-hero { min-height: 0; }
    html .sos-browse-hero__content { padding-top: 150px; padding-bottom: 96px; }
}

/* ---- Snowbird rentals ---- */
@media (min-width:641px) and (max-width:1023px) and (max-height:700px) {
    html .sn-hero { min-height: 0; }
    html .sn-hero__content { padding-top: 150px; padding-bottom: 80px; }
    html .sn-hero__title { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
}

/* ==== GROUP A: search and booking pages, iPhone Duo inner display (669x951 upright, 951x590 on its side) ==== */

/* ---- /properties/ (plain, dated, map view) ---- */
/* Upright: the card grid's 320px minimum left one giant card per row; two per row at this width. Hero trimmed. */
@media (min-width:641px) and (max-width:800px) {
    html .sos-properties-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
/* On its side: these heroes start at the top of the page behind the fixed 100px header, and their centred
   content slid up under the logo circle (which hangs to 131px). Pad the content past the circle, smaller type,
   and let the hero be only as tall as its content. */
@media (min-width:801px) and (max-width:1023px) and (max-height:700px) {
    html .sos-browse-hero { min-height: 0; }
    html .sos-browse-hero__content { padding: 150px 24px 70px; max-width: 760px; }
    html .sos-browse-hero__title { font-size: 1.9rem; margin-bottom: 10px; }
    html .sos-browse-hero__sub { font-size: 0.95rem; margin-bottom: 0; }
}

/* Map view (both orientations): the zoom control sat at the top of the map slot, which runs behind the overlay's
   header, so it covered the Close button. Drop it below the header. */
@media (min-width:641px) and (max-width:1023px) {
    html .sos-mobile-map-overlay .sos-mapctl { top: 76px; }
}

/* ---- /trip-planner/ ---- */
@media (min-width:801px) and (max-width:1023px) and (max-height:700px) {
    html .sos-tp-hero { min-height: 0; }
    html .sos-tp-hero__content { padding: 150px 24px 70px; max-width: 760px; }
    html .sos-tp-hero__title { font-size: 1.9rem; margin-bottom: 10px; }
    html .sos-tp-hero__sub { font-size: 0.95rem; }
}

/* ---- /compare/ ---- */
@media (min-width:801px) and (max-width:1023px) and (max-height:700px) {
    html .sos-cmp-hero { min-height: 0; }
    html .sos-cmp-hero__content { padding: 150px 24px 66px; max-width: 760px; }
    html .sos-cmp-hero__title { font-size: 1.9rem; margin-bottom: 8px; }
    html .sos-cmp-hero__sub { font-size: 0.95rem; }
}

/* ---- /discover/ ---- */
/* On its side the two-up party cards (4:3 art) were taller than the screen and hid under the sticky footer bar;
   four across fit in one screen with the step title. */
@media (min-width:801px) and (max-width:1023px) and (max-height:700px) {
    html .sd__parties { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

/* ==================================================================================================
   GROUP C: content pages (about, contact, faq, policies, join, area guide, events, blog, site map, refund)
   Upright Duo = 641-800px, sideways Duo = 801-1023px (and short). Selectors carry an `html` prefix so
   they beat the page templates' own inline <style> blocks, which print later in the document.
   ================================================================================================== */

/* --- Every page with a centred hero, Duo on its side (951x590): the fixed logo circle hangs to 131px and
       the hero centred its badge or title right under it. Push the hero content down to clear the logo. --- */
@media (min-width:801px) and (max-width:1023px) and (max-height:700px) {
    html .sos-browse-hero__content { padding-top: 156px; }           /* about, contact, faq, blog, refund (refund and contact carry a badge above the title) */
    html .sos-ag-hero__content { padding-top: 88px; }                /* area guide */
    html .evp-hero__content { padding-top: 168px; }                  /* events: clamp(100px,15vh,160px) resolved to 100px */
    html .smp-hero { padding-top: 180px; }                           /* site map: clamp(120px,17vh,180px) resolved to 120px */
    html .jp-hero--owner .jp-hero__content { padding-top: 72px; }    /* join (owner services) */
}

/* --- About --- */
@media (min-width:641px) and (max-width:800px) {
    /* four stat tiles in one row wrapped "On Google with 143 reviews" over four lines: two by two instead */
    html .sos-about-stats { display: grid; grid-template-columns: 1fr 1fr; }
    html .sos-about-stat-card { min-width: 0; }
}
@media (min-width:801px) and (max-width:1023px) {
    /* three team cards per row stood taller than the 590px screen: four per row */
    html .sos-about-team { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

/* --- Contact --- */
@media (min-width:641px) and (max-width:800px) {
    /* the phone layout stacked first/last name and listed the five info cards one per row across 669px */
    html .sos-contact-form__row { grid-template-columns: 1fr 1fr; }
    html .sos-contact-info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    html .sos-contact-info-cards > .sos-contact-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width:801px) and (max-width:1023px) {
    /* six social icons wrapped five plus one inside the narrow info column */
    html .sos-contact-social { gap: 8px; }
    html .sos-contact-social a { width: 32px; height: 32px; }
}

/* --- Area guide --- */
@media (min-width:641px) and (max-width:800px) {
    /* the phone tier's single column left one card (with a 600px image) per screen; two-up fits 669px */
    html .sos-ag-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    html .sos-ag-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }   /* the section link cards (Beaches, Dining, ...) */
    html .sos-ag-card-link__img { height: 200px; }
    html .sos-ag-dining-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    html .sos-ag-tips { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}