/* =============================================================================
   Opsy website — the Bli rådgivare page.

   Six blocks down the page, in the grouping the user settled over their
   concept rounds: the opening, who and what, a mint panel about time, two
   payment cards, a grey band with three topics beside a picture, and the
   closing.

   Flat plain CSS on the kit's tokens, `op-` prefix, as css/site.css. Most of
   the page is other pages' parts, used as they stand: the opening, the
   section intro, the closing panel, the small line drawings and the drawing
   system (css/home.css); the ticked list (css/products.css); the card
   (css/security.css); the pictures' ink shapes and people (css/process.css).
   New here is the accordion, and this page's arrangement of the rest.
   Spec: docs/specs/2026-10-06-website-bli-radgivare-page.md
   ========================================================================== */

/* --- Who and what ----------------------------------------------------------- */
/* Two columns, each a heading and what it heads: a paragraph, and a ticked
   list. 5 to 7 with 64px between, the price section's split the other way
   round (css/products.css, .op-price__grid): the list's lines are longer than
   the paragraph's measure. No line between the two, as on the other pages.
   The section step above the block as under it -- the user's ruling. An
   opening leaves 64px to what follows it (css/home.css, Opening), which read
   as too close here, where the block opens with two section titles: the
   block adds what is missing to the step, at any width. */
.op-role {
  padding-top: calc(var(--op-space-section) - var(--space-8) * 2);
  padding-bottom: var(--op-space-section);
}
.op-role__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: calc(var(--space-8) * 2);
  align-items: start;
}

/* --- Din tid, dina villkor --------------------------------------------------- */
/* One mint panel: the heading and its text beside a picture, and across the
   panel's foot a white card, Svarstid. The price panel's mint and corner and
   the white card that stands in it (css/products.css, .op-price__panel); its
   padding is the cards' 40px, since this panel is the section's whole width.
   A primitive, as there: the kit's only alias for this mint names a hover. */
.op-time {
  padding-bottom: var(--op-space-section);
}
.op-time__panel {
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--genoa-100);
}
/* The heading starts at the panel's own padding, level with the calendar's
   top -- the user's ruling. Centred against the picture, it stood far under
   the panel's edge and the block above read as cut off from it. */
.op-time__top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: calc(var(--space-8) * 2);
  align-items: start;
}
/* The picture is held small, at the far end of its column, so the row is
   about as tall as its text and the panel short -- the user's ruling; it
   filled its column first. At 300px the rådgivare's ring is 63px and the
   ink at its 1.6px floor. The width is said outright: a drawing has none of
   its own, and one that is not stretched across its cell closes to nothing. */
.op-time__top .op-art {
  justify-self: end;
  width: min(100%, 300px);
}
/* The white card: a small drawing, then a title and its text (the card's own
   text block, css/security.css, .op-topic__body). Padded as the price panel's
   white card is. */
.op-time__card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
/* In a reasons cell the drawing sits at the far end (css/home.css, .op-spot);
   here it stands level with the text. */
.op-time__card .op-spot {
  align-self: center;
}

/* --- Ersättning --------------------------------------------------------------- */
/* A heading and its lead, then two cards side by side: the Säkerhet page's
   card as it stands (css/security.css, .op-topic), which reads its padding
   and gap from two lengths its section names. They are named here with the
   same values. */
.op-pay {
  --op-card-pad: var(--space-10);
  --op-card-gap: var(--space-6);
  padding-bottom: var(--op-space-section);
}
.op-pay__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--op-card-gap);
  margin-top: var(--op-space-intro);
}

/* --- The three topics --------------------------------------------------------- */
/* A grey band across the page: a picture on the left, and on the right three
   topics of which one is open. The picture is the open topic's. The band is
   the picture panels' grey (css/home.css, .op-offer__media), since the
   pictures stand straight on it -- a primitive, as there. 48px above and
   below, the user's ruling: the band is to take little room (it had the mint
   band's 72px first). 7 to 5 with 64px between. */
.op-more {
  margin-bottom: var(--op-space-section);
  padding-block: calc(var(--space-6) * 2);
  background: var(--submarine-100);
}
.op-more__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: calc(var(--space-8) * 2);
  align-items: center;
}
/* The three pictures share one cell, so the band's left side keeps its size
   whichever is shown. The one not shown keeps its room and is hidden; the
   markup marks the first as shown, and js/accordion.js moves the mark.
   Held to 500px, in the middle of its column -- the user's ruling; the
   pictures filled the column first. 500px and not less: a picture is then
   350px tall, a little over the accordion at its tallest on a wide screen,
   so the band keeps one height whichever topic is open. The width is said
   outright: a drawing has none of its own, and a stage that is not
   stretched across its cell would close to nothing. */
.op-more__stage {
  display: grid;
  justify-self: center;
  width: min(100%, 500px);
}
.op-more__art {
  grid-area: 1 / 1;
  visibility: hidden;
}
.op-more__art.is-shown {
  visibility: visible;
}

/* The accordion: three topics, one always open -- the user's ruling. It is
   the home page's accordion (css/home.css, .op-flow__step) at this page's
   title size: a topic's title is a button in its heading; a click on a closed
   one opens it and closes the one that was open, a click on the open one
   does nothing (js/accordion.js). No sign at a row's end: with one topic
   always open there is nothing to close on, and a minus would promise it.
   Without the script every topic's text is shown.
   One line under each topic, grey: the brand's mint line is for a mint
   ground, and this band is grey. */
.op-acc__item {
  border-bottom: 1px solid var(--border-default);
}
/* The title's type is its class in the markup (heading-h3). A closed topic
   reads in the body ink, named outright since a button does not inherit it;
   the open one, and one pointed at, in the brand's teal -- the open topic is
   marked by that and by its text, with no line of its own. Read off
   aria-expanded, so the mark and what a screen reader announces cannot
   drift apart. 20px above and below: a row of about 69px, well over the
   32px a target needs. */
.op-acc__button {
  appearance: none;
  display: block;
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.op-acc__button:hover,
.op-acc__button[aria-expanded='true'] {
  color: var(--brand-primary);
}
/* The colour eases, from .is-moving on (below): on arrival a closed topic's
   title is in its ink at once. */
.op-acc.is-moving .op-acc__button {
  transition: color var(--motion-fast) var(--ease-standard);
}
/* The open topic's title does nothing when clicked, and says so. */
.op-acc.is-live .op-acc__item.is-open .op-acc__button {
  cursor: default;
}
/* A topic's text opens as the home page's and the kit's accordion do: a grid
   row going from 0fr to 1fr, so the text's own height drives it. Visibility
   rides the same token, so a closed topic's text leaves the accessibility
   tree once the row has shut; the kit zeroes the token for reduced motion.
   The rows move only from .is-moving on, which the script sets once the
   topics that start closed have been closed: they are shut at once on
   arrival, with nothing to watch. */
.op-acc__panel {
  display: grid;
  grid-template-rows: 1fr;
}
.op-acc.is-moving .op-acc__panel {
  transition:
    grid-template-rows var(--motion-base) var(--ease-standard),
    visibility var(--motion-base);
}
.op-acc.is-live .op-acc__item:not(.is-open) .op-acc__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
}
.op-acc__panel-in {
  min-height: 0; /* lets the row close to nothing */
  overflow: hidden;
}
/* 20px under a topic's text, the room its title has above it. */
.op-acc__panel-in > p {
  padding-bottom: var(--space-5);
}

/* --- Closing ------------------------------------------------------------------ */
/* The closing panel (css/home.css, .op-closing__panel) with two halves where
   it has a text and an action: the call with its mail link, and the markets
   with a small drawing. The band's split. The panel itself is untouched. */
.op-advisor__closing {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto;
  grid-auto-flow: row;
  column-gap: calc(var(--space-8) * 2);
  align-items: center;
}
/* The mail address as a button: the site's own (css/site.css, Button), a
   link by its markup -- the user's pick; it was an underlined link first.
   It keeps its own width in the column, where it would otherwise stretch;
   8px between its envelope and the address; and it stands 24px under the
   text, the step from a lead to its action (css/home.css, Hero): the
   column's 16px and these 8. */
.op-advisor__mail {
  align-self: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
/* The markets: a stack -- the drawing, then the title and the four countries
   -- the user's ruling. (The drawing stood beside the text first, then under
   the title.) 12px from the title to the text, as in a card. */
.op-advisor__markets {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
/* The drawing is a card's (css/security.css, .op-topic .op-spot): one and a
   half times the small drawing's size, its outline kept at 2px by a render of
   its own at this size, so its detail shows. It starts on the title's edge,
   and stands 24px over the title: the stack's 12px and these 12, the step a
   card that leads with its drawing has (css/products.css, How they fit
   together). */
.op-advisor__markets .op-spot {
  align-self: flex-start;
  width: 132px;
  height: 108px;
  margin-bottom: var(--space-3);
}

/* --- Narrow ------------------------------------------------------------------- */
/* As on the other pages: no phone design pass, the page only stacks sensibly. */
@media (max-width: 960px) {
  /* One column everywhere: a heading's block, then the next; a picture, then
     its text; the picture, then the topics. */
  .op-role__grid,
  .op-time__top,
  .op-pay__cards,
  .op-more__grid,
  .op-advisor__closing {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The two headed blocks stand the near step apart, as two sections that
     belong together. */
  .op-role__grid {
    row-gap: var(--op-space-near);
  }
  .op-time__top,
  .op-more__grid,
  .op-advisor__closing {
    row-gap: var(--space-10);
  }
  /* A picture alone in a column stands on the left edge, at its own width
     (css/products.css, .op-product__frame). */
  .op-more__stage,
  .op-time__top .op-art {
    justify-self: start;
  }
  /* The calendar stands above Din tid's heading and text, as Om oss's
     picture stands above its text in one column (css/about.css). The text
     came first, in the markup's order; the user's ruling on seeing it (spec
     docs/specs/2026-10-06-website-bli-radgivare-page.md, Rev 5). Placed by
     the grid: in the markup the heading still comes first, for a screen
     reader. */
  .op-time__top .op-art {
    grid-area: 1 / 1;
  }
  .op-time__top .op-intro {
    grid-area: 2 / 1;
  }
}
@media (max-width: 560px) {
  /* Panels and cards are padded as a phone's panel is. */
  .op-pay {
    --op-card-pad: var(--space-6);
  }
  .op-time__panel {
    padding: var(--space-6);
  }
  /* The white card: its drawing above its text. */
  .op-time__card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .op-time__card .op-spot {
    align-self: flex-start;
  }
  /* The markets' drawing at the small drawing's own size and outline: its
     other render (the tag's <source>). */
  .op-advisor__markets .op-spot {
    width: 88px;
    height: 72px;
  }
}