/* ============================================================
   MITTE BÜRO — FURNITURE & DECOR

   Loaded AFTER:
   /style.css
   /venue/venue.css

   NAVIGATION
   ------------------------------------------------------------
   [00] SETTINGS
   [01] OVERLAY
   [02] HEADER
   [03] CONTENT
   [04] FURNITURE GRID
   [05] PIECES + IMAGES
   [06] CAPTIONS
   [07] FOOTER
   [08] DESKTOP
   [09] HOVER
   [10] REDUCED MOTION
   ============================================================ */


/* ============================================================
   [00] SETTINGS
   ============================================================ */

.venue-furniture-overlay {

  --furniture-transition:
    0.32s;

  --furniture-fast-transition:
    0.16s;

  --furniture-image-reveal-transition:
    0.28s;

  /*
    Mobile grid:
    two equal columns with full-width featured interruptions.
  */

  --furniture-mobile-column-gap:
    12px;

  --furniture-mobile-row-gap:
    40px;

  /*
    Image → caption.
  */

   --furniture-number-gap:
  0px;
   
  --furniture-caption-gap:
    0px;

  /*
    Desktop:
    six equal columns.
  */

  --furniture-desktop-column-gap:
    32px;

  --furniture-desktop-row-gap:
    72px;
}


/* ============================================================
   [01] OVERLAY

   Full-screen scrollable layer.

   No transform:
   keeps scrolling crisp and avoids creating
   unnecessary containing blocks.
   ============================================================ */

.venue-furniture-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    1050;

  width:
    100%;

  height:
    100dvh;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  background:
    var(--paper);

  color:
    var(--ink);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity
    var(--furniture-transition)
    ease,

    visibility
    0s
    linear
    var(--furniture-transition);

  -webkit-overflow-scrolling:
    touch;
}


.venue-furniture-overlay.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transition:
    opacity
    var(--furniture-transition)
    ease,

    visibility
    0s
    linear
    0s;
}


body.venue-furniture-is-open {
  overflow:
    hidden;
}


/* ============================================================
   [02] HEADER

   Normal document content.
   It appears at the top of the furniture view
   and scrolls away naturally with the inventory.
   ============================================================ */

.venue-furniture__header {
  position:
    relative;

  box-sizing:
    border-box;

  width:
    100%;

  height:
    72px;
}


/* ------------------------------------------------------------
   Title
   ------------------------------------------------------------ */

.venue-furniture__title {
  position:
    absolute;

  top:
    28px;

  left:
    var(--side);

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  -webkit-text-stroke:
    0;
}


/* ------------------------------------------------------------
   Close cross

   Persistent independently from the header.
   The title scrolls away; the close control remains available.
   ------------------------------------------------------------ */

.venue-furniture__close {
  position:
    fixed;

  top:
    21px;

  right:
    var(--side);

  z-index:
    1100;

  width:
    24px;

  height:
    24px;

  padding:
    0;

  margin:
    0;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    var(--ink);

  font-size:
    0;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    opacity
    var(--furniture-fast-transition)
    ease;
}


.venue-furniture__close::before,
.venue-furniture__close::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    16px;

  height:
    2px;

  background:
    var(--ink);
}


.venue-furniture__close::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.venue-furniture__close::after {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}


/* ============================================================
   [03] CONTENT
   ============================================================ */

.venue-furniture__content {
  box-sizing:
    border-box;

  width:
    100%;

  min-width:
    0;

  padding:
    10px
    var(--side)
    0;
}


/* ============================================================
   [04] FURNITURE GRID

   MOBILE:
   two equal columns.

   Featured pieces span both columns,
   but remain in exactly the same sequence.
   ============================================================ */

.venue-furniture__grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  column-gap:
    var(--furniture-mobile-column-gap);

  row-gap:
    var(--furniture-mobile-row-gap);

  width:
    100%;

  min-width:
    0;
}
/* ============================================================
   PIECE NUMBER

   Always visible on mobile and desktop.
   Same typography as site micrographics.
   ============================================================ */

.venue-furniture__number {
  display:
    block;

  width:
    100%;

  margin:
    0 0
    var(--furniture-number-gap);

  padding:
    0;

  color:
    var(--ink);

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  text-align:
    left;

  -webkit-text-stroke:
    0;
}

/* ============================================================
   [05] PIECES + IMAGES
   ============================================================ */

.venue-furniture__piece {
  position:
    relative;

  box-sizing:
    border-box;

  display:
    block;

  width:
    100%;

  min-width:
    0;

  margin:
    0;

  padding:
    0;

  overflow:
    visible;
}


/* ------------------------------------------------------------
   Standard mobile piece
   ------------------------------------------------------------ */

.venue-furniture__piece.is-mobile-standard {
  grid-column:
    auto;
}


/* ------------------------------------------------------------
   Featured mobile piece

   #05
   #10
   #15
   #20
   #25
   #30
   #35
   #40

   JS assigns this class explicitly.
   ------------------------------------------------------------ */

.venue-furniture__piece.is-mobile-featured {
  grid-column:
    1 / -1;
}


/* ------------------------------------------------------------
   Image frame

   All source files use the same dimensions,
   so the grid can use one consistent square field.
   ------------------------------------------------------------ */

.venue-furniture__image-frame {
  position:
    relative;

  display:
    block;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  margin:
    0;

  overflow:
    hidden;

  background:
    var(--paper);
}


/* ------------------------------------------------------------
   Image

   Starts invisible.
   furniture.js adds .is-loaded after load / decode.
   ------------------------------------------------------------ */

.venue-furniture__image {
  display:
    block;

  width:
    100%;

  height:
    100%;

  margin:
    0;

  object-fit:
    contain;

  background:
    var(--paper);

  opacity:
    0;

  transition:
    opacity
    var(--furniture-image-reveal-transition)
    ease;
}


.venue-furniture__image.is-loaded {
  opacity:
    1;
}


/* ============================================================
   [06] CAPTIONS

   MOBILE:
   always visible beneath every image.

   Same typography as site micrographics.
   ============================================================ */

.venue-furniture__caption {
  display:
    block;

  width:
    100%;

  margin:
    var(--furniture-caption-gap)
    0
    0;

  padding:
    0;

  color:
    var(--ink);

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    1.15;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  text-align:
    left;

  -webkit-text-stroke:
    0;
}


/* ============================================================
   [07] FOOTER
   ============================================================ */

.venue-furniture__footer {
  box-sizing:
    border-box;

  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  align-items:
    end;

  gap:
    20px;

  width:
    100%;

  margin-top:
    80px;

  padding:
    0
    var(--side)
    max(
      28px,
      env(safe-area-inset-bottom)
    );
}


/* ------------------------------------------------------------
   Shared footer typography
   ------------------------------------------------------------ */

.venue-furniture__footer-left,
.venue-furniture__footer-right {
  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    1.35;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  -webkit-text-stroke:
    0;
}


/* ------------------------------------------------------------
   Mobile footer — left
   ------------------------------------------------------------ */

.venue-furniture__footer-left {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  text-align:
    left;
}


/* ------------------------------------------------------------
   Mobile footer — right
   ------------------------------------------------------------ */

.venue-furniture__footer-right {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  justify-self:
    end;

  text-align:
    right;
}


/* ------------------------------------------------------------
   Footer links
   ------------------------------------------------------------ */

.venue-furniture__footer a {
  color:
    var(--ink);

  text-decoration:
    none;

  transition:
    color
    var(--furniture-fast-transition)
    ease;
}


/* ------------------------------------------------------------
   Desktop footer hidden on mobile
   ------------------------------------------------------------ */

.venue-furniture__footer-desktop {
  display:
    none;
}

/* ============================================================
   [08] DESKTOP

   Shared wide-screen scale:
   - unchanged through 1440px
   - gradual growth to 125% at 1800px
   - centered composition beyond 1800px

   Mobile layout, image order and hover behavior are unchanged.
   ============================================================ */

@media (min-width: 800px) {


  /* ----------------------------------------------------------
     SHARED SCALE

     The overlay background remains full-screen.
     Only its content frame is bounded.
     ---------------------------------------------------------- */

  .venue-furniture-overlay {
    --desktop-layout-unit:
      var(--wide-unit, 1px);

    --desktop-edge:
      calc(28 * var(--desktop-layout-unit));

    --micro-font-size:
      calc(10 * var(--desktop-layout-unit));

    --furniture-desktop-column-gap:
      calc(32 * var(--desktop-layout-unit));

    --furniture-desktop-row-gap:
      calc(72 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     CENTERED CONTENT FRAME
     ---------------------------------------------------------- */

  .venue-furniture__header,
  .venue-furniture__content,
  .venue-furniture__footer {
    width: 100%;
    max-width: var(--wide-max-width, 1800px);
    margin-left: auto;
    margin-right: auto;
  }


  /* ----------------------------------------------------------
     HEADER

     The title scrolls with the inventory.
     The close button remains independently fixed.
     ---------------------------------------------------------- */

  .venue-furniture__header {
    height:
      calc(72 * var(--desktop-layout-unit));
  }


  .venue-furniture__title {
    top:
      var(--desktop-edge);

    left:
      var(--desktop-edge);
  }


  .venue-furniture__close {
    top:
      calc(
        var(--desktop-edge) -
        (7 * var(--desktop-layout-unit))
      );

    right:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-edge)
      );

    width:
      calc(24 * var(--desktop-layout-unit));

    height:
      calc(24 * var(--desktop-layout-unit));
  }


  .venue-furniture__close::before,
  .venue-furniture__close::after {
    width:
      calc(16 * var(--desktop-layout-unit));

    height:
      calc(2 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     CONTENT
     ---------------------------------------------------------- */

  .venue-furniture__content {
    padding:
      calc(10 * var(--desktop-layout-unit))
      var(--desktop-edge)
      0;
  }


  /* ----------------------------------------------------------
     DESKTOP GRID

     Six equal columns.
     Images and gaps grow together with the shared scale.
     ---------------------------------------------------------- */

  .venue-furniture__grid {
    grid-template-columns:
      repeat(
        6,
        minmax(0, 1fr)
      );

    column-gap:
      var(--furniture-desktop-column-gap);

    row-gap:
      var(--furniture-desktop-row-gap);
  }


  /*
    Cancel mobile placement roles.
    The item order remains untouched.
  */

  .venue-furniture__piece.is-mobile-standard,
  .venue-furniture__piece.is-mobile-featured {
    grid-column:
      auto;
  }


  /* ----------------------------------------------------------
     DESKTOP IMAGES

     Every image cell retains the same square geometry.
     ---------------------------------------------------------- */

  .venue-furniture__image-frame {
    width:
      100%;

    aspect-ratio:
      1 / 1;
  }


  /* ----------------------------------------------------------
     DESKTOP CAPTIONS

     Captions remain outside the image field.
     Revealing one never moves the grid or changes row heights.

     Mouse / trackpad hover behavior remains in [09].
     Touch-only desktop devices retain visible captions.
     ---------------------------------------------------------- */

  .venue-furniture__caption {
    position:
      absolute;

    top:
      calc(
        100% +
        var(--furniture-caption-gap)
      );

    left:
      0;

    z-index:
      2;

    width:
      max-content;

    max-width:
      none;

    margin:
      0;

    white-space:
      nowrap;

    overflow:
      visible;

    opacity:
      1;

    pointer-events:
      none;

    transition:
      opacity
      var(--furniture-fast-transition)
      ease;
  }


  /* ----------------------------------------------------------
     DESKTOP FOOTER

     Aligned to the centered frame.
     Existing line-height rhythm is retained.
     ---------------------------------------------------------- */

  .venue-furniture__footer {
    display:
      block;

    width:
      100%;

    margin-top:
      calc(72 * var(--desktop-layout-unit));

    padding:
      0
      var(--desktop-edge)
      var(--desktop-edge);
  }


  .venue-furniture__footer-mobile {
    display:
      none;
  }


  .venue-furniture__footer-desktop {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items:
      start;

    width:
      100%;
  }


  .venue-furniture__footer-desktop-left,
  .venue-furniture__footer-desktop-right {
    display:
      flex;

    flex-direction:
      column;

    align-self:
      start;

    margin:
      0;

    padding:
      0;

    font-family:
      "Barlow Semi Condensed",
      sans-serif;

    font-size:
      var(--micro-font-size);

    font-weight:
      800;

    line-height:
      1.35;

    letter-spacing:
      0.04em;

    text-transform:
      uppercase;

    -webkit-text-stroke:
      0;
  }


  .venue-furniture__footer-desktop-left {
    align-items:
      flex-start;

    text-align:
      left;
  }


  .venue-furniture__footer-desktop-right {
    align-items:
      flex-end;

    justify-self:
      end;

    text-align:
      right;
  }


  /* ----------------------------------------------------------
     CLICKABLE GOOGLE MAPS ADDRESS
     ---------------------------------------------------------- */

  .venue-furniture__address-link--desktop {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-end;

    align-self:
      start;

    width:
      max-content;

    margin:
      0;

    padding:
      0;

    color:
      var(--ink);

    line-height:
      inherit;

    text-align:
      right;

    text-decoration:
      none;
  }


  .venue-furniture__address-link--desktop span {
    display:
      block;

    margin:
      0;

    padding:
      0;

    line-height:
      inherit;
  }

}

/* ============================================================
   [09] HOVER
   True mouse / trackpad only

   DESKTOP:
   captions are hidden normally and appear only
   when their corresponding piece is hovered.

   Their absolute positioning means nothing moves.
   ============================================================ */

@media
  (min-width: 800px)
  and (hover: hover)
  and (pointer: fine) {


  .venue-furniture__caption {
    opacity:
      0;
  }


  .venue-furniture__piece:hover
  .venue-furniture__caption {
    opacity:
      1;
  }


  .venue-furniture__close:hover {
    opacity:
      0.65;
  }


  .venue-furniture__footer a:hover {
    color:
      var(--muted-hover);
  }

}


/* ============================================================
   [10] REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {


  .venue-furniture-overlay,
  .venue-furniture__close,
  .venue-furniture__image,
  .venue-furniture__caption,
  .venue-furniture__footer a {
    animation:
      none !important;

    transition:
      none !important;
  }

}