/* Landing pages for search: fleet management, school bus tracking,
   tachograph download. Loads after style.css. These pages reuse the site
   parts (page-hero.photo, flist, steps, card, faq, contact, badge).
   This file adds only what those parts lack: the sample fragment, a
   picture beside text, and the button styles for a photo page hero. */

/* Photo page hero: same buttons as the photo hero */
.page-hero.photo .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.page-hero.photo .btn.primary { background: #4c9bff; border-color: #4c9bff; color: #0b0e13; }
.page-hero.photo .btn.primary:hover { background: #73b1ff; border-color: #73b1ff; }
.page-hero.photo .btn.ghost { color: #fff; border-color: rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.06); }
.page-hero.photo .btn.ghost:hover { background: rgb(255 255 255 / 0.16); border-color: #fff; }
.page-hero.photo { padding: 96px 0 72px; }
.page-hero.photo h1 { font-size: clamp(30px, 5vw, 46px); max-width: 20ch; }

/* Screenshots in a feature list: show the lower part and hide the top bar */
.flist .fimg.scr { height: 150px; object-position: 50% 100%; }
.flist.lp-flist { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.flist.lp-flist.lp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-sec { padding: 8px 0 40px; }
.lp-sec .lead { margin: -8px 0 22px; color: var(--muted); max-width: 62ch; }
.lp-note { color: var(--muted); font-size: 14px; margin: 14px 0 0; }

/* Try it: text beside a working sample */
.lp-demo { padding: 56px 0 40px; }
.lp-demo .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 48px; align-items: center; }
.lp-demo h2 { margin-bottom: 12px; }
.lp-demo p { color: var(--muted); margin: 0 0 12px; max-width: 46ch; }

/* Picture beside text */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items: center; }
.lp-split img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.lp-split h2 { margin-bottom: 12px; }
.lp-split p { color: var(--muted); margin: 0 0 12px; max-width: 52ch; }
.lp-more { padding: 0 0 56px; }
.lp-more a { margin-right: 20px; }

/* The sample: a small piece of the product */
.frag {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.45;
  padding: 18px 20px 20px;
}
.frag * { max-width: none; }
.frag-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.frag-head strong { font-size: 16px; }
.frag-head span { color: var(--muted); font-size: 14px; }
.frag svg.frag-map { display: block; width: 100%; height: auto; background: var(--bg); border-radius: 10px; }
.frag .route { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.frag .route-done { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.frag .pos { fill: var(--accent); stroke: var(--surface); stroke-width: 3; transition: transform 0.35s cubic-bezier(.2,.7,.2,1); }
.frag .flag { fill: #b3261e; }
.frag-read { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: baseline; margin: 14px 0 6px; }
.frag-read output { font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.frag-read .place { font-weight: 600; }
.frag-read .speed { font-variant-numeric: tabular-nums; color: var(--muted); }
.frag-state { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--bg); }
.frag-state[data-s="move"] { color: var(--ok); }
.frag-state[data-s="idle"] { color: var(--next); }
.frag-state[data-s="stop"] { color: var(--muted); }
.frag input[type="range"] { width: 100%; margin: 10px 0 4px; accent-color: var(--accent); height: 28px; }
.frag text { fill: var(--muted); font-size: 14px; font-family: inherit; }
.frag .tick { text-anchor: middle; }
.frag-read .frag-state { justify-self: start; }
.frag-state[data-s="ok"] { color: var(--ok); }
.frag-state[data-s="harsh"] { color: var(--next); }
.frag-state[data-s="severe"] { color: #b3261e; }
.frag-note { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.frag-alert { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-weight: 600; min-height: 44px; }
.frag-alert.on { background: var(--accent); color: var(--accent-text); }
.frag label { display: block; font-weight: 600; margin: 10px 0 4px; }
.frag input[type="date"] {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; min-height: 44px;
}
.frag-rows { display: grid; gap: 10px; margin-top: 14px; }
.frag-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg); }
.frag-row .due { font-variant-numeric: tabular-nums; font-weight: 650; }
.frag-row .left { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.frag-row[data-s="ok"] .left { color: var(--ok); }
.frag-row[data-s="soon"] .left { color: var(--next); }
.frag-row[data-s="late"] .left { color: #b3261e; font-weight: 650; }
@media (prefers-color-scheme: dark) {
  .frag .flag { fill: #ff8a80; }
  .frag-state[data-s="severe"] { color: #ff8a80; }
  .frag-row[data-s="late"] .left { color: #ff8a80; }
}

@media (max-width: 800px) {
  .lp-demo .wrap, .lp-split { grid-template-columns: 1fr; }
  .flist.lp-flist.lp-two { grid-template-columns: 1fr; }
  .page-hero.photo { padding: 72px 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .frag .pos { transition: none; }
}