/* FC Blog — 6.0.732 unified three-card reader/search/preview widget. */
.fcbr-bricks-element,
.fcbr {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fcbr-bricks-element { container-type: inline-size; }

.fcbr {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.fcbr__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, var(--fcbr-right-w, 32%));
  grid-template-rows: auto var(--fcbr-story-h, 776px);
  gap: var(--fcbr-card-gap, 20px);
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

/* Keep the historical article wrapper for the Reader JS/API, but let its two
 * cards participate directly in the unified three-card grid. */
.fcbr__article { display: contents; }

/* ---------- Image card ---------- */
.fcbr__image-card,
.fcbr__story-card,
.fcbr__preview-card {
  position: relative;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--fcbr-card-radius, 7px);
  overflow: hidden;
}

.fcbr__image-card {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--fcbr-image-card-bg, #fff);
}

.fcbr__image-stage,
.fcbr__image-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: inherit;
}

.fcbr__image-wrap[hidden] { display: none !important; }

.fcbr__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--fcbr-ratio, auto);
  object-fit: cover;
  object-position: center;
}

.fcbr__back {
  position: absolute;
  z-index: 8;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 15px;
  margin: 0;
  border: 1px solid var(--fcbr-back-border, #173d32);
  border-radius: var(--fcbr-card-radius, 7px);
  background: var(--fcbr-back-bg, #fff);
  color: var(--fcbr-back-text, #173d32);
  opacity: var(--fcbr-back-opacity, .30);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  transition: opacity .16s ease, transform .16s ease;
}

/* 6.0.723: ONE Quick View control owns both states. The button never leaves
 * the image stage. Its glyph switches open-eye -> close-eye while the inline
 * rail is expanded; there is no second close button. */
.fcbr__quick-toggle {
  position: absolute;
  z-index: 8;
  top: 14px;
  right: 14px;
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  max-width: 38px;
  max-height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  background: #fff !important;
  background-color: #fff !important;
  color: var(--fcbr-quick-text, #173d32);
  cursor: pointer;
  line-height: 1;
  opacity: 1;
  visibility: visible;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  transform: translateY(0) translateZ(0);
  transition: transform .14s ease, opacity .14s ease, box-shadow .14s ease;
}

.fcbr__quick-state {
  grid-area: 1 / 1;
  place-items: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  pointer-events: none;
}
.fcbr__quick-state--open { display: grid; }
.fcbr__quick-state--close { display: none; }
.fcbr.is-quick-open .fcbr__quick-state--open { display: none; }
.fcbr.is-quick-open .fcbr__quick-state--close { display: grid; }

.fcbr__quick-toggle svg,
.fcbr__quick-toggle i,
.fcbr__quick-toggle img,
.fcbr__quick-open-icon,
.fcbr__quick-close-icon {
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  margin: 0;
  padding: 0;
  color: inherit;
  fill: currentColor;
  object-fit: contain;
  pointer-events: none;
  line-height: 20px;
  font-size: 20px;
}

/* 6.0.723: the one Quick View toggle must never fade. Both its open-eye and
 * close-eye states remain fully visible; Back to all Posts keeps its separate
 * 30% idle-opacity contract. */
.fcbr__quick-toggle,
.fcbr__quick-toggle:hover,
.fcbr__quick-toggle:focus,
.fcbr__quick-toggle:focus-visible,
.fcbr__quick-toggle:active,
.fcbr.is-quick-open .fcbr__quick-toggle,
.fcbr__quick-toggle .fcbr__quick-state,
.fcbr__quick-toggle .fcbr__quick-state svg,
.fcbr__quick-toggle .fcbr__quick-state i,
.fcbr__quick-toggle .fcbr__quick-state img {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}


.fcbr__back:hover,
.fcbr__back:focus-visible,
.fcbr__back:active {
  opacity: 1;
  outline: none;
  box-shadow: none;
}

.fcbr__quick-toggle:hover,
.fcbr__quick-toggle:focus-visible {
  opacity: 1;
  transform: translateY(-1px) translateZ(0);
  outline: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* 6.0.722 Quick View structural contract:
 * - NEVER a popup/overlay/modal.
 * - Closed: rail is absent from layout; eye remains on the image.
 * - Open: rail becomes the top section of the same image card and pushes the
 *   image stage down. The SAME eye button remains on the image and changes
 *   to its configured close-eye glyph.
 * - The selector row owns a Collection-style custom scrollbar beneath it. */
.fcbr__quick-drawer {
  display: none;
  position: relative;
  z-index: auto;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 14px 16px;
  border: 0;
  border-radius: var(--fcbr-card-radius, 7px) var(--fcbr-card-radius, 7px) 0 0;
  background: var(--fcbr-preview-card-bg, #dce7da);
  color: var(--fcbr-quick-text, #173d32);
  box-shadow: none;
  overflow: hidden;
}

/* The eye is a stacked/tablet aid. Desktop keeps the complete right card. */
.fcbr.is-fcbr-stacked .fcbr__quick-toggle { display: grid; }
.fcbr.is-fcbr-stacked .fcbr__quick-drawer.is-open { display: block; }

/* Open state remains one continuous card: rail on top, image below. */
.fcbr.is-quick-open .fcbr__image-stage,
.fcbr.is-quick-open .fcbr__image-wrap {
  border-radius: 0 0 var(--fcbr-card-radius, 7px) var(--fcbr-card-radius, 7px);
}

.fcbr__quick-grid {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch;
  gap: var(--fcqp-tile-gap, 8px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--fcqp-tile-h, 74px);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  cursor: grab;
}
.fcbr__quick-grid::-webkit-scrollbar { width: 0; height: 0; display: none; }
.fcbr__quick-grid.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
}
.fcbr__quick-grid.is-dragging * { user-select: none; }

/* Exact visual language copied from Our Collection: 2px rail / 4px selector. */
.fcbr__quick-scrollbar {
  position: relative;
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 2px;
  min-height: 2px;
  max-height: 2px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #a8bfae;
  box-shadow: none;
  overflow: visible;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
}
.fcbr__quick-scrollbar.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.fcbr__quick-scrollbar-thumb {
  position: absolute;
  top: -1px;
  left: 0;
  height: 4px;
  min-height: 4px;
  max-height: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #00584f;
  box-shadow: none;
  transform: translateX(0);
  will-change: transform;
}

.fcbr__quick-item {
  position: relative;
  flex: 0 0 var(--fcqp-tile-w, 118px);
  width: var(--fcqp-tile-w, 118px);
  height: var(--fcqp-tile-h, 74px);
  min-width: var(--fcqp-tile-w, 118px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--fcqp-tile-border-w, 1px) solid var(--fcqp-tile-border, #9eaea4);
  border-radius: var(--fcqp-tile-radius, 7px);
  background: rgba(23,61,50,.08);
  color: var(--fcqp-preview-text, #fff);
  scroll-snap-align: start;
  cursor: pointer;
  box-shadow: none;
  user-select: none;
}

.fcbr__quick-item.is-active {
  border-color: var(--fcqp-tile-active, #173d32);
  box-shadow: inset 0 0 0 1px var(--fcqp-tile-active, #173d32);
}
.fcbr__quick-item:focus-visible {
  outline: 2px solid var(--fcqp-tile-active, #173d32);
  outline-offset: 2px;
}

.fcbr__quick-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .22s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.fcbr__quick-item:hover img,
.fcbr__quick-item:focus-visible img { transform: scale(1.035); }

.fcbr__quick-item span {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  min-width: 72%;
  height: var(--fcqp-preview-h, 26px);
  padding: 0 10px;
  background: var(--fcqp-preview-bg, #101111);
  color: var(--fcqp-preview-text, #fff);
  font-size: var(--fcqp-preview-size, 11px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  transform: translateX(102%);
  transition: transform .18s ease;
  pointer-events: none;
}

.fcbr__quick-item:hover span,
.fcbr__quick-item:focus-visible span,
.fcbr__quick-item.is-active span { transform: translateX(0); }

/* ---------- Story card ---------- */
.fcbr__story-card {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: var(--fcbr-story-h, 776px);
  min-height: 776px;
  padding: var(--fcbr-story-pad-y, 64px) var(--fcbr-story-pad-x, 64px);
  box-sizing: border-box;
  background: var(--fcbr-story-card-bg, #fff);
}

/* 6.0.730: large-desktop reading area is 850px high. The existing 776px
 * setting remains the tablet/mobile contract. 1301px is safely above the
 * maximum configurable stacked breakpoint (1300px), so this cannot collide
 * with the stacked layouts. */
@media (min-width: 1301px) {
  .fcbr { --fcbr-story-h: 850px; }
}

/* Right Search/Preview is a real third card, not a tinted sidebar surface. */
.fcbr__preview-card {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 0;
  align-self: stretch;
  background: var(--fcbr-preview-card-bg, #dce7da);
}

.fcbr__preview-card > .fcbls {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fcbr__preview-card > .fcbls::-webkit-scrollbar { width: 0; height: 0; display: none; }

.fcbr__story-scroll {
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  /* 6.0.715: the desktop/tablet gutter belongs to the fixed outer story card,
   * not to the scrolling element. This keeps the 64px bottom gutter visible
   * while the article scrolls instead of revealing it only at scroll-end. */
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fcbr__story-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

.fcbr__story-scroll:focus-visible {
  outline: 0;
}

/* Keep keyboard focus visible without drawing a second frame around the story card. */
.fcbr__story-scroll:focus-visible + .fcbr__dots .fcbr__dot.is-active::before {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fcbr-dot-active, #173d32) 35%, transparent);
}

.fcbr__dots {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
}

.fcbr__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -6px 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.fcbr__dot::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid var(--fcbr-dot, rgba(23,61,50,.42));
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
}

.fcbr__dot.is-active::before {
  border-color: var(--fcbr-dot-active, #173d32);
  background: var(--fcbr-dot-active, #173d32);
}

.fcbr__dots.is-static { opacity: .35; }

.fcbr__header {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin-bottom: var(--fcbr-gap, 18px);
}

.fcbr__category {
  color: var(--fcbr-category, #173d32);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fcbr__title {
  margin: 0;
  color: var(--fcbr-title, #101111);
  /* 6.0.767: title size/weight are user-owned. Default hierarchy is
   * 36px/400 for the post title and 30px/400 for the primary subheading. */
  font-size: var(--fcbr-title-size, 36px);
  font-weight: 400;
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.fcbr__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--fcbr-meta, #607269);
  font-size: var(--fcbr-meta-size, 14px);
  line-height: 1.4;
}

.fcbr__content {
  width: 100%;
  max-width: none;
  min-width: 0;
  color: var(--fcbr-body, #101111);
  font-size: var(--fcbr-body-size, 17px);
  font-weight: 400;
  line-height: var(--fcbr-line, 1.65);
  overflow-wrap: anywhere;
}

.fcbr__content > :first-child { margin-top: 0; }
.fcbr__content > :last-child { margin-bottom: 0; }
.fcbr__content p,
.fcbr__content ul,
.fcbr__content ol,
.fcbr__content blockquote,
.fcbr__content figure { margin-top: 0; margin-bottom: 1.15em; }
.fcbr__content h1,
.fcbr__content h2,
.fcbr__content h3,
.fcbr__content h4,
.fcbr__content h5,
.fcbr__content h6 {
  margin-top: 1.4em;
  margin-bottom: .55em;
  color: var(--fcbr-heading, #101111);
  line-height: 1.22;
  font-weight: 400;
}
.fcbr__content h1 { font-size: var(--fcbr-h1-size, 30px); }
.fcbr__content h2 { font-size: var(--fcbr-h2-size, 28px); }
.fcbr__content h3 { font-size: var(--fcbr-h3-size, 24px); }
.fcbr__content a { color: var(--fcbr-link, #173d32); text-decoration: underline; text-underline-offset: 2px; }
.fcbr__content img,
.fcbr__content video,
.fcbr__content iframe { max-width: 100%; height: auto; }
.fcbr__content table { max-width: 100%; }

.fcbr__loading {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 20;
  width: fit-content;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 8px 12px;
  border-radius: 7px;
  background: rgba(16,17,17,.86);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  transform: translateX(-50%);
}
.fcbr__loading[hidden] { display: none !important; }
.fcbr.is-loading .fcbr__article { opacity: .58; }

/* Unified widget responsive state. JS uses the actual browser viewport
 * against the Bricks control value, so desktop sidebars do not stack merely
 * because the surrounding Bricks content column is narrow. */
.fcbr.is-fcbr-stacked .fcbr__layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--fcbr-story-h, 776px) auto;
}
.fcbr.is-fcbr-stacked .fcbr__image-card { grid-column: 1; grid-row: 1; }
.fcbr.is-fcbr-stacked .fcbr__story-card { grid-column: 1; grid-row: 2; }
.fcbr.is-fcbr-stacked .fcbr__preview-card {
  grid-column: 1;
  grid-row: 3;
  min-height: 0;
}
.fcbr.is-fcbr-stacked .fcbr__preview-card > .fcbls {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

@container (max-width: 760px) {
  .fcbr__story-card { height: var(--fcbr-story-h, 776px); }
  .fcbr__title { font-size: var(--fcbr-title-tablet-size, 34px); }
  .fcbr__content { font-size: var(--fcbr-body-tablet-size, 16px); }
  .fcbr__content h1 { font-size: var(--fcbr-h1-tablet-size, 28px); }
  .fcbr__content h2 { font-size: var(--fcbr-h2-tablet-size, 26px); }
  .fcbr__content h3 { font-size: var(--fcbr-h3-tablet-size, 22px); }
}

@media (max-width: 767px) {
  /* 6.0.728: mobile keeps the same visible top and bottom reading gutter.
   * Vertical padding belongs to the fixed card, so it cannot scroll away. */
  .fcbr__story-card {
    grid-template-columns: minmax(0,1fr) 28px;
    padding: var(--fcbr-story-mobile-pad-y, 32px) 0;
  }
  .fcbr__story-scroll {
    padding: 0 var(--fcbr-story-mobile-pad-x, 24px);
  }

  /* Mobile image-stage contract: 474px fixed image height. The Quick View rail
   * remains a separate section above it and therefore does not overlap it. */
  .fcbr__image-stage,
  .fcbr__image-wrap {
    height: 474px;
    min-height: 474px;
    max-height: 474px;
  }
  .fcbr__image {
    width: 100%;
    height: 100%;
    min-height: 474px;
    max-height: 474px;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .fcbr__dots {
    position: static;
    top: auto;
    right: auto;
    transform: none;
  }
}

@container (max-width: 520px) {
  .fcbr__story-card {
    grid-template-columns: minmax(0,1fr) 28px;
    height: var(--fcbr-story-h, 776px);
  }
  .fcbr__title { font-size: var(--fcbr-title-mobile-size, 30px); }
  .fcbr__content { font-size: var(--fcbr-body-mobile-size, 16px); }
  .fcbr__content h1 { font-size: var(--fcbr-h1-mobile-size, 26px); }
  .fcbr__content h2 { font-size: var(--fcbr-h2-mobile-size, 24px); }
  .fcbr__content h3 { font-size: var(--fcbr-h3-mobile-size, 20px); }
  .fcbr__back { top: 10px; left: 10px; min-height: 40px; padding-inline: 12px; font-size: 13px; }
  .fcbr__quick-toggle { top: 10px; right: 10px; width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  .fcbr__quick-drawer { width: 100%; max-width: 100%; padding: 10px 10px 8px; }
  .fcbr__quick-item {
    flex-basis: min(var(--fcqp-tile-w, 118px), 42vw);
    width: min(var(--fcqp-tile-w, 118px), 42vw);
    min-width: min(var(--fcqp-tile-w, 118px), 42vw);
  }
  .fcbr__quick-grid { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .fcbr__quick-drawer,
  .fcbr__story-scroll { scroll-behavior: auto; transition: none; }
}

/* Runtime compatibility cleanup for templates that still contain the old
 * separate FC Blog Live Search / Quick Preview Bricks branches. FC Blog owns
 * those features now, so the legacy branch must not keep an empty column. */
.fcblog-legacy-branch { display: none !important; }
.fcblog-expanded-branch {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
}
.fcbr.is-loading .fcbr__image-card,
.fcbr.is-loading .fcbr__story-card { opacity: .58; }

/* 6.0.724: Quick View eye/close-eye button surface must be solid white at all times.
 * Only the Back to all Posts button keeps reduced idle opacity. */
.fcbr__quick-toggle,
.fcbr__quick-toggle:hover,
.fcbr__quick-toggle:focus,
.fcbr__quick-toggle:focus-visible,
.fcbr__quick-toggle:active,
.fcbr.is-quick-open .fcbr__quick-toggle {
  background: #fff !important;
  background-color: #fff !important;
  opacity: 1 !important;
}