/* =========================================================
   START — HERO / IDADE GESTACIONAL — RESPONSIVE
   ========================================================= */

@media (min-width: 700px) {

  .hero {
    padding: 64px 32px 44px;
    text-align: center;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .age-card {
    width: min(100% - 40px, 1080px);
    margin: 0 auto;
    padding: 38px;
  }

  .age-main > span:not(.age-and) {
    font-size: 4.5rem;
  }

  .birth-editor {
    max-width: 760px;
    margin: 22px auto 0;
  }

}

/* =========================================================
   END — HERO / IDADE GESTACIONAL — RESPONSIVE
   ========================================================= */


/* =========================================================
   START — POSTS / ATUALIZAÇÕES — RESPONSIVE
   ========================================================= */

@media (min-width: 700px) {

  .updates-slider {
    gap: 18px;
  }

  .update-card {
    flex: 0 0 calc((100% - 18px) / 2);
  }

}

@media (min-width: 900px) {

  .updates-slider {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    overflow: visible;

    padding: 0 2px 8px;
  }

  .update-card {
    width: 100%;
    flex: none;
  }

}

@media (min-width: 1000px) {

  .updates {
    padding-top: 64px;
  }

}

@media (max-width: 699px) {

  .updates-arrow {
    display: none;
  }

}

@media (min-width: 900px) {

  .updates-slider:has(.empty-updates) {
    display: block;
    overflow: visible;
  }

  .updates-slider .empty-updates {
    width: 100%;
    max-width: none;

    margin-left: 50%;
    transform: translateX(-50%);
  }

}

/* =========================================================
   END — POSTS / ATUALIZAÇÕES — RESPONSIVE
   ========================================================= */


/* =========================================================
   START — LINHA DO TEMPO / PRÓXIMOS MARCOS — RESPONSIVE
   ========================================================= */

@media (min-width: 900px) {

  .timeline {
    grid-template-columns: repeat(4, 1fr);
    padding: 0;
    gap: 8px;
  }

  .timeline::before {
    display: none;
  }

  .milestone {
    display: block;
    min-height: 100px;
    position: relative;
  }

  .milestone::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: -8px;
    height: 1px;
    background: var(--line);
    z-index: 0;
  }

  /* Último item de cada linha não desenha linha */
  .milestone:nth-child(4n)::after,
  .milestone:last-child::after {
    display: none;
  }

  .milestone-dot {
    position: relative;
    z-index: 1;
    margin-bottom: 13px;
  }

}

/* =========================================================
   END — LINHA DO TEMPO / PRÓXIMOS MARCOS — RESPONSIVE
   ========================================================= */


/* =========================================================
   START — GUESTBOOK / COMENTÁRIOS — RESPONSIVE
   ========================================================= */

@media (min-width: 900px) {

  .comment-form {
    padding: 28px;
  }

}

@media (min-width: 1000px) {

  .guestbook {
    padding-bottom: 76px;
  }

  .comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .comment-form .field {
    margin: 0;
  }

  .comment-form .field:nth-child(3),
  .comment-form .primary-button,
  .comment-form .form-note {
    grid-column: 1 / -1;
  }

}

/* =========================================================
   END — GUESTBOOK / COMENTÁRIOS — RESPONSIVE
   ========================================================= */


/* =========================================================
   START — FOTO DA FAMÍLIA — RESPONSIVE
   ========================================================= */

@media (min-width: 700px) {

  .family-photo {
    padding-top: 42px;
  }

  .family-photo-card {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 430px;
  }

  .family-photo-image {
    height: 100%;
    aspect-ratio: auto;
  }

  .family-photo-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px;
  }

  .family-photo-caption h2 {
    font-size: 2.25rem;
  }

  .family-photo-caption p {
    font-size: .95rem;
  }

}

/* =========================================================
   END — FOTO DA FAMÍLIA — RESPONSIVE
   ========================================================= */


/* =========================================================
   START — ESTRUTURA DE SEÇÕES — RESPONSIVE
   ========================================================= */

@media (min-width: 1000px) {

  .section {
    padding-top: 64px;
  }

}

/* =========================================================
   END — ESTRUTURA DE SEÇÕES — RESPONSIVE
   ========================================================= */


/* =========================================================
   START — ACESSO ADMINISTRATIVO — RESPONSIVE
   ========================================================= */

@media (min-width: 700px) {

  .admin-access {
    width: 46px;
    height: 46px;
  }

  .admin-access-icon {
    width: 20px;
    height: 20px;
  }

}

/* =========================================================
   END — ACESSO ADMINISTRATIVO — RESPONSIVE
   ========================================================= */


/* =========================================================
   START — NEWSLETTER — RESPONSIVE
   ========================================================= */

@media (min-width: 700px) {

  .newsletter {
    padding-top: 54px;
  }

  .newsletter-card {
    padding: 48px 42px;
    border-radius: 26px;
  }

  .newsletter-content h2 {
    font-size: 1.9rem;
  }

  .newsletter-content p {
    max-width: 560px;
    font-size: .85rem;
    line-height: 1.4;
  }

  .newsletter-form {
    display: flex;
    align-items: center;

    max-width: 760px;

    margin: 26px auto 0;
  }

  .newsletter-fields {
    flex: 1;

    display: grid;
    grid-template-columns: 1fr 1.25fr;

    gap: 10px;
  }

  .newsletter-submit {
    flex: 0 0 52px;

    margin: 0 0 0 10px;
  }

}

/* =========================================================
   END — NEWSLETTER — RESPONSIVE
   ========================================================= */


/* =========================================================
   START — MENU DO HUB — RESPONSIVE
   ========================================================= */

@media (min-width: 768px) {

  .eyebrow {
    margin-top: 65px;
  }

  .hub-menu {
    top: 24px;
    right: 28px;
  }

  .hub-menu-toggle {
    display: none;
  }

  .hub-menu-panel {
    position: relative;

    top: auto;
    right: auto;

    display: flex;

    width: auto;

    padding: 5px;

    border-radius: 18px;

    opacity: 1;
    visibility: visible;

    transform: none;
  }

  .hub-menu-item {
    width: auto;

    min-height: 48px;

    padding: 6px 10px;
  }

  .hub-menu-item-icon {
    flex-basis: 30px;

    width: 30px;
    height: 30px;

    margin-right: 7px;

    border-radius: 9px;
  }

  .hub-menu-item-icon img {
    width: 17px;
    height: 17px;
  }

  .hub-menu-item-text strong {
    font-size: .67rem;
  }

  .hub-menu-item-text small {
    display: none;
  }

  .hub-menu-item-arrow {
    display: none;
  }

}

/* =========================================================
   END — MENU DO HUB — RESPONSIVE
   ========================================================= */


/* =========================================================
   START — ACESSO RÁPIDO — NEWSLETTER — RESPONSIVE
   ========================================================= */

@media (min-width: 768px) {

  .newsletter-access {
    top: 30px;
    left: 28px;
    right: auto;

    min-height: 48px;

    padding: 0 14px;
  }

  .newsletter-access span {
    font-size: .62rem;
  }

}

/* =========================================================
   END — ACESSO RÁPIDO — NEWSLETTER — RESPONSIVE
   ========================================================= */