/* GW Collection Note — sections/gw-collection-note.liquid
   Figma 112:164 (desktop 1440 x 145). No mobile frame; the mobile block is the
   approved derivation — the card's row becomes a column and the clamp drops
   from 3 lines to 1.

   DESKTOP: 2 VISIBLE LINES IN A 61px BOX, exactly as 112:164 draws it —
   Figma's body node is 61 high (three 20.3333px lines) but truncates after
   two, leaving one empty line under the ellipsis. The collapsed body gets
   that empty line as margin-bottom (40.67 + 20.33 = 61), so the card is the
   frame's 145. NOT min-height: the clamp does not hide overflow inside the
   extra height, so a min-height lets a third line show through.
   Button: 8 + 21 + 8 = 37 high, 16 + 95 + 4 + 16 + 16 = 147 wide (the 1px
   stroke Figma draws inside the frame is subtracted from the padding below).

   THE CLAMP ONLY EXISTS INSIDE [data-js]. Without the component there is no
   button to un-clamp with, so a no-JS visitor gets the full text rather than
   truncated copy behind a dead control.

   Every colour carries the Figma literal as its var() fallback, so a blank
   colour setting keeps the design rather than voiding the property. */

.gw-collection-note {
  padding: 0 48px;
}

.gw-collection-note__card {
  display: flex;
  align-items: center;
  gap: 24px;
  /* 23, not Figma's 24: Figma draws the 1px stroke INSIDE the frame, a CSS
     border ADDS to an auto height, and 24 + 1 put the card at 147 against the
     frame's 145 and the text stack at 1121 against 1125. Recorded on
     gw-collection-grid's category pill. Same reason for the button below. */
  padding: 23px;
  background: var(--gw-cn-bg, #fdfaf4);
  border: 1px solid var(--gw-cn-border, #f2ead8);
  border-radius: 0;
}

.gw-collection-note__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
  min-width: 0;
  word-break: break-word;
}

/* ---- heading (hoisted out of the richtext by the component) ---- */

.gw-collection-note__heading,
.gw-collection-note__heading :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gw-cn-heading-color, #000000);
}

/* ---- body ---- */

.gw-collection-note__body {
  width: 100%;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 20.3333px;
  letter-spacing: 0;
  color: var(--gw-cn-text-color, #111111);
}

.gw-collection-note__body > :first-child {
  margin-top: 0;
}

.gw-collection-note__body > :last-child {
  margin-bottom: 0;
}

.gw-collection-note__body p {
  margin: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.3333px;
  letter-spacing: 0;
  color: inherit;
}

/* Any h1-h6 left in the body (only the FIRST is hoisted) would otherwise take
   theme.min.css's --hN-size / --hN-line-height. Figma Subtitle 1: 20px, line
   "normal" = 26px (97 content - 10 gap - 61 body). */
.gw-collection-note__body :is(h1, h2, h3, h4, h5, h6) {
  margin: 20.3333px 0 0;
  padding: 0;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gw-cn-heading-color, #000000);
}

/* Figma separates the two paragraphs with an empty line rather than a margin;
   one line-height reproduces it exactly. */
.gw-collection-note__body p + p {
  margin-top: 20.3333px;
}

/* assets/theme.min.css gives EVERY li a margin-bottom:4.5px, and a flex or grid
   parent ADDS it to its own height without it showing on the li's own rect.
   Recorded on gw-benefit-bar, gw-faq and gw-collection-grid; applied here the
   moment the richtext can contain a list at all. */
.gw-collection-note__body :is(ul, ol) {
  margin: 20.3333px 0 0;
  padding-left: 20px;
}

.gw-collection-note__body li {
  margin: 0;
}

.gw-collection-note__body a {
  color: inherit;
  text-decoration: underline;
}

/* ---- the clamp ---- */

[data-js] .gw-collection-note__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--gw-cn-lines-desktop, 2);
  line-clamp: var(--gw-cn-lines-desktop, 2);
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20.3333px;
}

[data-js][data-expanded="true"] .gw-collection-note__body {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
  margin-bottom: 0;
}

/* ---- toggle ---- */

.gw-collection-note__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  /* "Read Less" is the narrower label; without a floor the button would shrink
     on expand. 147 is the frame's width. */
  min-width: 147px;
  margin: 0;
  /* Figma 8/16 minus the 1px stroke it draws inside the frame: 7 + 21 + 7 + 2
     = 37 high, 15 + 95 + 4 + 16 + 15 + 2 = 147 wide. */
  padding: 7px 15px;
  background: var(--gw-cn-btn-bg, #4a3b1f);
  border: 1px solid var(--gw-cn-btn-bg, #4a3b1f);
  border-radius: 0;
  color: var(--gw-cn-btn-label-color, #ffffff);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.gw-collection-note__toggle[hidden] {
  display: none;
}

.gw-collection-note__label {
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
}

.gw-collection-note__label[hidden] {
  display: none;
}

.gw-collection-note__icon {
  display: block;
  width: 16px;
  height: 16px;
  color: inherit;
}

/* The rotation sits on the <svg> rather than its <span> wrapper; either works.
   MEASUREMENT NOTE, and it will recur on every gw section with a transition:
   the Claude Browser pane does NOT advance CSS transitions, so a transitioned
   transform reads back as matrix(1,0,0,1,0,0) — an IDENTITY matrix, not `none`
   — however long you wait, in view, with no animation on the element. It reads
   as "the rotation was never written". Inject
   `*{transition:none!important}` BEFORE asserting any transitioned property;
   with that in place this computes matrix(-1,0,0,-1,0,0) as authored. */
.gw-collection-note__icon svg {
  display: block;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

[data-expanded="true"] .gw-collection-note__icon svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .gw-collection-note__icon svg {
    transition: none;
  }
}

/* ---- editor placeholder ---- */

.gw-collection-note__placeholder {
  padding: 24px 16px;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 14px;
  line-height: normal;
  color: var(--gw-cn-text-color, #111111);
}

/* ================= mobile ================= */

@media screen and (max-width: 1024px) {
  .gw-collection-note {
    padding: 0 16px;
  }

  .gw-collection-note__card {
    flex-direction: column;
    align-items: flex-start;
  }

  .gw-collection-note__text {
    width: 100%;
  }

  [data-js] .gw-collection-note__body {
    -webkit-line-clamp: var(--gw-cn-lines-mobile, 1);
    line-clamp: var(--gw-cn-lines-mobile, 1);
    margin-bottom: 0;
  }
}

/* Metafield richtext wrapper: keep it out of the typography and margin math. */
.gw-collection-note__body > .metafield-rich_text_field > :first-child {
  margin-top: 0;
}