body.archive {
  --data-list-columns: repeat(3, 1fr);
}

.page-layout {
  grid-column: var(--width-full);
  display: grid;
  grid-template-columns: subgrid;
}


#home-hero{
  --section-layout-padding-block: var(--space-20x);
  --title-font-size: var(--font-size-2xl);
  --title-font-style: italic;
  --title-font-weight: regular;
  --button-font-style: italic;
  --button-background-color: #fff;
  --button-border: 2px solid transparent;
  --button-color: var(--color-container);
}

#home-diferenciais{
  --section-layout-padding-block: var(--space-6x);
  --data-list-columns: repeat(4, 1fr);
  --title-font-family: var(--font-family-base);
  --title-font-size: calc(18 / 16 * 1rem);
  --title-color: var(--color-on-container);
}

@media(width <= 900px){
  #home-diferenciais{
    --data-list-columns: repeat(2, 1fr);
  }
}

#home-atuacao{
  --section-layout-background: #D9D9D9;
  --section-layout-image: url(../assets/images/bg-areas-de-atuacao.png);
  --title-section-font-size: var(--font-size-lg);
  --title-section-font-style: italic;
  --title-font-size: calc(18 / 16 * 1rem);
  --title-color: var(--color-on-container);
  --title-font-style: italic;
  --title-font-weight: 500;
  --data-list-columns: repeat(3, 1fr);
  --paragraph-font-size: var(--font-size-md);
  .data-list{
    --paragraph-font-size: var(--font-size-xs);
  }
}

@media(width <= 900px){
  #home-atuacao{
    --data-list-columns: repeat(1, 1fr);
  }
}

#home-about{
  --section-layout-padding-block: var(--space-8x);
  --section-header-position: 4 / middle;
  --section-content-position: middle / -4;
  --section-header-gap: var(--space-1x);
}

@media(width <= 900px){
  #home-about{
    --section-header-position: 3 / -3;
    --section-content-position: 3 / -3;
  }
}

#home-blog{
  --section-layout-background: #D9D9D9;
  .section-content {
    display: grid;
    grid-template-columns: subgrid;
  }
}

.topic-post {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  --title-font-size: var(--font-size-lg);
  --title-line-height: 1.5;  
  &:nth-child(even){
    .topic-post-content {
      grid-column: 3/6;
    }
    .topic-post-thumb {
      grid-column: 7/-1;
    }
  }
  &:not(:last-child) {
    margin-block-end: 100px;
  }
}

.topic-post-thumb {
  width: 100%;
  height: 50vh;
  grid-column: 3 / 6;
  grid-row: 1 / -1;
  object-fit: cover;
}

.topic-post-content {
  grid-column: 7/-1;
  grid-row: 1 / -1;
  display: grid;
  gap: var(--space-half)
}

@media(width <= 900px){
  #home-blog{
    --data-list-gap: var(--space-6x);
  }
  .topic-post{
    gap: var(--space-3x);
  }
  .topic-post-thumb, .topic-post-content  {
    height: unset;
    grid-column: unset;
    grid-row: unset;
  }
}

.single-layout{
  grid-column: var(--width-full);
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--space-7x);
  margin-block-end: var(--space-5x);
}

.header-internal {
  grid-column: var(--header-internal-grid-column, 3 / -3);
  display: grid;
  gap: var(--space-3x);
}

@media(width <= 900px){
  :root{
    --header-internal-grid-column: var(--width-wrap);
    --single-content-grid-column: var(--width-wrap);
  }
}

.definition {
  display: flex;
  gap: var(--space-6x);
}
.definition-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-h1lf);
}
.definition-item-title {
  font-weight: bold;
}

@media(width <= 900px){
  .definition{
    gap: var(--space-1x);
    flex-direction: column;
  }
}

.single-cover{
  grid-column: var(--width-wrap);
  border-radius: var(--border-radius-md);
  overflow: hidden;

  img{
    height: var(--single-cover-height, 400px);
    object-fit: cover;
  }
}

@media(width <= 900px){
  :root{
    --single-cover-height: 200px;
  }
}

.post-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.post-author:hover {
  opacity: 0.8;
}

.post-author .author-avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.post-author .author-name {
  font-weight: 500;
  color: #222;
}

.single-content{
  grid-column: var(--single-content-grid-column, 3 / -3);;
  display: grid;
  gap: var(--space-3x);
}

.alicerce-share-icons {
  padding: var(--space-2x) var(--space-3x);
  background: var(--color-container-low);
  width: fit-content;
  border-radius: var(--border-radius-sm);
  font-weight: bold;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  .share-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: currentColor;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      opacity: 1;
    }
  }
    
  svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
  }
}

@media(width <= 900px){
  .alicerce-share-icons {
    width: 100%;
  }
}

#contact-form {
  --section-layout-padding-block: var(--space-5x);
  --title-font-family: var(--font-family-base);
  --title-font-size: var(--font-size-lg);
}

.contact-form{
  background-color: var(--color-container);
  padding: var(--space-8x);
  border-radius: var(--border-radius-md);
}

#contact-address {
  --section-layout-padding-block: var(--space-5x);
  --title-font-family: var(--font-family-base);
  --title-font-size: var(--font-size-lg);
  --subtitle-font-family: var(--font-family-base);
  --subtitle-font-size: var(--font-size-sm);
  background-image: url(./images/bg-mapa.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
  .section-header {
    background: var(--color-container);
    padding: var(--space-7x) var(--space-5x);
    border-radius: var(--border-radius-md);
    box-shadow: 3px 3px 8px -2px #00000070;
  }
}

@media(width >= 901px){
  #contact-address {
    --section-header-position: wrap-start / 7;
  }
}