/**
 * Logez reusable frontend components.
 *
 * Classes are intentionally prefixed with `lz-` to avoid conflicts with
 * Elementor, WordPress core and third-party plugins.
 */

/* Layout */
.lz-section {
  padding-block: var( --lz-space-xl );
}

.lz-section--dark {
  background: var( --lz-color-dark );
  color: var( --lz-color-white );
}

.lz-section--charcoal {
  background: var( --lz-color-charcoal );
  color: var( --lz-color-white );
}

.lz-section--light {
  background: var( --lz-color-surface-light );
  color: var( --lz-color-dark );
}

.lz-section--accent {
  background: var( --lz-color-accent );
  color: var( --lz-color-dark );
}

.lz-container {
  width: min( 100% - 2rem, var( --lz-width-content ) );
  margin-inline: auto;
}

.lz-container--wide {
  width: min( 100% - 2rem, var( --lz-width-wide ) );
}

.lz-container--text {
  width: min( 100% - 2rem, var( --lz-width-text ) );
}

.lz-container--narrow {
  width: min( 100% - 2rem, var( --lz-width-narrow ) );
}

.lz-grid {
  display: grid;
  gap: var( --lz-space-md );
}

/* Buttons */
.lz-button,
.elementor-button.lz-button,
.elementor-button-wrapper .lz-button {
  align-items: center;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  font-family: var( --lz-font-body-family );
  font-size: var( --lz-font-body );
  font-weight: 700;
  justify-content: center;
  line-height: var( --lz-line-button );
  min-height: 44px;
  padding: 0.75em 1.35em;
  text-align: center;
  text-decoration: none;
  transition: background-color var( --lz-transition-base ), color var( --lz-transition-base ), border-color var( --lz-transition-base ), inline-size var( --lz-transition-base ), width var( --lz-transition-base );
}

.lz-button--default,
.elementor-button.lz-button--default {
  background: var( --lz-color-accent );
  color: var( --lz-color-dark );
}

.lz-button--default:where( :hover, :focus-visible ),
.elementor-button.lz-button--default:where( :hover, :focus-visible ) {
  background: var( --lz-color-white );
  color: var( --lz-color-dark );
}

.lz-button--boom,
.elementor-button.lz-button--boom {
  background: var( --lz-color-accent );
  color: var( --lz-color-dark );
  inline-size: auto;
  overflow: hidden;
}

.lz-button--boom:where( :hover, :focus-visible ),
.elementor-button.lz-button--boom:where( :hover, :focus-visible ) {
  inline-size: 100%;
}

.lz-social-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
}

/* Cards */
.lz-card,
.lz-project-card,
.lz-post-card,
.lz-team-card {
  position: relative;
}

.lz-card__link,
.lz-project-card__link,
.lz-post-card__link,
.lz-team-card__link {
  color: inherit;
  display: block;
  text-decoration: none;
}

.lz-card__media,
.lz-project-card__media,
.lz-post-card__media,
.lz-team-card__media {
  margin: 0;
  overflow: hidden;
}

.lz-card__media img,
.lz-project-card__media img,
.lz-post-card__media img,
.lz-team-card__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform var( --lz-transition-base );
  width: 100%;
}

.lz-card__link:where( :hover, :focus-visible ) img,
.lz-project-card__link:where( :hover, :focus-visible ) img,
.lz-post-card__link:where( :hover, :focus-visible ) img,
.lz-team-card__link:where( :hover, :focus-visible ) img {
  transform: scale( 1.025 );
}

.lz-project-card__media {
  aspect-ratio: 1 / 1;
}

.lz-post-card {
  background: var( --lz-color-charcoal );
  color: var( --lz-color-white );
}

.lz-post-card__media {
  aspect-ratio: 3 / 2;
}

.lz-team-card__media {
  aspect-ratio: 2 / 3;
}

.lz-card__content,
.lz-project-card__content,
.lz-post-card__content,
.lz-team-card__content {
  padding-block-start: var( --lz-space-sm );
}

.lz-post-card__content {
  padding: var( --lz-space-md );
}

/* Tiles */
.lz-tile {
  padding: var( --lz-space-md );
}

.lz-tile--dark {
  background: var( --lz-color-dark );
  color: var( --lz-color-white );
}

.lz-tile--charcoal {
  background: var( --lz-color-charcoal );
  color: var( --lz-color-white );
}

.lz-tile--accent {
  background: var( --lz-color-accent );
  color: var( --lz-color-dark );
}

.lz-tile--light {
  background: var( --lz-color-surface-light );
  color: var( --lz-color-dark );
}

/* Heroes */
.lz-hero {
  align-items: end;
  display: grid;
  min-height: min( 75vh, 760px );
  overflow: hidden;
  position: relative;
}

.lz-hero__media {
  inset: 0;
  margin: 0;
  position: absolute;
  z-index: 0;
}

.lz-hero__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.lz-hero__content {
  position: relative;
  z-index: 1;
}

.lz-hero--project .lz-hero__media,
.lz-hero--post .lz-hero__media {
  aspect-ratio: 21 / 9;
}

/* Galleries */
.lz-gallery {
  display: grid;
  gap: var( --lz-space-md );
  grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.lz-gallery__item {
  margin: 0;
  overflow: hidden;
}

.lz-gallery__item.is-full,
.lz-gallery__item.is-wide,
.lz-gallery__item.is-video {
  grid-column: 1 / -1;
}

.lz-gallery__item.is-full {
  aspect-ratio: 3 / 2;
}

.lz-gallery__item.is-half {
  aspect-ratio: 3 / 2;
}

.lz-gallery__item.is-half-portrait {
  aspect-ratio: 3 / 4;
}

.lz-gallery__item.is-wide {
  aspect-ratio: 21 / 9;
}

.lz-gallery__item.is-square {
  aspect-ratio: 1 / 1;
}

.lz-gallery__item.is-video {
  aspect-ratio: 16 / 9;
}

.lz-gallery__image,
.lz-gallery__item img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.lz-gallery__caption {
  font-size: var( --lz-font-small );
  line-height: var( --lz-line-small );
  margin-block-start: var( --lz-space-xs );
}

/* Entry navigation */
.lz-entry-navigation a {
  text-decoration: none;
}

.lz-entry-navigation a:where( :hover, :focus-visible ) {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

/* Accordions */
.lz-accordion :where( details ) {
  border-block-start: 1px solid var( --lz-border-on-dark );
  padding-block: var( --lz-space-sm );
}

.lz-accordion :where( details:last-child ) {
  border-block-end: 1px solid var( --lz-border-on-dark );
}

.lz-accordion :where( summary ) {
  cursor: pointer;
  font-family: var( --lz-font-bold-family );
  font-size: var( --lz-font-h5 );
  line-height: var( --lz-line-heading );
}

@media ( max-width: 767px ) {
  .lz-gallery {
    grid-template-columns: 1fr;
  }

  .lz-gallery__item,
  .lz-gallery__item.is-full,
  .lz-gallery__item.is-wide,
  .lz-gallery__item.is-video {
    grid-column: auto;
  }

  .lz-hero {
    min-height: 55vh;
  }
}