/*
Theme Name: Varanleg Förðun Reykjavk
Theme URI: https://github.com/clickdees/wordpress-acf-tailwind-starter
Author: Joey Olaopa
Description: A classic-only, no-Gutenberg WordPress starter built for speed. Every page is 100% editable through ACF/SCF Flexible Content sections — Hero, Text+Image, Contact, and whatever you add in /template-parts/sections/. PHP-registered fields, no database bloat, no block editor, no drama. Built for Tailwind CSS, version-controlled, and ready to ship.
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: modular-acf
Tags: classic, acf, custom-fields, flexible-content, no-gutenberg, tailwind, modular, developer
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
*/

/* Responsive photo presentation: keep treatment results complete, not cropped. */
.lookbook-grid .gallery-item {
  aspect-ratio: 1 / 1;
  min-width: 0;
  translate: none;
}
.lookbook-grid .gallery-item > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.lookbook-grid .gallery-item:hover > img {
  transform: none;
}

/* Dedicated photo areas above the homepage treatment descriptions. */
#services > div > .grid {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
}
#services > div > .grid > a {
  grid-column: auto;
  min-height: 0;
  justify-content: flex-start;
}
#services > div > .grid > a > [style*="background-image"] {
  position: relative;
  inset: auto;
  flex: none;
  width: 100%;
  height: clamp(220px, 48vw, 340px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--color-surface-container-low, #f4f3f1);
  opacity: 1;
  mix-blend-mode: normal;
}
#services > div > .grid > a > .absolute:not([style]) {
  display: none;
}
#services > div > .grid > a > .relative:not([style]) {
  flex: 1;
  background: var(--color-surface-container-lowest, #fff);
}
#services > div > .grid > div {
  grid-column: 1 / -1;
}
#services > div > .grid > div > div:first-child {
  min-height: 300px;
}
#services > div > .grid > div > div:first-child > [style*="background-image"] {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  mix-blend-mode: normal;
}
#services > div > .grid > div > div:first-child > .absolute:not([style]) {
  display: none;
}

/* Studio photos retain their original proportions at every breakpoint. */
.studio-photo-frame {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  aspect-ratio: auto;
}
.studio-photo-frame > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  transform: none;
}
.studio-photo-frame:hover > img {
  transform: none;
}
@media (min-width: 768px) {
  #services > div > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .lookbook-grid {
    max-width: 480px;
    margin-inline: auto;
  }
  .studio-photo-frame > img {
    max-height: 440px;
  }
}