/* General */
.basic-section {
  margin-block: var(--spacing-l);
  padding: var(--spacing-m);
  display: grid;
  gap: var(--spacing-m);
  width: 100%;
}

.textbox {
  display: grid;
  gap: var(--spacing-s);
}

.cta-box {
  background-color: hsla(0, 0%, 0%, 0.05);
  padding: var(--spacing-l);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: var(--spacing-m);
}

@media (min-width: 600px) {
  .basic-section {
    grid-template-columns: repeat(12, 1fr);
  }
  .basic-section .textbox {
    grid-column: 4 / 10;
  }
  .basic-section .cta-box {
    grid-column: 3 / 11;
  }
}
@media (min-width: 1200px) {
  .basic-section .textbox {
    grid-column: 5 / 9;
  }
  .basic-section .cta-box {
    grid-column: 5 / 9;
  }
}

/* Text and image section */

.text-and-image-section {
  align-items: center;
}

@media (min-width: 600px) {
  .text-and-image-section .textbox {
    grid-column: 7 / 13;
    grid-row: 1;
  }
  .text-and-image-section .media {
    grid-column: 1 / 7;
    grid-row: 1;
  }
  .text-and-image-section.right .textbox {
    grid-column: 1 / 7;
    grid-row: 1;
  }
  .text-and-image-section.right .media {
    grid-column: 7 / 13;
    grid-row: 1;
  }
}
@media (min-width: 1200px) {
  .text-and-image-section .textbox {
    grid-column: 8 / 12;
  }
  .text-and-image-section .media {
    grid-column: 2 / 7;
  }
  .text-and-image-section.right .textbox {
    grid-column: 2 / 6;
  }
  .text-and-image-section.right .media {
    grid-column: 7 / 12;
  }
}

/* Slideshow section */
.slideshow-section {
  position: relative;
  overflow: clip;
  display: block;
  width: 100%;
}

.carousel-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: var(--spacing-s);
  display: flex;
  gap: var(--spacing-xs);
}

.carousel-controls .button {
  padding: 12px;
}

.slides-wrapper {
  display: flex;
}

.project-slide {
  flex: 0 0 100%;
  min-width: 0;

  position: relative;
  height: calc(100vh - var(--header-height));
  display: flex;
  justify-content: start;
  align-items: end;
}

.project-slide .meta {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--spacing-xs);
  padding: var(--spacing-s);
  padding-right: 200px;
}

.project-slide video,
.project-slide img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Featured projects section */

.featured-projects-section {
  display: block;
  padding: var(--spacing-m);
  margin-block: var(--spacing-l);
  overflow: clip;
}

.featured-projects-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-m);
}

.featured-projects-section .carousel-controls {
  position: static;
  padding: 0;
  margin-top: var(--spacing-m);
}

custom-carousel:not([data-scrollable]) .carousel-controls {
  display: none;
}

.featured-projects-section .slides-wrapper {
  gap: var(--spacing-m);
}

.featured-project-slide {
  flex: 0 0 100%;
  min-width: 0;
}

@media (min-width: 500px) {
  .featured-project-slide {
    flex: 0 0 calc(50% - var(--spacing-m) / 2);
  }
}
@media (min-width: 1000px) {
  .featured-project-slide {
    flex: 0 0 calc(33.333% - var(--spacing-m) * 2 / 3);
  }
}
@media (min-width: 1500px) {
  .featured-project-slide {
    flex: 0 0 calc(25% - var(--spacing-m) * 3 / 4);
  }
}

/* Team section */
.team-section {
  padding: var(--spacing-m);
  display: grid;
  gap: var(--spacing-m);
}

.team-member-list {
  gap: var(--spacing-m);
  display: grid;
}

.team-member-card {
  display: grid;
  gap: var(--spacing-s);

  .bio {
    padding-left: var(--spacing-m);
  }
}

/* Contact section */

.contact-form {
  display: grid;
  gap: var(--spacing-s);
}

.form-alert {
  padding: var(--spacing-s);
}
.form-alert--success {
  background-color: var(--color-bg-accent);
  color: hsl(140, 40%, 25%);
}
.form-alert--error {
  background-color: hsl(0, 50%, 95%);
  color: hsl(0, 50%, 50%);
}
.form-alert ul {
  margin: 0;
  padding-left: 1.2em;
}

.input--error {
  border-color: hsl(0, 50%, 50%);
}

.field-error {
  color: hsl(0, 50%, 50%);
  font-size: 0.85em;
}

.uniform__potty {
  position: absolute;
  left: -9999px;
}

/* Header section */

.header-section {
  padding: var(--spacing-xl) var(--spacing-m);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Projects grid */

.project-card {
  display: flex;
  flex-direction: column;
  background-color: hsla(0, 0%, 0%, 0.05);
  transition: background-color 0.15s ease;
  height: 100%;
}
.project-card:hover {
  background-color: var(--color-bg-accent);
}
.project-card:active {
  background-color: hsla(0, 0%, 0%, 0.1);
}
.project-card .thumbnail-image {
  aspect-ratio: 1;
  object-fit: cover;
}
.project-card .meta {
  flex: 1;
  padding: var(--spacing-s);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-wrap: balance;
}
.projects-grid {
  --cols: 1;
  display: grid;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 1fr;
}

@media (min-width: 500px) {
  .projects-grid {
    --cols: 2;
  }
}
@media (min-width: 1000px) {
  .projects-grid {
    --cols: 3;
  }
}
@media (min-width: 1500px) {
  .projects-grid {
    --cols: 4;
  }
}

/* Project page */

.project-header-section {
  padding: var(--spacing-m);
  padding-top: var(--spacing-xl);
  display: grid;
  gap: var(--spacing-s);
}

.image-section {
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.image-section > * {
  flex: 1;
}

@media (min-width: 600px) {
  .image-section {
    flex-direction: row;
  }
}

.image-section.medium {
  max-width: 800px;
  margin-inline: auto;
}

.image-section.small {
  max-width: 560px;
  margin-inline: auto;
}

.image-section img {
  width: 100%;
  height: auto;
}

.quote-section {
  padding: var(--spacing-xl) var(--spacing-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-m);
  background-color: var(--color-bg-accent);
}

.quote-section .quote {
  font-style: italic;
  text-align: center;
  max-width: 50ch;
  text-wrap: balance;
}

@media (min-width: 600px) {
  .quote-section {
    padding-block: var(--spacing-xxl);
  }
}

.related-projects-section {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.related-projects-grid {
  --cols: 1;
  display: grid;
  gap: var(--spacing-m);
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 1fr;
}

@media (min-width: 500px) {
  .related-projects-grid {
    --cols: 2;
  }
}
@media (min-width: 1000px) {
  .related-projects-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@media (min-width: 1500px) {
  .related-projects-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}