/* Sightline — tokeni templata, scopovani na .sec-sightline-about. */

/* ============================================================
   DESIGN TOKENS — Template 19 "Sightline"
   Niche variant: S — second-opinion practice that does not carry
   out the treatment it advises on.
   >>> NEW variant, not in the original style guide. Rules and
       reasoning live in the BUILDER-LOG, §4p. <<<

   This is the only template in the series that does not sell
   treatment. The product is an opinion, and its credibility comes
   from the practice having nothing to gain from the answer — so
   the page is plain, unhurried and slightly document-like rather
   than persuasive.

   Shape language: a mount (passe-partout) — a white card sitting
   inside a tinted frame with 8px of air around it.
   Change ONLY this file to re-skin the whole template.
   ============================================================ */

.sec-sightline-about {
  /* ---------- Color ---------- */
  --c-bg:          #F7F6F9;   /* warm greige */
  --c-bg-alt:      #EFEDF4;
  --c-white:       #FFFFFF;
  --c-surface:     #E4E1EC;   /* indigo tint for cards / fills */

  --c-primary:     #5A4B7A;   /* deep pine grey-green — 6.9:1 on --c-bg */
  --c-primary-dk:  #3B3153;   /* headings, dark sections */
  --c-primary-lt:  #9C93B4;
  --c-primary-08:  rgba(90, 75, 122, 0.08);
  --c-primary-14:  rgba(90, 75, 122, 0.14);

  /* Muted brick, S≈36%. The guide bans SATURATED red as a primary
     or large surface; this is neither — violet carries the page and
     the brick only ever marks small things. White on it measures
     4.75:1, so unlike the caramel in T18 it may carry body-sized
     text. For brick TEXT on light, still use --c-accent-dk. */
  --c-accent:      #A65A4E;
  --c-accent-dk:   #7A3D33;   /* 6.5:1 on --c-bg */
  --c-accent-soft: #F2DFDB;
  --c-accent-tint: rgba(166, 90, 78, 0.16);

  --c-text:        #22212B;
  --c-text-muted:  #5B5766;   /* 5.8:1 on --c-bg */
  --c-on-dark:     #F2F1F6;
  --c-on-dark-mu:  rgba(242, 241, 246, 0.78);

  --c-line:        rgba(34, 33, 43, 0.12);
  --c-line-strong: rgba(34, 33, 43, 0.24);
  --c-line-dark:   rgba(242, 241, 246, 0.24);

  --c-whatsapp:    #128C7E;
  --c-whatsapp-dk: #0E6F63;
  --c-star:        #C98A22;

  /* ---------- Elevation ---------- */
  --sh-sm: 0 4px 14px -8px rgba(59, 49, 83, 0.20);
  --sh-md: 0 14px 32px -16px rgba(59, 49, 83, 0.28);
  --sh-lg: 0 26px 56px -22px rgba(59, 49, 83, 0.32);
  --sh-xl: 0 44px 90px -32px rgba(59, 49, 83, 0.36);

  /* ---------- Radius ----------
     The window shape is a single shorthand so a card only needs
     one class. Everything else uses the plain scale. */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* One radius everywhere. The card device is the mount around it,
     not the corner, so the corners stay quiet. */
  --r-card:    14px;
  --r-card-lg: 20px;
  --mount:      8px;   /* the air between the frame and the card */

  /* Gallery tiles are pinned at 12px: the brief asks for 10–15px
     there, and it keeps a grid of pictures from reading as arches. */
  --r-gallery: 12px;

  /* ---------- Spacing — 8px base ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;

  --section-y: clamp(64px, 8vw, 112px);
  --gutter:    clamp(20px, 5vw, 48px);
  --maxw:      1200px;

  /* ---------- Typography ---------- */
  --ff-display: "Jost", "Segoe UI", system-ui, sans-serif;
  --ff-body:    "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:   0.875rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-h4:   clamp(1.1875rem, 0.6vw + 1.05rem, 1.375rem);
  --fs-h3:   clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
  --fs-h2:   clamp(1.875rem, 2.1vw + 1.35rem, 2.875rem);
  --fs-h1:   clamp(2.25rem, 3.2vw + 1.4rem, 3.75rem);

  --lh-tight: 1.1;
  --lh-snug:  1.22;
  --lh-body:  1.64;

  --ls-tight: -0.02em;
  --ls-label:  0.14em;

  /* ---------- Motion ---------- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-base: 260ms;

  /* ---------- Layout ---------- */
  --header-h:  72px;
  --z-header: 100;
  --z-mobilebar: 90;
  --z-menu: 95;
  --z-lightbox: 200;

  --tap: 44px;
}

@media (max-width: 900px) {
  .sec-sightline-about { --header-h: 62px; }
}

/* Sightline — reset i zajedničke primitive (base.css). */

/* ============================================================
   BASE — Template 19 "Sightline"
   Signature device: .u-card — a 4px colour bar across the top of a card.
   corners only. One rule, used on every card on the page. That is
   the whole shape language, on purpose: this template was ordered
   simple and a second device would only compete with it.
   ============================================================ */

.sec-sightline-about *, .sec-sightline-about *::before, .sec-sightline-about *::after { box-sizing: border-box; }

.sec-sightline-about {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

.sec-sightline-about {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

.sec-sightline-about img, .sec-sightline-about svg, .sec-sightline-about video { display: block; max-width: 100%; }
.sec-sightline-about img { height: auto; }

.sec-sightline-about h1, .sec-sightline-about h2, .sec-sightline-about h3, .sec-sightline-about h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--c-primary-dk);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
.sec-sightline-about h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; }
.sec-sightline-about h2 { font-size: var(--fs-h2); line-height: 1.14; font-weight: 600; }
.sec-sightline-about h3 { font-size: var(--fs-h3); }
.sec-sightline-about h4 { font-size: var(--fs-h4); }

.sec-sightline-about p { margin: 0; text-wrap: pretty; }
.sec-sightline-about ul, .sec-sightline-about ol { margin: 0; padding: 0; list-style: none; }

.sec-sightline-about a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.sec-sightline-about button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.sec-sightline-about :focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: var(--r-xs); }
.sec-sightline-about :focus:not(:focus-visible) { outline: none; }
.sec-sightline-about ::selection { background: var(--c-accent-soft); color: var(--c-primary-dk); }

.sec-sightline-about .u-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Layout primitives ---------- */

.sec-sightline-about .u-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec-sightline-about .u-section { position: relative; padding-block: var(--section-y); }
.sec-sightline-about .u-section--alt { background: var(--c-bg-alt); }

.sec-sightline-about .u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sec-sightline-about .u-skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-200%);
  background: var(--c-primary-dk); color: var(--c-white);
  padding: 12px 22px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700;
}
.sec-sightline-about .u-skip-link:focus { transform: translateY(0); }

/* ============================================================
   DARK SCOPE
   A section on a brand-coloured background inherits the wrong
   text colours: h2 defaults to --c-primary-dk and .u-label to
   --c-accent-dk, both tuned for light backgrounds. Put .u-dark on
   the section and the whole subtree is corrected in one place.
   (BUILDER-LOG section 4 — missed in T6, fixed from a screenshot.)
   ============================================================ */
.sec-sightline-about .u-dark { color: var(--c-on-dark); }
.sec-sightline-about .u-dark h1, .sec-sightline-about .u-dark h2, .sec-sightline-about .u-dark h3, .sec-sightline-about .u-dark h4 { color: var(--c-on-dark); }
.sec-sightline-about .u-dark p { color: var(--c-on-dark-mu); }
.sec-sightline-about .u-dark .u-label { color: var(--c-accent-soft); }
.sec-sightline-about .u-dark .u-head p { color: var(--c-on-dark-mu); }

/* ---------- Eyebrow + section head ---------- */

.sec-sightline-about .u-label {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-accent-dk);
}

.sec-sightline-about .u-head > * + * { margin-top: var(--sp-3); }
.sec-sightline-about .u-head--center { text-align: center; margin-inline: auto; }
.sec-sightline-about .u-head h2 { max-width: 20ch; }
.sec-sightline-about .u-head--center h2 { margin-inline: auto; }
.sec-sightline-about .u-head p { color: var(--c-text-muted); font-size: var(--fs-lg); max-width: 60ch; }
.sec-sightline-about .u-head--center p { margin-inline: auto; }

/* The "smile arc" the style guide suggests, drawn as a soft curve
   under one word rather than a straight rule. */
.sec-sightline-about .u-arc { position: relative; white-space: nowrap; }
.sec-sightline-about .u-arc::after {
  content: "";
  position: absolute; left: -2%; right: -2%; bottom: -0.14em;
  height: 0.3em;
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  border-bottom: 5px solid var(--c-accent);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

/* ---------- Signature: the mount ----------
   A white card sitting inside a tinted frame with 8px of air around
   it, the way a print sits inside a passe-partout. Two elements, not
   a border: a border would share the card's corner radius, and the
   point of the device is that the outer shape is slightly larger and
   slightly softer than the inner one. */

.sec-sightline-about .u-mount {
  padding: var(--mount);
  border-radius: calc(var(--r-card) + var(--mount));
  background: var(--mount-bg, var(--c-surface));
}
.sec-sightline-about .u-mount > * { border-radius: var(--r-card); }

.sec-sightline-about .u-mount--lg { border-radius: calc(var(--r-card-lg) + var(--mount)); }
.sec-sightline-about .u-mount--lg > * { border-radius: var(--r-card-lg); }

/* Second tone, so a row of mounts is not one flat block. */
.sec-sightline-about .u-mount--accent { --mount-bg: var(--c-accent-soft); }

.sec-sightline-about .u-card {
  background: var(--c-white);
  border-radius: var(--r-card);
}
.sec-sightline-about .u-card--lg { border-radius: var(--r-card-lg); }

/* ---------- Pills ---------- */

.sec-sightline-about .u-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--pill-bg, var(--c-white));
  color: var(--pill-fg, var(--c-primary-dk));
  border: 1px solid var(--pill-bd, var(--c-line));
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
}
.sec-sightline-about .u-pill--accent { --pill-bg: var(--c-accent-soft); --pill-bd: transparent; --pill-fg: var(--c-accent-dk); }
.sec-sightline-about .u-pill--indigo { --pill-bg: var(--c-surface); --pill-bd: transparent; --pill-fg: var(--c-primary-dk); }

/* ---------- Stars ---------- */

.sec-sightline-about .u-stars { display: inline-flex; gap: 2px; }
.sec-sightline-about .u-stars svg { width: 17px; height: 17px; color: var(--c-star); }
.sec-sightline-about .u-stars--lg svg { width: 21px; height: 21px; }

/* ---------- Buttons ---------- */

.sec-sightline-about .u-btn {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-white);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px;
  padding: 13px 26px;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-display);
  font-size: var(--fs-md); font-weight: 600;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-out),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.sec-sightline-about .u-btn svg { flex: none; width: 20px; height: 20px; }
.sec-sightline-about .u-btn:hover { transform: translateY(-2px); }
.sec-sightline-about .u-btn:active { transform: none; transition-duration: 60ms; }

.sec-sightline-about .u-btn--solid:hover { --btn-bg: var(--c-primary-dk); }
.sec-sightline-about .u-btn--line { --btn-bg: transparent; --btn-fg: var(--c-primary-dk); --btn-bd: var(--c-line-strong); }
.sec-sightline-about .u-btn--line:hover { --btn-bd: var(--c-primary); --btn-bg: var(--c-white); }
.sec-sightline-about .u-btn--white { --btn-bg: var(--c-white); --btn-fg: var(--c-primary-dk); }
.sec-sightline-about .u-btn--white:hover { --btn-bg: var(--c-bg-alt); }
.sec-sightline-about .u-btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-on-dark); --btn-bd: var(--c-line-dark); }
.sec-sightline-about .u-btn--ghost:hover { --btn-bg: rgba(242, 243, 248, 0.14); --btn-bd: rgba(242, 243, 248, 0.5); }
.sec-sightline-about .u-btn--wa { --btn-bg: var(--c-whatsapp); --btn-fg: #fff; }
.sec-sightline-about .u-btn--wa:hover { --btn-bg: var(--c-whatsapp-dk); }
.sec-sightline-about .u-btn--lg { min-height: 58px; padding: 17px 32px; font-size: var(--fs-lg); }
.sec-sightline-about .u-btn--block { width: 100%; }

/* ---------- Scroll reveal ---------- */

/* Hidden start state gated on .has-js (set by app.js) so a script
   failure can never leave a blank hole where content should be. */
.sec-sightline-about.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.sec-sightline-about.has-js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sec-sightline-about { scroll-behavior: auto; }
  .sec-sightline-about *, .sec-sightline-about *::before, .sec-sightline-about *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sec-sightline-about.has-js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .sec-sightline-about .site-head, .sec-sightline-about .mobile-bar, .sec-sightline-about .stage { display: none !important; }
  .sec-sightline-about { background: #fff; }
}

/* ============================================================
   MEDIA SLOTS — every image slot also takes a <video>

   Each slot rule is written as `:is(img,video)`, so swapping the
   tag is the whole job — sizing, crop and radius stay identical:

     <img   src="_shared/img/hero.svg" width="1800" height="1100" alt="...">
     <video src="_shared/video/hero.mp4" poster="_shared/img/hero.svg"
            width="1800" height="1100" data-inline muted loop playsinline
            aria-label="..."></video>

   `data-inline` hands the element to app.js: it plays only while on
   screen, pauses when the tab is hidden, gets a pause control (WCAG
   2.2.2), and under prefers-reduced-motion the file is never
   fetched — the poster stays.

   NOTE: the parallax section is the one slot this does NOT cover.
   It uses a CSS background-image (that is what a fixed-attachment
   parallax is), and a background cannot be a video. To put a video
   there, rebuild that section as a positioned <video> — and you
   lose the fixed effect, because the two techniques are different
   things. See parallax/parallax.css.
   ============================================================ */

.sec-sightline-about video { width: 100%; height: auto; }
.sec-sightline-about .has-inline-video { position: relative; }

.sec-sightline-about .u-mediactl {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-sm);
  color: var(--c-text);
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
}
.sec-sightline-about .u-mediactl:hover { background: #fff; }
.sec-sightline-about .u-mediactl__ic { position: relative; width: 12px; height: 12px; flex: none; }
.sec-sightline-about .u-mediactl__ic::before, 
.sec-sightline-about .u-mediactl__ic::after {
  content: "";
  position: absolute; top: 0;
  width: 4px; height: 12px;
  border-radius: 1px;
  background: currentColor;
}
.sec-sightline-about .u-mediactl__ic::before { left: 0; }
.sec-sightline-about .u-mediactl__ic::after { right: 0; }
.sec-sightline-about .u-mediactl[aria-pressed="true"] .u-mediactl__ic::before {
  left: 1px;
  width: 0; height: 0;
  border-radius: 0;
  background: none;
  border-left: 11px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.sec-sightline-about .u-mediactl[aria-pressed="true"] .u-mediactl__ic::after { opacity: 0; }
.sec-sightline-about .u-mediactl--compact { padding: 0; width: var(--tap); justify-content: center; }
.sec-sightline-about .u-mediactl--compact .u-mediactl__tx { display: none; }

/* Sekcija about. */

/* ============================================================
   ABOUT — the arrangement, not the biography
   ============================================================ */

.sec-sightline-about .about { background: var(--c-bg); }
.sec-sightline-about .about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.sec-sightline-about .about__media { margin: 0; }
.sec-sightline-about .about__media :is(img, video) {
  width: 100%;
  height: clamp(320px, 40vw, 500px);
  object-fit: cover;
  background: var(--c-surface);
  display: block;
}

.sec-sightline-about .about__copy > * + * { margin-top: var(--sp-4); }
.sec-sightline-about .about__copy h2 { max-width: 24ch; }
.sec-sightline-about .about__lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--c-text); max-width: 54ch; }

.sec-sightline-about .about__points { display: grid; gap: 13px; margin-top: var(--sp-5); }
.sec-sightline-about .about__points li { display: flex; gap: 12px; align-items: flex-start; }
.sec-sightline-about .about__points svg {
  width: 24px; height: 24px;
  flex: none;
  padding: 3px;
  border-radius: var(--r-circle);
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
}
.sec-sightline-about .about__points span { font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text-muted); }
.sec-sightline-about .about__points strong { color: var(--c-primary-dk); font-weight: 600; }

.sec-sightline-about .about__sign { margin-top: var(--sp-5); }
.sec-sightline-about .about__sign-in {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: clamp(18px, 2vw, 24px);
}
.sec-sightline-about .about__sign-in :is(img, video) {
  width: 72px; height: 72px;
  flex: none;
  border-radius: var(--r-circle);
  object-fit: cover;
  background: var(--c-surface);
}
.sec-sightline-about .about__sign-in div { display: flex; flex-direction: column; gap: 3px; }
.sec-sightline-about .about__sign-in strong {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-primary-dk);
}
.sec-sightline-about .about__sign-in > div > span { font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text-muted); }
.sec-sightline-about .about__sign-in p {
  margin-top: 8px;
  padding-left: 14px;
  border-left: 3px solid var(--c-accent);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text);
}

@media (max-width: 940px) {
  .sec-sightline-about .about__grid { grid-template-columns: 1fr; }
  .sec-sightline-about .about__media { max-width: 520px; }
}
@media (max-width: 520px) {
  .sec-sightline-about .about__sign-in { flex-direction: column; }
}