/* PANEL FOTO: dark rounded panel with a photo and a call to action */

.panel-foto-section.section {
  padding-block: var(--space-xl);
}

.panel-foto {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 14rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-dark);
  box-shadow: var(--shadow-xl);
  isolation: isolate;
}

.panel-foto-media {
  position: relative;
  z-index: 0;
  min-height: 12rem;
}

.panel-foto-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.panel-foto--left .panel-foto-media::after {
  background: linear-gradient(90deg, rgba(5, 11, 13, 0) 40%, var(--color-bg-dark) 100%);
}

.panel-foto--right .panel-foto-media {
  order: 2;
}

.panel-foto--right .panel-foto-media::after {
  background: linear-gradient(270deg, rgba(5, 11, 13, 0) 40%, var(--color-bg-dark) 100%);
}

.panel-foto-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
}

.panel-foto-title {
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: var(--font-bold);
  line-height: 1.25;
  color: #ffffff;
}

.panel-foto-text {
  color: var(--color-on-dark-soft);
}

.panel-foto-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-sm);
}

@media (max-width: 768px) {
  .panel-foto {
    grid-template-columns: 1fr;
  }

  .panel-foto-media,
  .panel-foto--right .panel-foto-media {
    order: 0;
    min-height: 11rem;
  }

  .panel-foto--left .panel-foto-media::after,
  .panel-foto--right .panel-foto-media::after {
    background: linear-gradient(180deg, rgba(5, 11, 13, 0) 40%, var(--color-bg-dark) 100%);
  }

  .panel-foto-content {
    padding: var(--space-lg);
  }
}

@media (max-width: 640px) {
  .panel-foto-actions .btn {
    width: 100%;
  }
}