/* ==========================================================================
   Tribe Aura — Content pages
   --------------------------------------------------------------------------
   Our Craft (editorial) and Contact (form + details).

   Mobile-first; breakpoints written literally: 480 / 768 / 1024 / 1280.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Shared page hero
   -------------------------------------------------------------------------- */

.ta-craft__hero,
.ta-contact__hero {
  background-color: var(--ta-color-bg-alt);
  padding-block: var(--ta-section-y);
}

.ta-craft__title,
.ta-contact__title {
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-3xl);
}

.ta-craft__lead,
.ta-contact__lead {
  margin-top: var(--ta-space-md);
  max-width: var(--ta-measure);
  font-size: var(--ta-text-md);
  line-height: var(--ta-leading-relaxed);
  color: var(--ta-color-text-muted);
}

/* Alternate bands so sections separate without rules or boxes. */
.ta-craft > .ta-section:nth-of-type(even) {
  background-color: var(--ta-color-surface);
}


/* --------------------------------------------------------------------------
   Our Craft — process steps
   -------------------------------------------------------------------------- */

.ta-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-space-lg);
  counter-reset: none;
}

@media (min-width: 640px) {
  .ta-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ta-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ta-space-xl);
  }
}

.ta-step {
  margin: 0;
  padding-top: var(--ta-space-md);
  border-top: var(--ta-border-width-thick) solid var(--ta-color-accent);
}

.ta-step__num {
  display: block;
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  color: var(--ta-color-accent-text);
}

.ta-step__title {
  margin-top: var(--ta-space-2xs);
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  line-height: var(--ta-leading-snug);
}

.ta-step__text {
  margin-top: var(--ta-space-2xs);
  font-size: var(--ta-text-sm);
  line-height: var(--ta-leading-relaxed);
  color: var(--ta-color-text-muted);
}


/* --------------------------------------------------------------------------
   Our Craft — traditions
   -------------------------------------------------------------------------- */

.ta-traditions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-gap-md);
}

@media (min-width: 640px) {
  .ta-traditions { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .ta-traditions { grid-template-columns: repeat(4, 1fr); }
}

.ta-tradition {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--ta-space-lg);
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-card);
}

.ta-tradition__title {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-xl);
  line-height: var(--ta-leading-snug);
}

.ta-tradition__origin {
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-accent-text);
}

.ta-tradition__text {
  margin-top: var(--ta-space-sm);
  font-size: var(--ta-text-sm);
  line-height: var(--ta-leading-relaxed);
  color: var(--ta-color-text-muted);
}

.ta-tradition__link {
  /* Pushes the link to the bottom so cards of different text lengths still
     line their calls-to-action up. */
  margin-top: auto;
  padding-top: var(--ta-space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--ta-space-3xs);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-medium);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ta-color-text);
}

.ta-tradition__link:hover {
  color: var(--ta-color-link-hover);
}

.ta-tradition__link .ta-icon {
  transition: transform var(--ta-transition);
}

.ta-tradition__link:hover .ta-icon {
  transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   Our Craft — pull quote
   -------------------------------------------------------------------------- */

.ta-craft__quote {
  text-align: center;
}

.ta-craft__blockquote {
  margin: 0 auto;
  padding: 0;
  border: 0;
  max-width: none;
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-2xl);
  font-style: italic;
  font-weight: var(--ta-weight-light);
  line-height: var(--ta-leading-snug);
  color: var(--ta-color-heading);
  text-wrap: balance;
}

.ta-craft__attribution {
  margin-top: var(--ta-space-md);
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wider);
  text-transform: uppercase;
  color: var(--ta-color-text-subtle);
}


/* --------------------------------------------------------------------------
   Our Craft — promises + CTA
   -------------------------------------------------------------------------- */

.ta-promises {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-space-lg);
}

@media (min-width: 768px) {
  .ta-promises { grid-template-columns: repeat(3, 1fr); }
}

.ta-promise {
  margin: 0;
}

.ta-promise__title {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  line-height: var(--ta-leading-snug);
}

.ta-promise__text {
  margin-top: var(--ta-space-2xs);
  font-size: var(--ta-text-sm);
  line-height: var(--ta-leading-relaxed);
  color: var(--ta-color-text-muted);
}

.ta-craft__cta {
  text-align: center;
}

.ta-craft__cta-title {
  font-size: var(--ta-text-2xl);
}

.ta-craft__cta-text {
  margin: var(--ta-space-sm) auto 0;
  color: var(--ta-color-text-muted);
}

.ta-craft__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ta-space-2xs);
  margin-top: var(--ta-space-lg);
  max-width: none;
}


/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.ta-contact__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-space-xl);
}

@media (min-width: 1024px) {
  .ta-contact__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--ta-space-2xl);
    align-items: start;
  }
}

.ta-contact__form {
  max-width: var(--ta-measure);
}

/* Honeypot: removed from view, from the accessibility tree and from the tab
   order. Positioned off-screen rather than display:none because some bots
   skip fields that are display:none. */
.ta-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Notices --- */

.ta-notice {
  padding: var(--ta-space-md);
  margin-bottom: var(--ta-space-lg);
  border-left: var(--ta-border-width-thick) solid var(--ta-color-accent);
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-sm);
}

.ta-notice--success {
  border-left-color: var(--ta-color-success);
}

.ta-notice--error {
  border-left-color: var(--ta-color-danger);
}

.ta-notice__title {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  margin-bottom: var(--ta-space-2xs);
}

.ta-notice p {
  margin: 0;
  max-width: none;
  font-size: var(--ta-text-sm);
}

.ta-notice p + p {
  margin-top: var(--ta-space-2xs);
}

/* --- Aside --- */

.ta-contact__aside {
  padding: var(--ta-space-lg);
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-card);
}

@media (min-width: 1024px) {
  .ta-contact__aside {
    position: sticky;
    /* Clears the sticky site header. */
    top: 6rem;
  }
}

.ta-contact__block + .ta-contact__block {
  margin-top: var(--ta-space-lg);
  padding-top: var(--ta-space-lg);
  border-top: var(--ta-border-width) solid var(--ta-color-border-strong);
}

.ta-contact__block-title {
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-semibold);
  letter-spacing: var(--ta-tracking-wider);
  text-transform: uppercase;
  color: var(--ta-color-text-subtle);
  margin-bottom: var(--ta-space-2xs);
}

.ta-contact__block p {
  margin: 0;
  max-width: none;
  font-size: var(--ta-text-sm);
}

.ta-contact__address {
  font-style: normal;
  font-size: var(--ta-text-sm);
  line-height: var(--ta-leading-normal);
}

.ta-contact__links {
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-2xs);
  margin-top: var(--ta-space-2xs);
}

.ta-contact__links li { margin: 0; }

/* 24px minimum target (WCAG 2.2 AA, 2.5.8) — these were 17px. inline-flex keeps
   the target only as wide as its own text. Same family as .ta-footer__links a. */
.ta-contact__links a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  font-size: var(--ta-text-sm);
}

/* --------------------------------------------------------------------------
   Our Craft — optional photography
   --------------------------------------------------------------------------
   Every block below is scoped to a `--media` modifier, so the page renders
   exactly as before when no image is set. That keeps the typographic version
   intact as the fallback and lets real photography replace the demo set one
   image at a time, without a template change.
   -------------------------------------------------------------------------- */

.ta-craft__hero--media {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(22rem, 46vh, 34rem);
  padding-block: var(--ta-section-y);
  overflow: hidden;
}

.ta-craft__hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ta-craft__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim from the bottom, because the copy sits at the foot of the block.
   Two layers: a bottom-up gradient carrying most of the work, plus a flat
   tint so a pale patch mid-photograph cannot strand the lead paragraph on
   low contrast. The lead is the longest line on the page and the one most
   likely to cross whatever the image is doing. */
.ta-craft__hero--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(20, 18, 16, 0.82) 0%,
      rgba(20, 18, 16, 0.55) 45%,
      transparent 90%
    ),
    rgba(20, 18, 16, 0.18);
}

.ta-craft__hero--media .ta-eyebrow,
.ta-craft__hero--media .ta-craft__title,
.ta-craft__hero--media .ta-craft__lead {
  color: var(--ta-color-text-invert);
}

/* Process steps ----------------------------------------------------------- */

.ta-step--media {
  padding-top: 0;
  border-top: 0;
}

.ta-step__media {
  display: block;
  margin-bottom: var(--ta-space-md);
  overflow: hidden;
  border-radius: var(--ta-radius-card);
}

.ta-step__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The accent rule moves off the list item and onto the number, so the step
   still reads as numbered once a photograph takes the top edge. */
.ta-step--media .ta-step__num {
  padding-top: var(--ta-space-2xs);
  border-top: var(--ta-border-width-thick) solid var(--ta-color-accent);
}

/* Traditions -------------------------------------------------------------- */

.ta-tradition--media {
  padding: 0;
  overflow: hidden;
}

.ta-tradition__media {
  display: block;
}

.ta-tradition__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ta-tradition--media .ta-tradition__title {
  margin-top: var(--ta-space-lg);
}

.ta-tradition--media .ta-tradition__title,
.ta-tradition--media .ta-tradition__origin,
.ta-tradition--media .ta-tradition__text {
  padding-inline: var(--ta-space-lg);
}

.ta-tradition--media .ta-tradition__link {
  margin-inline: var(--ta-space-lg);
  margin-bottom: var(--ta-space-lg);
}