/* ---------------------------------------------------------------------------
   The art-print archive.

   Loaded on one category. Everything here is either the hero or a picture
   placed on a wall; the grid, the toolbar, the filters
   and the pop-up frame are the catalogue's own and are not restated.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   A picture on a wall

   One room photograph, one product image, and the rectangle the template
   declares. Both are ordinary <img>: they lazy-load, they carry alt text, and
   with no JavaScript at all the composition is already correct.

   The room image is in flow and sets the size of everything; the picture is
   positioned over it in percentages of that box, so the placement holds at
   any width without a single measurement in script.
   ------------------------------------------------------------------------ */

.mf-scene {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  /* The wall's own colour, so a slow or failed room image leaves a room-
     coloured panel rather than the grey box of a broken picture. */
  background: var(--room-wall, var(--paper));
  /* The shadow under the picture is quoted in cqw so it stays in proportion
     whether the scene is a 200px thumbnail or a full-width hero. */
  container-type: inline-size;
  /* The slot is placed in percentages of this box, so the box has to be the
     photograph's own shape to the pixel. The ratio comes from the file's real
     dimensions, not a guess written here. */
  aspect-ratio: var(--scene-ar, 4 / 3);
}

.mf-scene__room {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mf-scene__slot {
  position: absolute;
  left: var(--slot-x);
  top: var(--slot-y);
  width: var(--slot-w);
  height: var(--slot-h);
  display: block;
}

/* `contain` is the whole honesty of this: the picture keeps its own
   proportions inside the rectangle and is never cropped to fill it. A square
   work fills the slot, a landscape one sits shorter, a portrait one narrower.
   The shadow is a filter rather than a box-shadow for the same reason — it
   follows the picture's painted edge, not the slot's. */
.mf-scene__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(var(--art-shadow, 0 1.6cqw 2.4cqw) rgba(24, 22, 18, 0.34));
}

/* The picture fades in once it is there, so a scene is never briefly a room
   with a blank rectangle on the wall. Behind `scripting: enabled` because the
   class that ends the fade is set by script: without it this would hide the
   picture for good, which is a worse page than one with no fade. Browsers
   that do not know the query ignore the block and get the same. */
@media (scripting: enabled) {
  .mf-scene__art {
    opacity: 0;
    transition: opacity 0.35s var(--ease);
  }

  .mf-scene__art.is-ready {
    opacity: 1;
  }
}

/* A picture that will not load takes its slot with it: a room with an empty
   rectangle floating on the wall is worse than a room. */
.mf-scene[data-art-failed] .mf-scene__slot {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mf-scene__art {
    transition: none;
  }
}

.mf-scene__note {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: var(--type-caption);
}

/* ---------------------------------------------------------------------------
   The hero

   The container, the columns, the type and the rhythm are the category hero's
   (.mf-chero, catalogue.css), the same as on the wall-panel and table pages.
   What is here is only the art hero's own: a room that never changes, a white
   panel of three pictures, and the chip. The room is one photograph that never
   changes; three small pictures on a white panel over its lower edge choose
   which of them hangs on the wall.
   ------------------------------------------------------------------------ */

/* Four benefits do not fit one line of the text column, and a flex row would
   leave the fourth alone on a second line. Two by two from a phone-landscape
   width up, one under the other below it; the items are the shared
   .mf-chero__points ones, only the list lays them out. */
.mf-ahero__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 480px) {
  .mf-ahero__points {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }
}

.mf-ahero__media {
  min-width: 0;
}

/* The room and everything laid over it: the chip.
   Their positions are percentages of this box, which is the photograph's own
   shape; the picker sits under it, outside that box. */
.mf-ahero__room {
  position: relative;
}

.mf-ahero .mf-scene {
  border-radius: var(--radius-card);
}

.mf-ahero__pill {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: var(--type-caption);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(18, 20, 22, 0.12);
}

.mf-ahero__pill span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--signal);
}

/* The picker: a white panel under the room that rides up over its lower edge,
   about a third of the panel on the photograph and the rest below it. */
.mf-ahero__picker {
  position: relative;
  z-index: 2;
  width: 82%;
  margin: -2.4rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 4%;
  padding: 0.6rem 3% 0.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 28px rgba(18, 20, 22, 0.14);
}

.mf-ahero .mf-ahero__picker button.mf-ahero__pick,
.mf-ahero .mf-ahero__picker button.mf-ahero__pick:hover,
.mf-ahero .mf-ahero__picker button.mf-ahero__pick:focus,
.mf-ahero .mf-ahero__picker button.mf-ahero__pick:active {
  background: none;
  color: var(--text);
  box-shadow: none;
}

.mf-ahero__pick {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.mf-ahero__thumb {
  display: block;
  width: 100%;
  height: auto;
  /* Wider than tall, as the approved layout draws them. */
  aspect-ratio: 37 / 20;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  transition: border-color 0.18s ease;
}

.mf-ahero__pick:hover .mf-ahero__thumb {
  border-color: rgba(20, 21, 24, 0.25);
}

.mf-ahero__pick[aria-pressed="true"] .mf-ahero__thumb {
  border-color: var(--oak);
}

.mf-ahero__pick-label {
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: 1.2;
}

.mf-ahero__pick[aria-pressed="true"] .mf-ahero__pick-label {
  font-weight: 700;
}

.mf-ahero__note {
  margin: 1.1rem 0 0;
  max-width: 44ch;
  color: var(--text-muted);
  font-size: var(--type-caption);
}

@media (max-width: 560px) {
  .mf-ahero__picker {
    width: 92%;
    margin-top: -1.8rem;
    column-gap: 3%;
    padding: 0.45rem 3% 0.4rem;
  }

  /* On a phone the room is 340px wide: the chip is smaller and tucked into the
     corner so it clears the top of the picture. */
  .mf-ahero__pill {
    top: 0.3rem;
    right: 0.3rem;
    padding: 0.12rem 0.5rem;
    font-size: 0.6875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-ahero__thumb {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   The card's price

   One price, of one real variation, with its configuration under it
   (inc/art.php): canvas in the popular size by default, the cheapest or the
   dearest when the grid is sorted by price.
   ------------------------------------------------------------------------ */

/* The configuration the card's price is for: "Canvas · 80 × 120 cm". */
ul.products li.product .mf-card__config {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: var(--type-meta);
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   The gallery pop-up

   The frame, the two states and the footer controls are the panel archive's
   and come from catalogue.css. What is added here is the scene grid, the
   opened scene, and the zoom.
   ------------------------------------------------------------------------ */

.mf-modal--art {
  width: min(78rem, calc(100vw - 1.5rem));
}

.mf-scenegrid .mf-scenecard {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mf-scenecard__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.mf-scenecard__media .mf-scene {
  transition: transform 0.4s var(--ease);
}

.mf-scenecard:hover .mf-scenecard__media .mf-scene,
.mf-scenecard:focus-visible .mf-scenecard__media .mf-scene {
  transform: scale(1.03);
}

.mf-scenecard__text {
  display: block;
  margin-top: 0.5rem;
}

.mf-scenecard__name {
  display: block;
  font-weight: 600;
  font-size: var(--type-card);
  line-height: 1.3;
}

.mf-scenecard__room {
  display: block;
  margin-top: 0.1rem;
  color: var(--text-muted);
  font-size: var(--type-meta);
}

/* The opened scene. The stage is what zooms; it clips, so a magnified room
   cannot spill over the caption or the controls under it. */
.mf-sceneview__stage {
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-card);
  /* No ground of its own: what is left beside a photograph narrower than the
     pop-up should read as the pop-up, not as a grey band around the room. */
  touch-action: pan-y;
}

/* Capped by width rather than height, so the scene keeps the photograph's
   exact shape: a height cap with a full-width box would letterbox the room
   inside its own container and the slot would then point at the letterbox. */
.mf-sceneview__stage .mf-scene {
  flex: 0 0 auto;
  width: 100%;
  max-width: calc(min(62dvh, 40rem) * var(--scene-ar, 1.3333));
  border-radius: 0;
  transform-origin: 0 0;
  transition: transform 0.25s var(--ease);
}

/* Magnified, the finger drags the room rather than scrolling the pop-up. */
.mf-sceneview__stage[data-zoomed] {
  cursor: grab;
  touch-action: none;
}

.mf-sceneview__stage[data-zoomed]:active {
  cursor: grabbing;
}

.mf-sceneview__stage[data-dragging] .mf-scene {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .mf-sceneview__stage .mf-scene,
  .mf-scenecard__media .mf-scene {
    transition: none;
  }
}

.mf-sceneview__caption {
  margin: 0.7rem 0 0;
}

.mf-sceneview__name {
  display: block;
  font-size: var(--type-h2);
  font-weight: 650;
  line-height: 1.2;
}

.mf-sceneview__meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: var(--type-meta);
}

.mf-sceneview__note {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: var(--type-caption);
}

.mf-sceneview__zoom {
  cursor: pointer;
}

.mf-sceneview__zoom[aria-pressed='true'] {
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
}

/* ---------------------------------------------------------------------------
   The materials in the hero: three tags that come alive under the pointer.

   Decoration. They are list items, not links or buttons: they filter nothing,
   open nothing and do nothing when pressed. At rest the three look alike; each
   has its own small reaction on hover and focus, CSS only, no pictures:
   poster = matte paper, canvas = woven texture, acrylic glass = a gloss that
   sweeps once across.
   ------------------------------------------------------------------------ */

/* The thin rule right after the call to action, the one the wall-panel hero
   draws; the materials sit close under it. */
.mf-ahero__materials {
  margin: 1rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--rule);
}

.mf-ahero__materials-label {
  margin: 0 0 0.4rem;
  color: var(--text-muted);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mf-ahero__materials-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-mat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-inner);
  background: var(--paper-bright);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  cursor: default;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.mf-mat span {
  position: relative;
  z-index: 1;
}

/* Wide enough to fill the row under the call to action. */
@media (min-width: 1200px) {
  .mf-mat {
    padding-inline: 1.6rem;
  }
}

/* The effect layer: empty until the tag is hovered or focused. */
.mf-mat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mf-mat:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Poster: matte paper, a faint grain and a soft highlight. */
.mf-mat--poster::before {
  background:
    repeating-linear-gradient(115deg, rgba(60, 50, 40, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(236, 232, 222, 0.7));
}

/* Canvas: a warm tint and a fine weave. */
.mf-mat--canvas::before {
  background:
    repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.1) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.1) 0 1px, transparent 1px 3px),
    linear-gradient(0deg, rgba(246, 236, 218, 0.8), rgba(246, 236, 218, 0.8));
}

/* Acrylic glass: a cool tint, and a gloss that crosses it once, left to right. */
.mf-mat--acrylic::before {
  opacity: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.5) 55%, transparent 68%);
  width: 70%;
  inset: 0 auto 0 0;
  transform: translateX(-110%);
  transition: opacity 0.1s ease;
}

.mf-mat--poster:hover::before,
.mf-mat--poster:focus-visible::before,
.mf-mat--canvas:hover::before,
.mf-mat--canvas:focus-visible::before {
  opacity: 1;
}

.mf-mat--poster:hover,
.mf-mat--poster:focus-visible {
  border-color: rgba(122, 125, 130, 0.55);
}

.mf-mat--canvas:hover,
.mf-mat--canvas:focus-visible {
  border-color: rgba(150, 118, 70, 0.55);
}

.mf-mat--acrylic:hover,
.mf-mat--acrylic:focus-visible {
  border-color: rgba(92, 130, 152, 0.7);
  background: #dde8ee;
}

.mf-mat--acrylic:hover::before,
.mf-mat--acrylic:focus-visible::before {
  opacity: 1;
  transform: translateX(260%);
  transition: opacity 0.1s ease, transform 0.55s cubic-bezier(0.3, 0.1, 0.3, 1);
}

/* A touch screen has no hover to wait for: the tags rest as plain chips, and
   the effects belong to a pointer or the keyboard. */
@media (hover: none) {
  .mf-mat:hover::before {
    opacity: 0;
  }

  .mf-mat--acrylic:hover {
    background: var(--paper-bright);
    border-color: var(--rule);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No sweep: the acrylic tag only changes its tint and border. */
  .mf-mat--acrylic::before {
    display: none;
  }

  .mf-mat,
  .mf-mat::before {
    transition: none;
  }
}

/* "By theme" stands beside the call to action, as a quiet link. */
.mf-ahero__actions {
  align-items: center;
  column-gap: 1.5rem;
}

.mf-ahero__jump {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
}

.mf-ahero__jump .mf-icon {
  width: 1.05em;
  height: 1.05em;
  transform: none;
}