/*********************
Layout pass (2026-11-03): phone layouts for the homepage, inner heroes,
archives and single agent. Loaded after every page stylesheet
(includes/class.php, priority 20).
*********************/

@media screen and (max-width: 768px) {

  /* homepage agents: two per row, tight gaps */
  .agents--list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem 0.75rem;
    width: 100%;
  }

  .agents--card__text h3,
  .agents--card__text .title--uppercase {
    font-size: var(--text-base);
    margin-block-start: 0.625rem;
  }

  .agents--card__text p,
  .agents--card__text span {
    font-size: 0.6875rem;
  }

  /* communities: two per row */
  .communities--content > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .communities--content > ul li {
    width: auto;
  }

  .communities--content > ul li > a {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .communities--content > ul li > a p {
    font-size: var(--text-lg);
  }

  /* news + blog archive + related posts: two per row */
  .news--list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem 0.75rem;
  }

  /* three posts on the homepage: one row of two on phones (no lone card) */
  .news--list > .news--card:nth-child(n+3) {
    display: none;
  }

  .news--card__text h3,
  .news--card__text .title--uppercase {
    font-size: var(--text-base);
    line-height: 1.3;
  }

  ul.blogs--type-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0.75rem;
  }

  ul.blogs--type-2 li {
    margin: 0;
    flex-basis: auto;
    min-width: 0;
  }

  ul.blogs--type-2 li img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  ul.blogs--type-2 li .blogs--text h3,
  ul.blogs--type-2 li .blogs--text .text {
    font-size: var(--text-base);
    line-height: 1.3;
  }

  /* let's connect: a band, not a full screen */
  .work-with-us {
    height: auto;
    min-height: 0;
    padding-block: 5rem;
  }

  .work-with-us__content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 90%;
    margin-inline: auto;
    z-index: 1;
  }

  /* footer: email and phone side by side, address under them */
  .footer--contact ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
  }

  .footer--contact ul li {
    margin: 0 !important;
    min-width: 0;
  }

  .footer--contact ul li[aria-label="Location"] {
    grid-column: 1 / -1;
  }

  .footer--contact ul li a,
  .footer--contact ul li p {
    overflow-wrap: anywhere;
    font-size: var(--text-sm);
  }

  /* inner heroes: as tall as the title */
  .heroInner,
  .image-section,
  .custom-intro {
    height: auto;
    min-height: 0;
  }

  .heroInner {
    padding-block: 8rem 2.5rem;
  }

  .heroInner h1 {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 90%;
    margin-inline: auto;
    font-size: clamp(1.875rem, 8.5vw, 2.5rem);
  }

  .custom-intro {
    padding-block: 8rem 2.5rem;
  }

  .heroInner--neighborhoods__container,
  .heroInner--neighborhoods {
    height: auto;
    min-height: 0;
  }

  /* agents archive + neighborhoods archive: two per row */
  ul.rch-archive-agents {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem 0.75rem !important;
  }

  ul.rch-archive-agents li {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    min-width: 0;
  }

  ul.rch-archive-agents li img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  ul.rch-archive-agents li .rch-archive-name h3,
  ul.rch-archive-agents li .rch-archive-name a {
    font-size: var(--text-base);
  }

  ul.rch-archive-agents li .rch-archive-end-line {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  body ul.rch-neighborhoods-archive {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin: 0;
  }

  body ul.rch-neighborhoods-archive .item {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body ul.rch-neighborhoods-archive li .item-wrapper {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }

  body ul.rch-neighborhoods-archive li .image-holder,
  body ul.rch-neighborhoods-archive li .image-holder img {
    width: 100% !important;
    height: 100% !important;
  }

  body ul.rch-neighborhoods-archive li .image-holder img {
    object-fit: cover;
  }

  body ul.rch-neighborhoods-archive li .content-container {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: 0.75rem !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
  }

  body ul.rch-neighborhoods-archive li .content-container h3 {
    margin: 0;
    font-size: var(--text-lg);
  }

  body ul.rch-neighborhoods-archive li .button-wrapper {
    display: none;
  }

  /* single agent: photo beside the name instead of a full-width 480px block */
  .rch-top-single-agent .rch-left-top-single-agent {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .rch-top-single-agent .rch-left-top-single-agent .rch-image-container,
  .rch-top-single-agent .rch-left-top-single-agent picture {
    width: 120px !important;
    height: auto !important;
    margin: 0 !important;
  }

  .rch-top-single-agent .rch-left-top-single-agent img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .rch-top-single-agent .rch-data-agent {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .rch-top-single-agent .rch-data-agent h1,
  .rch-top-single-agent .rch-data-agent h2 {
    font-size: var(--text-2xl);
    margin-block: 0 0.5rem;
  }

  .rch-main-layout-single-agent {
    margin-block-start: 2rem;
  }
}

/* single post: four related articles in one row on desktop */
@media screen and (min-width: 769px) {
  body.single-post ul.blogs--type-2 li {
    flex-basis: calc(25% - 20px);
  }
}