/*
 * X3WEB — Hunting & Safari Websites page (/business-models/hunting-safari-websites).
 *
 * Loaded after x3.css and x3-bm.css, and only for the few arrangements those
 * two do not already have. Every value is a token from x3.css: the safari feel
 * comes from the photographs and screenshots, never from the styles.
 */

/* ── "You Get a Professional 8–14 Page Website / Built for Your Safari Business" ── */

/* Two lines from 640px up: a wider head, the break after "Website", and the
   size held so the longer first line still fits. Phones wrap it naturally. */
@media (min-width: 640px) {
  .x3-safari-head-wide { max-width: 76rem; }
  .x3-safari-twoline { font-size: min(clamp(2rem, 1.15rem + 2.6vw, 3.75rem), 4.1vw); }
  .x3-safari-twoline > span { display: block; }
}


/* ── A website shown on a computer and a phone ─────────────────────────────── */

/*
 * The browser and phone frames from x3-bm.css, with the phone overlapping the
 * bottom-right corner of the browser by a quarter of its own width. The whole
 * figure is one link to the live website.
 */
.x3-safari-device {
  --phone: 22%;
  position: relative;
  display: block;
  padding-bottom: 9%;
  color: inherit;
  text-decoration: none;
}
.x3-safari-device__browser { width: calc(100% - var(--phone) * 0.75); }
.x3-safari-device__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--phone);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-3);
}
/* A link, not a zoom: the screens open the website, not the lightbox. */
.x3-safari-device .bm-frame__screen img { cursor: pointer; }
.x3-safari-device .bm-frame { transition: transform 0.35s var(--ease); }
.x3-safari-device:hover .x3-safari-device__browser,
.x3-safari-device:focus-visible .x3-safari-device__browser { transform: translateY(-3px); }
.x3-safari-device:hover .x3-safari-device__phone,
.x3-safari-device:focus-visible .x3-safari-device__phone { transform: translateY(-6px); }

@media (max-width: 639px) {
  .x3-safari-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 0;
  }
  .x3-safari-device__browser { width: 100%; }
  .x3-safari-device__phone { position: static; width: 48%; }
}

/* The name, the line and the button under each website. */
.x3-safari-site { display: flex; flex-direction: column; min-width: 0; }
.x3-safari-site__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  padding-top: 1.125rem;
  border-top: 1px solid var(--line-strong);
}
.x3-safari-site__text { flex: 1 1 16rem; min-width: 0; }
.x3-safari-site__text strong { display: block; font-size: 1.125rem; font-weight: 550; color: var(--ink); }
.x3-safari-site__text span { display: block; margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); }
@media (max-width: 767.98px) {
  .x3-safari-site__cap { justify-content: center; }
}

/* Two websites to a row, with room between the rows for the overlapping phones. */
.x3-safari-sites { row-gap: clamp(3rem, 2rem + 3vw, 5rem); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }


/* ── The pages we build: a photograph beside the text, rows alternating ───── */

.x3-safari-rows > .bm-split + .bm-split { margin-top: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }
.x3-safari-rows .x3-h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; }
.x3-safari-rows .bm-split__copy > .x3-h3 + p { margin-top: 1rem; }
/* A photograph lifted off the block, like the framed screens. */
.x3-safari-photo {
  margin: 0;
  overflow: hidden;
  background: var(--scene);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
}
.x3-safari-photo img { display: block; width: 100%; height: auto; }


/* ── Generic website against ours: what it does on the left, the website on the right ── */

.x3-safari-compare { display: grid; gap: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); }
.x3-safari-vs { gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.x3-safari-vs__copy { min-width: 0; }
.x3-safari-vs__media { margin: 0; overflow: hidden; background: var(--scene); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.x3-safari-vs__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 768px) {
  .x3-safari-vs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
  }
}
@media (max-width: 767.98px) {
  /* On a phone the picture comes first, then what it gets wrong or right. */
  .x3-safari-vs__media { order: -1; }
}
.x3-safari-vs .x3-h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; }
.x3-safari-compare .x3-pkg__list { gap: 0.875rem; margin-top: 1.5rem; }
.x3-safari-compare .x3-pkg__list li { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); text-align: left; }
/* The generic column's marks are crosses in ink, not orange ticks. */
.x3-safari-cross li svg { color: var(--ink-muted); }
.x3-safari-cross li { color: var(--ink-muted); }


/* ── Numbered build steps ──────────────────────────────────────────────────── */

.x3-safari-step__n {
  font-size: clamp(2.5rem, 2rem + 1.4vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.x3-safari-step p { color: var(--ink); }


/* ── Everything included ───────────────────────────────────────────────────── */

.x3-safari-incl .x3-pkg__list { margin-top: 0.5rem; padding-top: 1.125rem; border-top: 1px solid var(--line); }


/* ── One price card, centred, its terms in a line under it ─────────────────── */

.x3-safari-price .x3-pricing { grid-template-columns: minmax(0, 30rem); justify-content: center; }
.x3-safari-price .x3-pricing-note { max-width: 36rem; margin-inline: auto; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-muted); }


/* ── Who this is for: the check list beside the photograph ─────────────────── */

.x3-safari-fit .x3-points { margin-bottom: 0; }
.x3-safari-fit .x3-btnrow { margin-top: 2rem; }