/* ===== Architektura page styles ===== */
/* Scoped to #architektura-main to avoid shared component conflicts. */

#architektura-main {
  --arch-section-padding-y: var(--space-3xl);
  --arch-section-padding-y-mobile: var(--space-2xl);
}

/* Section base spacing */
.arch-section {
  padding-block: var(--arch-section-padding-y);
}

.arch-section-heading {
  margin-block-end: var(--space-xl);
}

.arch-section-heading .micro-label {
  margin-block-end: var(--space-xs);
}

.arch-section-heading h2 {
  margin-block-end: var(--space-sm);
}

.arch-section-lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-grafit-jasny);
  max-width: 720px;
  margin-block-end: 0;
}

/* ===== Hero ===== */
.arch-hero {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-tlo-nocne);
}

.arch-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.arch-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 32, 36, 0.78) 0%, rgba(22, 32, 36, 0.35) 55%, rgba(22, 32, 36, 0.15) 100%);
  z-index: 1;
}

.arch-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  margin-inline: 0;
  padding: var(--space-2xl) var(--page-padding-mobile);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.arch-hero__micro-label {
  color: var(--color-pomarancz-tramwajowy);
  margin-block-end: 0;
}

.arch-hero__title {
  color: var(--color-miejska-biel);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: var(--text-display-line-height);
  letter-spacing: var(--text-display-letter-spacing);
  font-weight: var(--text-display-weight);
  margin-block-end: 0;
  max-width: 14ch;
}

.arch-hero__lead {
  color: var(--color-miejska-biel);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  margin-block-end: 0;
  max-width: 52ch;
}

.arch-hero__cta {
  margin-block-start: var(--space-xs);
}

.arch-hero__coordinate {
  position: absolute;
  bottom: var(--space-lg);
  left: var(--page-padding-mobile);
  z-index: 2;
}

/* ===== Style cards ===== */
.arch-styles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.arch-style-card {
  min-width: 0;
  padding: var(--space-lg);
  border-left: 2px solid transparent;
  transition: border-color var(--transition-fast);
}

.arch-style-card:hover {
  border-left-color: var(--color-baltycki-blekit);
}

.arch-style-card h3 {
  margin-block-end: var(--space-sm);
}

.arch-style-card p {
  margin-block-end: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
}

/* ===== Icon list ===== */
.arch-icons__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.arch-icon-item {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-sm);
  border-radius: var(--radius-8);
  transition: background-color var(--transition-fast);
}

.arch-icon-item:hover {
  background-color: rgba(27, 107, 140, 0.04);
}

.arch-icon-item__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-8);
  border: var(--border-default);
}

.arch-icon-item__content {
  min-width: 0;
}

.arch-icon-item__content h3 {
  margin-block-end: var(--space-sm);
}

.arch-icon-item__content p {
  margin-block-end: 0;
  max-width: 62ch;
}

/* ===== Districts ===== */
.arch-districts__container {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-2xl);
  align-items: start;
}

.arch-districts__text {
  min-width: 0;
}

.arch-districts__text .micro-label {
  margin-block-end: var(--space-xs);
}

.arch-districts__text h2 {
  margin-block-end: var(--space-sm);
}

.arch-districts__text .arch-section-lead {
  margin-block-end: var(--space-lg);
}

.arch-district-item {
  margin-block-end: var(--space-lg);
}

.arch-district-item:last-child {
  margin-block-end: 0;
}

.arch-district-item h3 {
  margin-block-end: var(--space-xs);
}

.arch-district-item p {
  margin-block-end: 0;
  max-width: 65ch;
}

.arch-districts__figure {
  margin-block-end: 0;
}

.arch-districts__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-8);
  border: var(--border-default);
  transition: transform var(--transition-fast);
}

.arch-districts__figure:hover .arch-districts__image {
  transform: scale(1.02);
}

.arch-districts__figure figcaption {
  margin-block-start: var(--space-xs);
}

/* ===== Routes ===== */
.arch-routes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.arch-route-card {
  min-width: 0;
  padding: var(--space-lg);
  border-left: 2px solid transparent;
  transition: border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.arch-route-card:hover {
  border-left-color: var(--color-baltycki-blekit);
}

.arch-route-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
  letter-spacing: var(--text-micro-letter-spacing);
  font-weight: var(--text-micro-weight);
  text-transform: uppercase;
  color: var(--color-pomarancz-tramwajowy);
}

.arch-route-card h3 {
  margin-block-end: 0;
}

.arch-route-card p {
  margin-block-end: 0;
}

/* ===== Sacral ===== */
.arch-sacral__container {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-2xl);
  align-items: start;
}

.arch-sacral__text {
  min-width: 0;
}

.arch-sacral__text .micro-label {
  margin-block-end: var(--space-xs);
}

.arch-sacral__text h2 {
  margin-block-end: var(--space-sm);
}

.arch-sacral__text .arch-section-lead {
  margin-block-end: var(--space-lg);
}

.arch-sacral-item {
  margin-block-end: var(--space-lg);
}

.arch-sacral-item:last-child {
  margin-block-end: 0;
}

.arch-sacral-item h3 {
  margin-block-end: var(--space-xs);
}

.arch-sacral-item p {
  margin-block-end: 0;
  max-width: 65ch;
}

.arch-sacral__figure {
  margin-block-end: 0;
}

.arch-sacral__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-8);
  border: var(--border-default);
  transition: transform var(--transition-fast);
}

.arch-sacral__figure:hover .arch-sacral__image {
  transform: scale(1.02);
}

.arch-sacral__figure figcaption {
  margin-block-start: var(--space-xs);
}

/* ===== Contemporary ===== */
.arch-contemporary__container {
  max-width: 800px;
}

.arch-contemporary__container .micro-label {
  margin-block-end: var(--space-xs);
}

.arch-contemporary__container h2 {
  margin-block-end: var(--space-sm);
}

.arch-contemporary__container .arch-section-lead {
  margin-block-end: var(--space-xl);
}

.arch-contemporary__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.arch-contemporary-item h3 {
  margin-block-end: var(--space-xs);
}

.arch-contemporary-item p {
  margin-block-end: 0;
  max-width: 65ch;
}

/* ===== Tips ===== */
.arch-tips__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.arch-tip-card {
  min-width: 0;
  padding: var(--space-lg);
  border-left: 2px solid transparent;
  transition: border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.arch-tip-card:hover {
  border-left-color: var(--color-baltycki-blekit);
}

.arch-tip-card__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.arch-tip-card h3 {
  margin-block-end: 0;
}

.arch-tip-card p {
  margin-block-end: 0;
}

/* ===== Culture ===== */
.arch-culture__container {
  max-width: 800px;
}

.arch-culture__container .micro-label {
  margin-block-end: var(--space-xs);
}

.arch-culture__container h2 {
  margin-block-end: var(--space-sm);
}

.arch-culture__container .arch-section-lead {
  margin-block-end: var(--space-xl);
}

.arch-culture__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.arch-culture-item h3 {
  margin-block-end: var(--space-xs);
}

.arch-culture-item p {
  margin-block-end: 0;
  max-width: 65ch;
}

/* ===== Related ===== */
.arch-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.arch-related-card {
  min-width: 0;
  padding: var(--space-lg);
  border-left: 2px solid transparent;
  transition: border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--color-grafit-architektoniczny);
  text-decoration: none;
}

.arch-related-card:hover {
  border-left-color: var(--color-baltycki-blekit);
  color: var(--color-grafit-architektoniczny);
  text-decoration: none;
}

.arch-related-card h3 {
  margin-block-end: 0;
}

.arch-related-card p {
  margin-block-end: 0;
}

.arch-related-card__link {
  font-family: var(--font-heading);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: 500;
  color: var(--color-baltycki-blekit);
  margin-block-start: auto;
}

.arch-related-card:hover .arch-related-card__link {
  color: var(--color-baltycki-blekit-gleboki);
  text-decoration: underline;
  text-decoration-color: var(--color-pomarancz-tramwajowy);
  text-underline-offset: 3px;
}

/* ===== Tablet ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .arch-hero__content {
    padding-inline: var(--page-padding-tablet);
  }

  .arch-hero__coordinate {
    left: var(--page-padding-tablet);
  }

  .arch-styles__grid,
  .arch-routes__grid,
  .arch-tips__grid,
  .arch-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arch-icon-item {
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  }

  .arch-districts__container,
  .arch-sacral__container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .arch-districts__figure,
  .arch-sacral__figure {
    order: -1;
  }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .arch-section {
    padding-block: var(--arch-section-padding-y-mobile);
  }

  .arch-hero {
    min-height: 70vh;
  }

  .arch-hero__content {
    max-width: 100%;
    padding: var(--space-xl) var(--page-padding-mobile);
    gap: var(--space-md);
  }

  .arch-hero__title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .arch-hero__lead {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .arch-hero__cta {
    width: 100%;
  }

  .arch-hero__coordinate {
    bottom: var(--space-md);
    left: var(--page-padding-mobile);
  }

  .arch-styles__grid,
  .arch-routes__grid,
  .arch-tips__grid,
  .arch-related__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .arch-icon-item {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: 0;
  }

  .arch-icon-item__image {
    aspect-ratio: 16 / 9;
  }

  .arch-districts__container,
  .arch-sacral__container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .arch-districts__figure,
  .arch-sacral__figure {
    order: -1;
  }

  .arch-districts__image,
  .arch-sacral__image {
    aspect-ratio: 16 / 9;
  }

  .arch-contemporary__container,
  .arch-culture__container {
    max-width: 100%;
  }
}