/* Page block: one part of a page of the shop's website (ShopBlock), spaced
   by the page (site-main). Words keep a reading width, in line with the
   page's title; pictures, events and galleries take the column.
   data-kind   which block (text, media, image, …)
   data-width  full  a picture that reaches the window's edges
               wide  a block of words that takes the column too, like the
                     questions on the home page, which has no title to line up with */
.page-block {
  inline-size: 100%;
  scroll-margin-block-start: calc(var(--header-height, 4rem) + var(--space-s));
}

.page-block:is([data-kind="text"], [data-kind="faq"], [data-kind="contact"], [data-kind="quote"]):not([data-width="wide"]) {
  max-inline-size: var(--column-content);
}

.page-block[data-kind="image"][data-width="full"] {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);

  .image-block__picture {
    border-radius: 0;
  }

  .image-block__caption {
    padding-inline: var(--gutter);
  }
}

.page-block__heading {
  font-size: calc(var(--step-3) * var(--display-scale, 1));
}

/* In the website editor's preview: where a block goes before it has what it shows */
.page-block--empty {
  border: 2px dashed var(--color-subtle);
  border-radius: var(--radius-l);
  color: var(--color-muted);
  padding: var(--space-l) var(--space-m);
  text-align: center;
}

.page-block__placeholder {
  align-items: center;
  display: inline-flex;
  gap: var(--space-xs);
}

/* In the website editor's frame a block shows it can be picked (look-preview#pick) */
.page-block[data-studio-block] {
  border-radius: var(--radius-m);
  cursor: pointer;
  outline: 2px dashed transparent;
  outline-offset: var(--space-2xs);
  transition: outline-color var(--duration-fast) var(--ease-out);

  &:hover {
    outline-color: color-mix(in oklch, var(--color-accent) 70%, transparent);
  }
}

/* A picture that reaches the window's edges (100vw counts the scrollbar too)
   never scrolls the page sideways, on whichever page it is */
body:has(.page-hero, .page-block[data-width="full"]) {
  overflow-x: clip;
}