/* Thumbnail backgrounds for newer case studies (Hexby, Office wall art),
   added the same way Webflow generated the original .image-con._1.._6
   rules in rays-exceptional-site-9f1cbb.css. Kept in a separate file
   instead of editing that generated stylesheet directly. Used by the
   homepage gallery and by the case-switcher popover on every page. */
.image-con._7 {
  background-image: url('../images/hexby-ui.webp');
  background-position: 50%;
  background-size: cover;
}

.image-con._9 {
  background-image: url('../images/office-wallart.webp');
  background-position: 50%;
  background-size: cover;
}

.image-con._10 {
  background-image: url('../images/hexbyweb-thumb.png');
  background-position: 50% 50%;
  background-size: cover;
}

/* Hexby case study only: the banner image is the whole section —
   no gradient frame, no inner padding. Other case studies keep
   .loc-websitecon. */
.port-header-banner.hexby-banner {
  padding: 0;
  margin-top: 15px;
}

.port-header-banner.hexby-banner .full-widthimg {
  width: 100%;
  display: block;
}

.locofy-web-vid-placeholder.hexby-shot {
  background-color: #00B08C;
  /* Hug the screenshot instead of the placeholder's 500px (320px on
     phones) minimum height, which left empty green under it. */
  min-height: 0;
}

/* The screenshots carry width/height attributes so their space is held
   before they lazy-load; height: auto keeps that as an aspect ratio. */
.locofy-web-vid-placeholder.hexby-shot img {
  height: auto;
}

/* Half the padding on phones (40 → 20px top and sides). */
@media screen and (max-width: 767px) {
  .locofy-web-vid-placeholder.hexby-shot {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.port-header-banner.photo-banner {
  padding: 0;
  margin-top: 15px;
  border-radius: 10px;
  overflow: hidden;
}

.port-header-banner.photo-banner .full-widthimg {
  width: 100%;
  display: block;
}

.locofy-web-vid-placeholder.photo-shot {
  background-color: #f3f3f1;
  padding: 0;
  min-height: 0;
  align-items: stretch;
}

.locofy-web-vid-placeholder.photo-shot .full-widthimg {
  width: 100%;
  height: auto;
  flex: none;
  display: block;
}

.wall-art-piece {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 56px;
}

.wall-art-piece:first-of-type {
  margin-top: 72px;
}

.wall-art-piece .locofy-web-vid-placeholder {
  margin-top: 0;
}

.wall-art-title {
  font-family: Parkinsans, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 130%;
}

.line-height-140 {
  line-height: 140%;
}

/* Hexby Website case study: Hexby-green version of the Locofy Website
   banner gradient, and green frames around the section screenshots. */
.loc-websitecon.hexbyweb {
  background-image: linear-gradient(0deg, #00b08c00, #00b08c);
}

.loc-websitecon.hexbyweb .full-widthimg {
  border-radius: 6px 6px 0 0;
  display: block;
  width: 100%;
}

/* Hexby Website "Some highlights...": plain screenshots with a thin
   gray border and 6px corners, each with a short label underneath. */
.hexbyweb-highlight {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

/* Extra room between figures (on top of the section's 30px gap) so
   each label clearly belongs to the image above it. */
.hexbyweb-highlight + .hexbyweb-highlight {
  margin-top: 26px;
}

.hexbyweb-highlight-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
}

.hexbyweb-caption {
  margin: 0;
  color: var(--_main-style---graytext);
  font-family: Parkinsans, sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  line-height: 160%;
  text-align: left;
}

/* Hashtag category label (Hexby Website: "#MadeWithHexby") keeps its
   own casing instead of the category's usual uppercase. */
.port-cat.is-hashtag {
  text-transform: none;
}