/* ==========================================================================
   Thurston King Architects — design-system blocks in use on this site.
   Materialised from the PM block library; page-level art direction that
   overrides any of this lives in site.css, which loads after.
   ========================================================================== */

/* navbar-17 — Navbar 17 */
/* navbar-17 — hamburger at all sizes, right-aligned divider-ruled drop panel. */
.navbar-17__actions { display: flex; align-items: center; gap: var(--pm-space-2); }
.navbar-17__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  transition: height var(--pm-duration) var(--pm-ease);
}
.navbar-17__menu[data-pm-open="true"] { height: 100dvh; }
.navbar-17__panel {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow-y: auto;
  background-color: var(--pm-bg);
}
.navbar-17__links {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-inline: var(--pm-gutter);
}
.navbar-17__links a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  padding-block: var(--pm-space-4);
  border-top: 1px solid var(--pm-border-color);
  font-size: var(--pm-text-h3);
  font-weight: var(--pm-weight-bold);
  text-align: right;
}
.navbar-17__links a:last-child { border-bottom: 1px solid var(--pm-border-color); }
.navbar-17__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-4);
  min-height: 4.5rem;
  padding-inline: var(--pm-gutter);
}

@media (min-width: 992px) {
  .navbar-17__actions { gap: var(--pm-space-4); }
}

/* header-30 — Header 30 */
/* header-30 — full-bleed background image, centred content. */
.header-30__inner {
  max-width: 34rem;
  margin: 0 auto;
}

/* header-64 — Header 64 */
/* header-64 — centred heading and description only. */

/* portfolio-07 — Portfolio 7 */
/* portfolio-07 — stacked plain entries, alternating left/right, max-width capped. */
.portfolio-07__list {
  display: grid;
  gap: var(--pm-space-12);
}
.portfolio-07__item {
  max-width: 34rem;
}
.portfolio-07__item:nth-child(even) {
  margin-left: auto;
}
.portfolio-07__media {
  margin-bottom: var(--pm-space-5);
}
.portfolio-07__title {
  margin-bottom: var(--pm-space-2);
}
.portfolio-07__tags {
  margin-top: var(--pm-space-3);
}
.portfolio-07__more {
  margin-top: var(--pm-space-5);
}
.portfolio-07__foot {
  display: flex;
  justify-content: center;
  margin-top: var(--pm-space-12);
}

@media (min-width: 768px) {
  .portfolio-07__list { gap: var(--pm-space-16); }
  .portfolio-07__media { margin-bottom: var(--pm-space-6); }
  .portfolio-07__tags { margin-top: var(--pm-space-4); }
  .portfolio-07__more { margin-top: var(--pm-space-6); }
  .portfolio-07__foot { margin-top: var(--pm-space-18); }
}

/* layout-231 — Layout 231 */
/* layout-231 — three-column left-aligned feature grid. */
.layout-231__item {
  display: flex;
  flex-direction: column;
}
.layout-231__media { margin-bottom: var(--pm-space-6); }
.layout-231__icon { margin-bottom: var(--pm-space-5); }
.layout-231__title { margin-bottom: var(--pm-space-5); }

@media (min-width: 768px) {
  .layout-231__media { margin-bottom: var(--pm-space-8); }
  .layout-231__icon { margin-bottom: var(--pm-space-6); }
  .layout-231__title { margin-bottom: var(--pm-space-6); }
}

/* gallery-11 — Gallery 11 */
/* gallery-11 — two edge-to-edge images, no gap. */
.gallery-11__grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gallery-11__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* layout-06 — Layout 6 */
/* layout-06 — copy with subheadings left, image right, no tagline. */
.layout-06__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pm-space-12);
  align-items: center;
}
.layout-06__heading {
  margin-bottom: var(--pm-space-5);
}
.layout-06__description {
  margin-bottom: var(--pm-space-6);
}
.layout-06__subheadings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pm-space-6);
  padding-block: var(--pm-space-2);
}
.layout-06__subtitle {
  margin-bottom: var(--pm-space-3);
}

@media (min-width: 768px) {
  .layout-06__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-space-12); }
  .layout-06__heading { margin-bottom: var(--pm-space-6); }
  .layout-06__description { margin-bottom: var(--pm-space-8); }
}

@media (min-width: 992px) {
  .layout-06__grid { gap: var(--pm-space-20); }
}

/* cta-03 — CTA 3 */
/* cta-03 — narrow copy over full-bleed background image. */
.cta-03 {
  position: relative;
}
.cta-03__inner {
  max-width: 32rem;
}

/* footer-03 — Footer 3 */
/* footer-03 — logo/address/contact beside two link columns, legal bottom bar. */
.footer-03 ul { list-style: none; margin: 0; padding: 0; }
.footer-03__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pm-space-12);
  padding-bottom: var(--pm-space-12);
}
.footer-03__logo { margin-bottom: var(--pm-space-6); }
.footer-03__details { margin-bottom: var(--pm-space-6); }
.footer-03__label { font-size: var(--pm-text-sm); font-weight: var(--pm-weight-semibold); margin-bottom: var(--pm-space-1); }
.footer-03__value { font-size: var(--pm-text-sm); margin-bottom: var(--pm-space-5); }
.footer-03__contact { display: grid; gap: var(--pm-space-1); }
.footer-03__contact a { font-size: var(--pm-text-sm); text-decoration: underline; }
.footer-03__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pm-space-10);
}
.footer-03__col {
  display: grid;
  list-style: none;
  gap: var(--pm-space-2);
  font-weight: var(--pm-weight-semibold);
  font-size: var(--pm-text-sm);
}
@media (min-width: 768px) {
  .footer-03__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-03__top { padding-bottom: var(--pm-space-18); }
}
@media (min-width: 992px) {
  .footer-03__top { grid-template-columns: 1fr 0.5fr; padding-bottom: var(--pm-space-20); }
}

/* faq-03 — narrow intro column beside an accordion column. */
.faq-03__intro-actions { margin-top: var(--pm-space-6); }
@media (min-width: 768px) { .faq-03__intro-actions { margin-top: var(--pm-space-8); } }

/* layout-293 — left-aligned four-column feature grid. */
.layout-293__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pm-space-12);
}
.layout-293__cta { margin-top: var(--pm-space-6); }
@media (min-width: 768px) {
  .layout-293__cta { margin-top: var(--pm-space-8); }
  .layout-293__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--pm-space-8);
    row-gap: var(--pm-space-16);
  }
}
@media (min-width: 1280px) {
  .layout-293__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* timeline-05 — narrow single-column vertical line of dated text entries. */
.timeline-05__intro { max-width: var(--pm-container-narrow); margin-bottom: var(--pm-space-12); }
.timeline-05__list {
  list-style: none;
  display: grid;
  gap: var(--pm-space-8);
  max-width: var(--pm-container-narrow);
}
.timeline-05__heading { font-size: var(--pm-text-h3); font-weight: var(--pm-weight-bold); margin-bottom: var(--pm-space-3); }
.timeline-05__title { font-size: var(--pm-text-h5); font-weight: var(--pm-weight-bold); margin-bottom: var(--pm-space-3); }
@media (min-width: 768px) { .timeline-05__list { gap: var(--pm-space-12); } }

/* contact-05 — info column beside a short contact form. */
.contact-05__grid { display: grid; gap: var(--pm-space-12); align-items: start; }
.contact-05__desc { margin-top: var(--pm-space-5); }
.contact-05__info { display: grid; gap: var(--pm-space-4); margin-top: var(--pm-space-6); }
.contact-05__info-item { display: flex; align-items: center; gap: var(--pm-space-4); }
.contact-05__form { display: grid; gap: var(--pm-space-6); }
@media (min-width: 768px) {
  .contact-05__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-space-12); }
}
@media (min-width: 992px) { .contact-05__grid { gap: var(--pm-space-20); } }