/* ********************** device *********************************
   * Copyright © Caerus Digital, LLC - All Rights Reserved
   * Created on 10/25/26, for CompanyWebsite Mockups
   * Matthew Elmore <matt@caerus.digital>
   * Unauthorized copying of this file is strictly prohibited
   ********************** device *********************************

   iPhone | iPad picker (HIG segmented control: equal segments, the selected one raised on a gray track,
   rounded rectangle, not a pill). html[data-device] picks which set shows. */
.device-picker { margin-top: 32px; display: flex; justify-content: center; scroll-margin-top: 120px; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: var(--fill); }
.seg button { min-width: 110px; min-height: 32px; padding: 6px 18px; border: 0; border-radius: 7px; background: transparent; color: var(--label); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); font-weight: 600; }
@media (prefers-color-scheme: dark) { .seg button[aria-checked="true"] { background: #636366; } }
.seg button:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
@media (pointer: coarse) { .seg button { min-height: 44px; } }

/* One set at a time. */
html:not([data-device="ipad"]) [data-on="ipad"] { display: none !important; }
html[data-device="ipad"] [data-on="iphone"] { display: none !important; }

/* iPad frame: landscape 4:3, labeled, no drawn interface. */
.ipad-frame { aspect-ratio: 4 / 3; width: 100%; border-radius: 18px; border: 10px solid #1c1c1e; background: var(--bg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; box-shadow: 0 0 0 1px var(--separator); }
.ipad-frame-k { font-size: 15px; font-weight: 600; color: var(--label); }
.ipad-frame-t { font-size: 13px; color: var(--label-2); }
.band.night .ipad-frame { background: #1c1c1e; border-color: #2c2c2e; }
.band.night .ipad-frame-k { color: #f5f5f7; }
.band.night .ipad-frame-t { color: rgba(235, 235, 245, .7); }

/* iPad tours: 2 across (1 on phones); the ContractAI frame takes the media column. */
html[data-device="ipad"] .gallery { --n: 2; }
@media (max-width: 720px) { html[data-device="ipad"] .gallery { --n: 1; } html[data-device="ipad"] .gallery > .shot { flex-basis: 100%; } }
html[data-device="ipad"] .contractai .media .ipad-frame { max-width: 520px; margin: 0 auto; }

/* iPad App Store frames (ipad-frames.js): mixed landscape and portrait frames sit in equal 4:3 boxes, whole. */
.ipad-shot { display: block; }
.ipad-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
html[data-device="ipad"] .gallery.has-ipad > .shot:not(.has-ipad) { display: none; }
html[data-device="ipad"] .contractai .media .ipad-shot { max-width: 520px; margin: 0 auto; }
html[data-device="ipad"] .contractai .media .ipad-shot img { aspect-ratio: auto; }