/*
 * Homepage presentation for native Gutenberg blocks.
 *
 * Shared FE block styles live in project-pages.css and are available in the
 * editor. This file only contains homepage composition and Query Loop rules.
 */

.home .site-main.home-main {
  padding-top: 0;
}

.fe-home-banner {
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2.5rem) 0;
  background: linear-gradient(180deg, rgba(10, 12, 12, 0.98), #0a0c0c);
}

.fe-home-banner__frame {
  width: min(1500px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(200, 139, 58, 0.42);
  background: #0a0c0c;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(218, 205, 178, 0.04) inset;
}

.fe-home-banner__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.fe-home-document,
.fe-home-content {
  width: 100%;
  max-width: none;
  margin: 0;
}

.fe-home-content {
  overflow-x: clip;
  line-height: 1.72;
}

.fe-home-content > .wp-block-group {
  box-sizing: border-box;
  width: min(var(--fe-project-wide), calc(100% - (var(--fe-project-gutter) * 2)));
  max-width: none;
  margin: 0 auto;
  padding-top: clamp(2.75rem, 6vw, 5rem) !important;
  padding-bottom: clamp(2.75rem, 6vw, 5rem) !important;
}

.fe-home-content > .wp-block-group.alignfull {
  width: 100%;
  padding-right: max(var(--fe-project-gutter), calc((100% - var(--fe-project-wide)) / 2)) !important;
  padding-left: max(var(--fe-project-gutter), calc((100% - var(--fe-project-wide)) / 2)) !important;
  border-top: 1px solid var(--fe-line);
  border-bottom: 1px solid var(--fe-line);
}

.fe-home-content > .wp-block-group:first-child {
  background: radial-gradient(circle at 78% 28%, rgba(200, 139, 58, 0.11), transparent 38%), var(--fe-ash);
}

.fe-home-content > .wp-block-group:first-child > p:first-child {
  color: var(--fe-amber) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
}

.fe-home-content > .wp-block-group:first-child > p:nth-of-type(2) {
  max-width: 48rem;
  color: var(--fe-bone-bright) !important;
}

.fe-home-content > .wp-block-group:first-child > p:nth-of-type(3) {
  max-width: 54rem;
}

.fe-home-content > .wp-block-group.has-background {
  color: var(--fe-bone) !important;
  background-color: #111414 !important;
}

.fe-home-content > .wp-block-group.has-background h2,
.fe-home-content > .wp-block-group.has-background h3,
.fe-home-content > .wp-block-group.has-background p {
  color: var(--fe-bone) !important;
}

.fe-home-content .wp-block-columns {
  gap: clamp(1rem, 2.4vw, 2rem);
}

.fe-home-content .wp-block-column {
  min-width: 0;
}

.fe-home-content > .wp-block-group:nth-child(2) .wp-block-column,
.fe-home-content > .wp-block-group:nth-child(5) .wp-block-column {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--fe-line);
  background: var(--fe-ash);
  box-shadow: inset 0 3px 0 rgba(200, 139, 58, 0.14);
}

.fe-home-content > .wp-block-group:nth-child(3) .wp-block-column {
  display: flex;
  min-height: 21rem;
  flex-direction: column;
  padding: clamp(1.25rem, 2.8vw, 1.75rem) !important;
  border: 1px solid var(--fe-line) !important;
  color: var(--fe-bone) !important;
  background: var(--fe-ash) !important;
  box-shadow: inset 3px 0 0 rgba(200, 139, 58, 0.72);
}

.fe-home-content > .wp-block-group:nth-child(3) .wp-block-column > p:first-child {
  color: var(--fe-copper) !important;
  font-size: 0.75rem !important;
  font-weight: 800;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
}

.fe-home-content > .wp-block-group:nth-child(3) .wp-block-buttons {
  margin-top: auto;
}

.fe-home-content .wp-block-query {
  margin-top: 1.75rem;
}

.fe-home-content .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.fe-home-content .wp-block-post-template.is-flex-container > .wp-block-post,
.fe-home-content .wp-block-post {
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
}

.fe-home-content .wp-block-post > .wp-block-group {
  display: flex;
  width: 100%;
  min-height: 20rem;
  flex-direction: column;
  padding: 1.25rem !important;
  border: 1px solid var(--fe-line) !important;
  background: rgba(10, 12, 12, 0.58);
  box-shadow: inset 0 3px 0 rgba(200, 139, 58, 0.14);
}

.fe-home-content .wp-block-post-terms,
.fe-home-content .wp-block-post-date {
  color: var(--fe-copper);
  font-weight: 800;
}

.fe-home-content .wp-block-post-title {
  margin: 0.65rem 0 0.75rem;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important;
  line-height: 1.3;
}

.fe-home-content .wp-block-post-title a {
  color: var(--fe-bone-bright);
  text-decoration: none;
}

.fe-home-content .wp-block-post-excerpt {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.fe-home-content .wp-block-post-excerpt__more-text {
  margin-top: auto;
  font-weight: 800;
}

.fe-home-content .wp-block-buttons {
  flex-wrap: wrap;
}

.fe-home-content .wp-block-button__link {
  overflow-wrap: anywhere;
}

@media (max-width: 940px) {
  .fe-home-content .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .fe-home-banner {
    padding: 0;
  }

  .fe-home-banner__frame {
    border-right: 0;
    border-left: 0;
    box-shadow: none;
  }

  .fe-home-banner__image {
    min-height: 220px;
    object-position: center;
  }
}

@media (max-width: 620px) {
  .fe-home-content .wp-block-columns,
  .fe-home-content .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }

  .fe-home-content > .wp-block-group:nth-child(3) .wp-block-column {
    min-height: 0;
  }
}
