/* Styles for property/coral-cabana-of-bradenton.html only. */

/* gallery-top */
.gl-wrap { max-width: 1200px; margin: 0 auto; padding: 88px 4rem 0; }
  .gl-grid { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 470px; border-radius: 14px; overflow: hidden; }
  .gl-main { grid-row: 1 / 3; position: relative; overflow: hidden; cursor: pointer; }
  .gl-thumb { position: relative; overflow: hidden; cursor: pointer; }
  .gl-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
  .gl-main:hover img, .gl-thumb:hover img { transform: scale(1.03); }
  .gl-badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; background: #fff; color: #244B48; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; padding: 0.4rem 0.8rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
  .gl-showall { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.94); color: #1A3330; border: 1px solid rgba(26,51,48,0.18); border-radius: 10px; padding: 0.6rem 1rem; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
  .gl-showall:hover { background: #fff; }
  .gl-showall svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  @media (max-width: 960px) { .gl-wrap { padding: 80px 1.5rem 0; } }
  @media (max-width: 700px) { .gl-grid { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 300px; } .gl-thumb { display: none; } .gl-main { grid-row: 1; } }

  .photo-modal { z-index: 700; }
  .ap-overlay { display: none; position: fixed; inset: 0; z-index: 600; background: #FFFFFF; overflow-y: auto; }
  .ap-overlay.open { display: block; }
  .ap-top { position: sticky; top: 0; z-index: 2; background: rgba(254,252,248,0.96); padding: 0.9rem 1.5rem; }
  .ap-back { background: none; border: 0; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #1A3330; padding: 0.4rem 0.2rem; }
  .ap-back:hover { color: #244B48; text-decoration: underline; }
  .ap-inner { max-width: 960px; margin: 0 auto; padding: 0.5rem 1.5rem 4rem; }
  .ap-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.7rem; color: #1A3330; margin-bottom: 1.2rem; }
  .ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ap-grid .ap-item { position: relative; overflow: hidden; border-radius: 10px; cursor: pointer; background: #e9eeed; aspect-ratio: 4 / 3; }
  .ap-grid .ap-item.wide { grid-column: 1 / 3; aspect-ratio: 3 / 2; }
  .ap-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
  .ap-grid .ap-item:hover img { transform: scale(1.02); }
  @media (max-width: 600px) { .ap-grid { grid-template-columns: 1fr; } .ap-grid .ap-item, .ap-grid .ap-item.wide { grid-column: 1; aspect-ratio: 3 / 2; } }

/* widget-light */
.widget-outer { background: #fff; border: 1px solid rgba(26,51,48,0.12); border-radius: 14px; box-shadow: 0 6px 24px rgba(27,59,59,0.08); }
  .widget-header { background: #fff !important; padding: 1.4rem 1.5rem 1rem; border-bottom: 0; }
  .widget-header .wh-from, .widget-header .wh-night { color: #657A77 !important; }
  .widget-header .wh-price { color: #1A3330 !important; font-weight: 400; }
  .widget-header .wh-rating { color: #657A77 !important; }
  .widget-header .wh-stars { color: #C9A227 !important; }
  .widget-header .wh-left > div[style*="rgba(255,255,255,0.6)"], .widget-header .wh-left > div[style*="rgba(255,255,255,0.4)"] { color: #657A77 !important; }
  .widget-header .wh-left > div[style*="display:flex"] span { background: #F3F6F5 !important; color: #1A3330 !important; border: 1px solid rgba(26,51,48,0.12) !important; }
  .widget-header .wh-badge { background: #EEF5F4 !important; border: 1px solid rgba(36,75,72,0.25) !important; color: #244B48 !important; }
  .widget-outer > div[style*="sea-pale"] { background: #fff !important; border-bottom: 0 !important; border-top: 1px solid rgba(26,51,48,0.08); padding: 0.7rem 1.5rem !important; }
  .widget-outer > div[style*="sea-pale"] span:last-child { color: #657A77 !important; font-weight: 400 !important; }
  .widget-iframe-wrap { background: #fff; }

/* widget-minimal */
.widget-header { padding: 1.4rem 1.5rem 0.4rem !important; }
  .widget-header .wh-title { font-family: 'DM Sans', sans-serif; font-size: 1.2rem; font-weight: 500; color: #1A3330; }

/* spotify-light */
.spc-card { background: #fff; border: 1px solid rgba(26,51,48,0.12); border-radius: 14px; box-shadow: 0 6px 24px rgba(27,59,59,0.08); }
  .spc-header { background: #fff; border-bottom: 1px solid rgba(26,51,48,0.08); }
  .spc-eyebrow { color: #B8845A; }
  .spc-title { color: #1A3330; }
  .spc-sub { color: #657A77; }
  .spc-desc { color: #657A77; }
  .spc-tracks { scrollbar-color: rgba(36,75,72,0.3) transparent; }
  .spc-tracks::-webkit-scrollbar-thumb { background: rgba(36,75,72,0.3); }
  .spc-track:hover { background: #F3F6F5; }
  .spc-track-num { color: #9aa8a6; }
  .spc-track-title { color: #1A2E2B; }
  .spc-track-artist { color: #657A77; }
  .spc-more { color: #8a9896; }
  .spc-qr { opacity: 1; box-shadow: 0 1px 6px rgba(27,59,59,0.18); border: 1px solid rgba(26,51,48,0.1); }
  .spc-qr-label { color: #8a9896; }
  .spc-btn { background: #5DB8AA; color: #fff; border-radius: 10px; }
  .spc-btn:hover { background: #4A9E92; transform: none; }
  .spc-footer { color: #8a9896; }
  .spc-cover { border-radius: 10px; }

/* widget-noscroll */
.widget-iframe-wrap { overflow: hidden; }
  @media (min-width: 961px) { .page-layout { grid-template-columns: 1fr 300px; gap: 3rem; } .spc-header { grid-template-columns: 88px 1fr; } .spc-cover { width: 88px; height: 88px; } .spc-qr { width: 64px; height: 64px; } }

/* prop-title-fit */
.prop-title { font-size: clamp(2.3rem, 4.6vw, 3.4rem) !important; line-height: 1.1; }

/* prop-header */
.prop-eyebrow { font-size: 0.78rem; letter-spacing: 0.2em; font-weight: 600; color: #3b4a48; margin-bottom: 0.7rem; }
  .prop-title { margin-bottom: 1.1rem !important; }
  .ph-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; font-size: 0.98rem; color: #1A2E2B; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(26,51,48,0.14); }
  .ph-item { display: inline-flex; align-items: center; gap: 0.5rem; }
  .ph-item svg { width: 22px; height: 22px; stroke: #3b4a48; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .ph-dot { color: #9aa8a6; }
  .ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid rgba(26,51,48,0.14); margin-bottom: 2rem; }
  .ph-stat { display: flex; flex-direction: column; gap: 0.35rem; }
  .ph-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: #3b4a48; }
  .ph-value { font-size: 1.1rem; font-weight: 600; color: #1A2E2B; }
  @media (max-width: 560px) { .ph-stats { grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; } .ph-value { font-size: 0.95rem; } .ph-label { letter-spacing: 0.1em; } }

/* no-emoji */
.sleep-icon, .diff-icon, .loc-icon, .rule-icon, .amenity-item-row .icon, .perfect-for .pf-icon { display: none !important; }
  .amenity-item-row, .rule-item { position: relative; padding-left: 1rem; }
  .amenity-item-row::before, .rule-item::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: #C4956A; }
  .diff-item { border-top: 2px solid #C4956A; }
  .sleep-card, .loc-item { }

/* edge-align */
/* Logo and page content share one left edge: a 1200px column, centered. Desktop only. */
  @media (min-width: 901px) {
    nav { padding-left: max(2rem, calc((100% - 1200px) / 2)) !important; padding-right: max(2rem, calc((100% - 1200px) / 2)) !important; }
    body > :is(section, div, main, header):not(.mobile-menu):not(.photo-modal):not(.ap-overlay):not(.hb-modal):not([class*="modal"]):not([class*="promo"]):not([id*="odal"]):not([id*="romo"]):not([id*="popup"]) {
      padding-left: max(2rem, calc((100% - 1200px) / 2)) !important;
      padding-right: max(2rem, calc((100% - 1200px) / 2)) !important;
    }
    body > :is(section, div, main, header)[style*="max-width"], .blog-wrap, .gl-wrap, .page-layout { max-width: none !important; }
    .blog-wrap, .gl-wrap, .page-layout { padding-left: max(2rem, calc((100% - 1200px) / 2)) !important; padding-right: max(2rem, calc((100% - 1200px) / 2)) !important; }
  }

/* ph-same-size */
.ph-label, .ph-value { font-size: 0.95rem !important; }
  .ph-label { letter-spacing: 0.1em; }
  @media (max-width: 560px) { .ph-label, .ph-value { font-size: 0.82rem !important; } .ph-label { letter-spacing: 0.06em; } }

/* titles-mono */
/* Single-color titles: the accent word inherits the heading color */
  h1 em, h2 em, h3 em, h1 i, h2 i, h3 i, .hero-h1 em, .section-title em, .page-hero-title em { color: inherit !important; }

/* a11y-contrast */
/* a11y: raises text contrast to WCAG AA 4.5:1. Delete this block to revert. */
.loc-item:nth-child(1) > div > .loc-dist{color:#607472 !important}
.loc-item:nth-child(2) > div > .loc-dist{color:#607472 !important}
.loc-item:nth-child(3) > div > .loc-dist{color:#607472 !important}
.loc-item:nth-child(4) > div > .loc-dist{color:#607472 !important}
.loc-item:nth-child(5) > div > .loc-dist{color:#607472 !important}
.loc-item:nth-child(6) > div > .loc-dist{color:#607472 !important}
.active > .rcf-header > div:nth-child(2) > .rcf-date{color:#607472 !important}
.active > .rcf-source{color:#607472 !important}
.spc-eyebrow{color:#986842 !important}
.spc-qr-label{color:#697775 !important}
.spc-footer{color:#697775 !important}
.ft-fine{color:#8e9493 !important}

/* prop-faq-css */
.faq-list{border-top:1px solid var(--sand-dark)}
.faq-item{border-bottom:1px solid var(--sand-dark);padding:.15rem 0}
.faq-item summary{cursor:pointer;list-style:none;padding:.95rem 2rem .95rem 0;font-weight:500;color:var(--dusk);position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:.3rem;top:.85rem;font-size:1.3rem;color:var(--sea);line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:0 0 1rem;color:var(--text-muted);line-height:1.7;max-width:62ch}
.faq-item summary:focus-visible{outline:2px solid var(--sea);outline-offset:2px}

.faq-more{margin-top:1.2rem;color:var(--text-muted)}.faq-more a{color:var(--sea);text-decoration:underline}

.review-summary{margin:.2rem 0 1.2rem;color:var(--text-muted);font-size:.95rem}.review-summary strong{color:var(--dusk);font-weight:600}

/* Make right column sticky on desktop */
  .right-col { position: sticky; top: 90px; align-self: start; }
  @media (max-width: 960px) { .right-col { position: static; } .spotify-sidebar iframe { height: 280px; } }

  /* ── SHARE DROPDOWN ── */
  .share-wrap { position: relative; }
  .share-dropdown {
    display: none; position: absolute; top: calc(100% + 0.5rem); right: 0;
    background: var(--white); border: 1px solid var(--sand-dark); border-radius: 4px;
    box-shadow: 0 8px 32px rgba(27,59,59,0.12); min-width: 200px; z-index: 300;
    overflow: hidden;
  }
  .share-dropdown.open { display: block; }
  .share-option {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    font-size: 0.82rem; color: var(--text); text-decoration: none; cursor: pointer;
    transition: background 0.15s; border: none; background: none; width: 100%;
    font-family: 'DM Sans', sans-serif; text-align: left;
  }
  .share-option:hover { background: var(--sea-pale); color: var(--sea); }
  .share-option + .share-option { border-top: 1px solid var(--sand-dark); }
  .share-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; color: white; }
  .si-fb    { background: #1877F2; }
  .si-ig    { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
  .si-link  { background: var(--sea); }
  .si-email { background: var(--shore); }
  .share-copied { font-size: 0.72rem; color: var(--sea); text-align: center; padding: 0.4rem 1rem; background: var(--sea-pale); border-top: 1px solid rgba(42,122,122,0.15); display: none; }