/* === arch-models-page.css ===
   Architectural Models landing page.
   Loads AFTER internal-pages.css bundle so these rules win on equal specificity.
   ----------------------------------------------- */

/* -----------------------------------------------
   ip-hero overrides for this page
   scale-page--hundred sets padding-bottom: 0 at 992px+ — restore spacing
   and remove the 44rem body width cap used on narrow scale pages.
   ----------------------------------------------- */
.am-page .ip-hero { padding-bottom: 3rem; }

.am-page .ip-hero__body { max-width: none; }

@media (min-width: 768px) {
    .am-page .ip-hero { padding-bottom: 3.5rem; }
}

@media (min-width: 992px) {
    .am-page .ip-hero { padding-bottom: 4.5rem; }
}

/* -----------------------------------------------
   1. FEATURES GRID
   ----------------------------------------------- */
.am-features { background-color: #f5f5f5; padding: 3.75rem 0; }

.am-features .section { row-gap: 2.5rem; }

.am-features__item { display: flex; flex-direction: column; gap: 1.5rem; }

.am-features__rule { display: block; width: 10rem; height: 4px; background-color: var(--color-primary); flex-shrink: 0; }

.am-features__title { margin: 0; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 500; line-height: 1.41; letter-spacing: -0.03em; color: var(--color-black); }

.am-features__text { margin: 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 400; line-height: 1.722; letter-spacing: -0.03em; color: var(--color-black); }

.am-features__text a { color: var(--color-primary); text-decoration: underline; font-weight: 700; }
.am-features__text a:hover { text-decoration: none; }

/* -----------------------------------------------
   2. COMMISSIONING CARD
   Mirrors about-page__owner: container on section,
   inner div carries the dark bg, image + text side by side.
   ----------------------------------------------- */
.am-commission { padding-top: 4rem; padding-bottom: 4rem; }

.am-commission__inner { display: flex; flex-direction: column; gap: 0; background-color: #373737; overflow: hidden; }

.am-commission__image { overflow: hidden; flex-shrink: 0; }

.am-commission__img { display: block; width: 100%; height: 100%; min-height: 18rem; object-fit: cover; }

.am-commission__content { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem 1.5rem; }

.am-commission__rule { display: block; width: 10rem; height: 4px; background-color: var(--color-white); flex-shrink: 0; }

.am-commission__title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--color-white); }

.am-commission__text { margin: 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 400; line-height: 1.72; letter-spacing: -0.03em; color: var(--color-white); }

.am-commission__text a { color: var(--color-white); text-decoration: underline; }
.am-commission__text a:hover { text-decoration: none; }

.am-commission__callout { background-color: var(--color-white); padding: 1.25rem 1.5rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 400; line-height: 1.72; letter-spacing: -0.03em; color: var(--color-black); }

.am-commission__callout a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }
.am-commission__callout a:hover { text-decoration: none; }

/* -----------------------------------------------
   3. SCALE GUIDE
   ----------------------------------------------- */
.am-scale { padding: 3rem 0; }

.am-scale__rule { display: block; width: 10rem; height: 4px; background-color: var(--color-black); margin-bottom: 1rem; }

.am-scale__heading { margin: 0 0 1.5rem; font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; line-height: 1.07; letter-spacing: -0.03em; color: var(--color-black); }

.am-scale__text { margin: 0 0 1rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 400; line-height: 1.72; letter-spacing: -0.03em; color: var(--color-black); }

.am-scale__text strong { font-weight: 600; }

.am-scale__caption { margin: 1rem 0 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; line-height: 1.72; letter-spacing: -0.03em; color: var(--color-black); }

.am-scale__table { width: 100%; border-collapse: collapse; margin: 3.75rem 0; }

.am-scale__table th { text-align: left; padding: 0.75rem 1rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; color: var(--color-black); background-color: #f5f5f5; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.am-scale__table td { padding: 0.75rem 1rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.72; border-bottom: 1px solid rgba(0, 0, 0, 0.07); }

.am-scale__table td:first-child { color: var(--color-primary); }
.am-scale__table td:last-child { color: var(--color-black); }

.am-scale__image-pair { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0 0; }

.am-scale__image-single { margin: 0; }

.am-scale__img { display: block; width: 100%; height: auto; }

.am-scale__img--single { display: block; width: 100%; height: auto; }

.am-scale__bottom-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 1rem 0 0; align-items: center; }

.am-scale__caption--bottom { margin: 0; }

/* -----------------------------------------------
   4. INFORMATION SECTION
   ----------------------------------------------- */
.am-info { padding: 0 0 3.5rem; }

.am-info__rule { display: block; width: 10rem; height: 4px; background-color: var(--color-black); margin-bottom: 1rem; }

.am-info__heading { margin: 0 0 1.5rem; font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; line-height: 1.07; letter-spacing: -0.03em; color: var(--color-black); }

.am-info__text { margin: 0 0 1rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 400; line-height: 1.72; letter-spacing: -0.03em; color: var(--color-black); }

.am-info__text strong { font-weight: 600; }
.am-info__text a { color: var(--color-primary); text-decoration: underline; font-weight: 700; }
.am-info__text a:hover { text-decoration: none; }

.am-info__grid { margin-top: 1.75rem; margin-bottom: 1.75rem; }

.am-info__col { display: flex; flex-direction: column; gap: 0.5rem; }

.am-info__col-title { margin: 0 0 0.25rem; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; color: var(--color-black); }

.am-info__col-sub { display: block; margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: 1rem; font-style: italic; color: rgba(0, 0, 0, 0.79); letter-spacing: -0.03em; }

.am-info__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }

.am-info__col ul li { display: flex; align-items: baseline; gap: 0.625rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 400; line-height: 1.72; letter-spacing: -0.03em; color: var(--color-black); }

.am-info__col ul li::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #ca161e; flex-shrink: 0; position: relative; top: -0.1em; }

/* -----------------------------------------------
   5. CTA
   ----------------------------------------------- */
.am-cta { background-color: #f7f7f7; padding: 3rem 0; }

.am-cta__inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }

.am-cta__content { display: flex; flex-direction: column; gap: 1rem; flex: 1 0 0; min-width: 0; }

.am-cta__header { display: flex; flex-direction: column; gap: 0.75rem; }

.am-cta__rule { display: block; width: 7.375rem; height: 4px; background-color: var(--color-black); }

.am-cta__title { margin: 0; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 500; line-height: 1.07; letter-spacing: -0.03em; color: var(--color-black); }

.am-cta__sub { margin: 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 400; line-height: 1.72; letter-spacing: -0.03em; color: var(--color-black); }

.am-cta__btn { display: inline-flex; align-items: center; justify-content: center; height: 3.75rem; padding: 0 2rem; border: none; border-radius: 0.375rem; background-color: var(--color-primary); font-family: var(--font-nav); font-size: var(--text-btn); font-weight: 400; line-height: 1; color: var(--color-white); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: opacity var(--transition-fast); }

.am-cta__btn:hover { opacity: 0.85; }

/* =======================================================
   RESPONSIVE
   ======================================================= */

@media (max-width: 767px) {
    .am-features { padding: 30px 0; }
    .am-commission { padding-top: 30px; padding-bottom: 0; }
    .am-scale__table { margin: 30px 0; }
    .am-info { padding-bottom: 30px; }
}

/* ------ 768px: Tablet ------ */
@media (min-width: 768px) {

    /* Features */
    .am-features .section { row-gap: 3rem; }
    .am-features__title { font-size: 2.25rem; }
    .am-features__text { font-size: 1rem; }

    /* Commission */
    .am-commission__inner { flex-direction: row; min-height: 28rem; }
    .am-commission__image { flex: 0 0 44%; max-width: 44%; }
    .am-commission__img { min-height: 0; }
    .am-commission__content { flex: 1; padding: 3rem 2rem; justify-content: center; }

    /* Scale */
    .am-scale__image-pair { grid-template-columns: repeat(2, 1fr); }
    .am-scale__bottom-row { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .am-scale__img--single { max-width: 100%; }

    /* CTA */
    .am-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; }
    .am-cta__title { font-size: 2.25rem; }
}

/* ------ 992px: Desktop ------ */
@media (min-width: 992px) {

    /* Features — Figma: 44px title / 18px text / 94px row gap */
    .am-features .section { row-gap: 5.875rem; }
    .am-features__title { font-size: 2.75rem; }
    .am-features__text { font-size: var(--text-body-lg); }

    /* Commission — mirrors about-page__owner at 992px+ */
    .am-commission { padding-top: 4rem; padding-bottom: 4rem; }
    .am-commission__inner { min-height: 44.875rem; gap: 0; }
    .am-commission__image { flex: 0 0 49.36%; max-width: 49.36%; align-self: stretch; }
    .am-commission__content { flex: 1; padding: 4rem 4.5rem; justify-content: center; gap: 1.75rem; }
    .am-commission__text { font-size: var(--text-body-lg); }
    .am-commission__callout { font-size: var(--text-body-lg); padding: 1.5rem 2rem; }

    /* Scale */
    .am-scale { padding: 4rem 0; }
    .am-scale__text { font-size: var(--text-body-lg); }
    .am-scale__caption { font-size: var(--text-body-lg); padding: 0 60px; }

    /* Info */
    .am-info { padding-bottom: 4rem; }
    .am-info__text { font-size: var(--text-body-lg); }
    .am-info__col ul li { font-size: var(--text-body-lg); }

    /* CTA */
    .am-cta { padding: 4rem 0; }
    .am-cta__title { font-size: 2.75rem; }
    .am-cta__sub { font-size: var(--text-body-lg); }
}

/* ------ 1230px: Large desktop ------ */
@media (min-width: 1230px) {

    /* Features — no changes needed at 1230px+ */

    /* Commission */
    .am-commission__image { flex-basis: 48%; max-width: 48%; }
    .am-commission__content { padding: 4.5rem 5rem; }

    /* Scale */
    .am-scale { padding: 4.5rem 0; }

    /* Info */
    .am-info__grid { margin-top: 2.25rem; margin-bottom: 2.25rem; }

    /* CTA */
    .am-cta { padding: 4.5rem 0; }
    .am-cta__inner { gap: 4rem; }
}

/* ------ 1200px cap on post-card sections ------ */
.am-scale .container,
.am-info .container,
.am-cta .container { max-width: 75rem; /* 1200px */ }

/* ------ 1440px: Wide desktop ------ */
@media (min-width: 1440px) {

    /* Commission */
    .am-commission__content { padding: 5rem 6rem; }

    /* Scale */
    .am-scale { padding: 5rem 0; }

    /* Info */
    .am-info { padding-bottom: 5rem; }

    /* CTA */
    .am-cta { padding: 5rem 0; }
}