/*!
 * True Makeup Theme — Our Brands page
 *
 * Styles for the /brands/ landing page. The page is built from three
 * stacked regions:
 *
 *   1. Hero strip (reused block) + intro copy
 *   2. 8-cell brand grid (reuses the shared partial)
 *   3. A stack of editorial detail panels, each alternating
 *      image-left / image-right with the `--flip` modifier
 *   4. A closing CTA strip
 *
 * The brand-grid partial is reused directly; this file only tightens
 * its row layout down to 8-across and mutes the hover video / title
 * bar on this page so it reads as a flat directory rather than a
 * feature tile.
 */

.tmt-brands-page                    { background: #fff; padding: 70px 0 80px; }
.tmt-brands-page__inner             { max-width: var(--layout-max-width, 1700px); margin: 0 auto; }

/* -------- Hero strip -------------------------------------------- */

.tmt-brands-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 40px;
    margin-bottom: 40px;
    background: #F4F4F5;
}
.tmt-brands-hero__title {
    font-family: var(--font-secondary);
    font-size: 40px;
    font-weight: 400;
    color: #000;
    margin: 0;
    text-transform: uppercase;
}
.tmt-brands-hero__desc {
    font-family: var(--font-primary);
    font-size: 14px;
    color: #000;
    opacity: 0.6;
    margin: 8px 0 0;
    line-height: 1.6;
}

/* -------- Intro ------------------------------------------------- */

.tmt-brands-intro              { max-width: 800px; margin: 0 auto 48px; text-align: center; }
.tmt-brands-intro h2 {
    font-family: var(--font-secondary);
    font-size: 32px;
    font-weight: 400;
    color: #000;
    margin: 0 0 16px;
}
.tmt-brands-intro p {
    font-family: var(--font-primary);
    font-size: 14px;
    color: #000;
    opacity: 0.7;
    margin: 0 0 12px;
    line-height: 1.75;
}
.tmt-brands-intro p:last-child { margin-bottom: 0; }

/* -------- Shared brand-grid, reshaped for this page ------------- */

.tmt-brands-directory                          { margin-bottom: 48px; }
.tmt-brands-directory .tmt-brand-grid          { grid-template-columns: repeat(8, 1fr) !important; gap: 8px !important; }
.tmt-brands-directory .brand-card              { aspect-ratio: 1 / 1 !important; cursor: pointer; }
.tmt-brands-directory .brand-card div[style*="bottom:12px"] { display: none !important; }
.tmt-brands-directory .brand-logo-wrap         { padding: 8px !important; }
.tmt-brands-directory .brand-logo-wrap img     { max-width: 95% !important; max-height: 95% !important; }
.tmt-brands-directory .brand-bg-color,
.tmt-brands-directory .brand-bg-video          { display: none !important; }
.tmt-brands-directory .brand-btn span {
    font-size: 11px !important;
    padding: 10px 20px !important;
    letter-spacing: 0.12em !important;
}
@media (max-width: 1023px) {
    .tmt-brands-directory .tmt-brand-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 600px) {
    .tmt-brands-directory .tmt-brand-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* -------- Editorial detail panels ------------------------------- */

.tmt-brands-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 350px;
}
.tmt-brands-panel--flip .tmt-brands-panel__media  { order: 2; }
.tmt-brands-panel--flip .tmt-brands-panel__body   { order: 1; }

.tmt-brands-panel__media { position: relative; overflow: hidden; }
.tmt-brands-panel__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmt-brands-panel__body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
    padding: 48px;
    background: #F4F4F5;
}
.tmt-brands-panel__body--blush  { background: #FFF0EF; }
.tmt-brands-panel__body--peach  { background: #F7EAE3; }
.tmt-brands-panel__body--apricot{ background: #FAD5C2; }

/* Text column — kicker / title / copy / CTA stack vertically as before. */
.tmt-brands-panel__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Logo column — square slot on the right edge of the body tile. The
   logo image sits centred inside, scaled to fit while preserving its
   native aspect ratio (object-fit: contain). Hidden on mobile so the
   single-column body stays text-first and compact. */
.tmt-brands-panel__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.tmt-brands-panel__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.tmt-brands-panel__kicker {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000;
}
.tmt-brands-panel__title {
    font-family: var(--font-secondary);
    font-size: 28px;
    font-weight: 400;
    color: #000;
    margin: 0 0 16px;
    line-height: 1.2;
}
.tmt-brands-panel__copy {
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.75;
    color: #000;
    opacity: 0.8;
}
.tmt-brands-panel__copy p             { margin: 0 0 12px; }
.tmt-brands-panel__copy p:last-child  { margin-bottom: 0; }

.tmt-brands-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}
.tmt-brands-panel__cta:hover { color: #000; }

@media (max-width: 1023px) {
    .tmt-brands-panel                        { grid-template-columns: 1fr; }
    .tmt-brands-panel--flip .tmt-brands-panel__media { order: 0; }
    .tmt-brands-panel__media                 { min-height: 250px; }
    .tmt-brands-panel__body                  { padding: 32px 24px; grid-template-columns: 1fr; }
    /* Hide the right-column brand logo on mobile so the single-column
       text stack is what drives vertical rhythm. The image-side panel
       above already conveys the brand visually on small screens. */
    .tmt-brands-panel__logo                  { display: none; }
}

/* -------- Closing CTA ------------------------------------------- */

.tmt-brands-footer-cta {
    background: #FFF0EF;
    padding: 64px 48px;
    text-align: center;
    margin-top: 48px;
}
.tmt-brands-footer-cta h2 {
    font-family: var(--font-secondary);
    font-size: 32px;
    font-weight: 400;
    color: #000;
    margin: 0 0 12px;
}
.tmt-brands-footer-cta p {
    font-family: var(--font-primary);
    font-size: 14px;
    color: #000;
    opacity: 0.6;
    margin: 0 0 32px;
    line-height: 1.6;
}
.tmt-brands-footer-cta__btn {
    display: inline-block;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    padding: 14px 36px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tmt-brands-footer-cta__btn:hover { background: #fff; color: #000; }