/* LAYOUT — estrutura, grids, containers */
@layer layout {

  #shader-hero { position:absolute; inset:0; z-index:0; overflow:hidden; opacity:.55; display:none; }

  /* Hero */
  #hero {
    min-height:  100svh;
    position:    relative;
    overflow:    hidden;
    z-index:     1;
    display:     grid;
    grid-template-rows: 1fr;
  }

  .hero__content {
    display:               grid;
    grid-template-rows:    auto 1fr auto;
    padding:               calc(var(--nav-h) + 1.5rem) var(--gutter) clamp(2rem,4vw,3.5rem);
    position:              relative;
    z-index:               2;
  }

  .hero__top {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   .5rem;
  }

  .hero__mid {
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start;
    padding-top:     1rem;
  }

  .hero__foot {
    display:        flex;
    flex-direction: column;
    gap:            .2rem;
  }

  .hero__foot-bar {
    display:    flex;
    flex-wrap:  wrap;
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: .8rem;
    margin-top:  .5rem;
    gap:         .8rem 1.2rem;
  }

  @media (width <= 860px) {
    .hero__top      { flex-direction: column; gap: .3rem; }
    .hero__foot-bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .hero__foot-bar .hero__actions { flex-wrap: wrap; }
  }

  /* Seção genérica */
  .section { position:relative; border-top:1px solid var(--border); }

  .wrap {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Grids */
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); }
  .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); }

  @media (width <= 860px) {
    .grid-2 { grid-template-columns:1fr; }
    .grid-3 { grid-template-columns:1fr; }
    .grid-4 { grid-template-columns:1fr 1fr; }
    .nav__links { display:none; }
    .footer { flex-direction:column; gap:.6rem; text-align:center; }
  }

  @media (width <= 480px) {
    .grid-4 { grid-template-columns:1fr; }
  }
}