/* HSA new site - the small component set the authored pages use (pages.php).
 *
 * Loaded only by the pages that need it (the layout loads $page['css2'] when set), so it
 * never touches the catalogue pages. It uses the design's own tokens - --ink, --ink-muted,
 * --accent, --surface, --surface-2, --rule, --radius, --body-font, --label-font - and adds
 * no colour of its own. Everything is sized so a list can grow to dozens of records
 * (the dealer page) without breaking.
 */

/* a responsive card grid: 1 column on a phone, up to 3 on a wide screen */
.pgrid{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:18px;
        grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.pcard{ margin:0; padding:22px 22px 20px; border:1px solid var(--rule); border-radius:var(--radius);
        background:var(--surface); }
.pcard h3{ font-family:var(--display-font); font-size:var(--fs-h3,#1.2rem); margin:0 0 10px; }
.pcard p{ margin:0 0 4px; font-size:15px; line-height:1.5; }
.pcard .k{ display:block; font-family:var(--label-font); font-size:var(--fs-label,.72rem);
           letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px; }
.pcard .terr{ color:var(--ink-muted); }
.pcard .contact{ color:var(--ink-muted); }
.pcard .web a{ word-break:break-word; }
.pcard a{ color:var(--accent-text,var(--accent)); text-decoration:none; }
.pcard a:hover{ text-decoration:underline; }

/* a label/value facts strip */
.facts{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:1px;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
        background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.facts li{ background:var(--surface); padding:18px 18px 16px; }
.facts .k{ display:block; font-family:var(--label-font); font-size:var(--fs-label,.72rem);
           letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:6px; }
.facts .v{ display:block; font-size:16px; }

/* the rooms tiles */
.tiles{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px;
        grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); }
.tiles li{ padding:14px 16px; border:1px solid var(--rule); border-radius:var(--radius);
           background:var(--surface); font-size:15px; }

/* a ticked feature list */
.ticks{ list-style:none; margin:22px 0 0; padding:0; }
.ticks li{ position:relative; padding:8px 0 8px 30px; border-bottom:1px solid var(--rule); font-size:16px; }
.ticks li:last-child{ border-bottom:0; }
.ticks li:before{ content:""; position:absolute; left:2px; top:15px; width:12px; height:7px;
                  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
                  transform:rotate(-45deg); }

/* a callout */
.notice{ margin:22px 0 0; padding:18px 20px; border-left:3px solid var(--accent);
         background:var(--surface-2); border-radius:0 var(--radius) var(--radius) 0; font-size:16px; }

/* the "still being built" notice on the dealer page (owner 2026-10-30). It reads as a
   message, not as another page section: a heading, a few short paragraphs, a line of
   contact detail. */
.buildnote h2{ font-family:var(--display-font); font-size:var(--fs-h3,1.2rem); margin:0 0 12px; }
.buildnote p{ margin:0 0 12px; max-width:70ch; font-size:16px; line-height:1.55; }
.buildnote p:last-child{ margin-bottom:0; }
.buildnote .reach{ color:var(--ink-muted); }

/* the contact form (owner 2026-10-30). A plain two-up field grid that collapses to one
   column on a phone. It posts nothing: pages.php hands the composed mailto: to the
   visitor's own mail client, so there is no endpoint and no third-party script.
   Two columns, not three: the fields are Topic / Name / Email / Company, and a
   three-column grid leaves Company alone on a row with two empty columns. */
.cform{ margin:26px 0 0; display:grid; gap:16px 22px; max-width:720px;
        grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:600px){ .cform{ grid-template-columns:1fr; } }
.cform .cf-field{ margin:0; display:flex; flex-direction:column; gap:7px; }
.cform .cf-wide{ grid-column:1 / -1; }
.cform label{ font-family:var(--label-font); font-size:var(--fs-label,.72rem); letter-spacing:.14em;
              text-transform:uppercase; color:var(--ink-muted); }
.cform label .opt{ text-transform:none; letter-spacing:0; opacity:.75; }
.cform input, .cform select, .cform textarea{ min-height:44px; padding:10px 14px; font-size:16px;
              font-family:var(--body-font); color:var(--ink); background:var(--surface);
              border:1px solid var(--rule); border-radius:var(--radius); }
.cform textarea{ min-height:150px; resize:vertical; }
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible{
              outline:2px solid var(--accent); outline-offset:1px; }
.cform .cf-actions{ grid-column:1 / -1; margin:0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cform .cf-status{ font-size:14px; color:var(--ink-muted); }

/* video cards */
.vgrid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr)); }
.vcard video{ display:block; width:100%; height:auto; border-radius:var(--radius); background:#000; }
.vcard h3{ margin-top:14px; }
.vcard .meta{ color:var(--ink-muted); }

/* the search field */
.sform{ margin:26px 0 0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.sform .k{ font-family:var(--label-font); font-size:var(--fs-label,.72rem); letter-spacing:.14em;
           text-transform:uppercase; color:var(--ink-muted); }
.sform input{ flex:1 1 320px; min-height:44px; padding:0 14px; font-size:16px;
              color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); }
.sstatus{ margin:16px 0 0; }

/* HSA TV - a click-to-load YouTube facade. Only the thumbnail image loads with the
   page; the youtube-nocookie player is created on click, so no player and no
   third-party request until the visitor asks for one. */
.ytfacade{ position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; }
.ytfacade img{ display:block; width:100%; height:100%; object-fit:cover; }
.ytfacade iframe{ display:block; width:100%; height:100%; border:0; }
.ytload{ display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; position:relative; }
.ytload:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ytplay{ position:absolute; inset:0; display:grid; place-items:center; }
.ytplay svg{ width:68px; height:48px; opacity:.9; transition:opacity .15s ease; }
.ytload:hover .ytplay svg{ opacity:1; }
.vcard .meta a{ color:var(--accent-text,var(--accent)); text-decoration:none; }
.vcard .meta a:hover{ text-decoration:underline; }