/**
 * Component: Main Section (Hero)
 * Architecture: Standalone (No external dependencies)
 * Colors follow the page palette (--primary-color / --third-color from header.php) with fallbacks.
 */

/* 1. Outer Section - Padding instead of Margin */
.tama-ms-section {
    width: 100%;
    display: block;
    padding: 40px 0 80px;
    overflow: hidden;
}

/* 2. Layout - text aligned to the 1520px container, media bleeds to the right edge */
.tama-ms-inner {
    display: grid;
    grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
    align-items: center;
    column-gap: 5%;
    padding-left: max(15px, calc((100% - 1520px) / 2 + 15px));
    padding-right: 30px;
}

/* 3. Text Column */
.tama-ms-text {
    display: flex;
    flex-direction: column;
}

.tama-ms-section .tama-ms-subtitle {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--primary-color, #6b8e0f);
    margin: 0 0 40px;
}

/* Higher specificity + !important to beat global h1 font-size rules (rabeea_lior_fix) */
.tama-ms-section .tama-ms-title {
    font-family: 'Helvetica', Arial, sans-serif !important;
    font-size: clamp(40px, 3.9vw, 75px) !important;
    font-weight: 700;
    line-height: 1 !important;
    color: var(--third-color, #1f3300);
    margin: 0 0 24px;
}

.tama-ms-section .tama-ms-desc {
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.4;
    color: var(--third-color, #1f3300);
}

.tama-ms-desc p {
    margin: 0 0 12px;
}

.tama-ms-desc p:last-child {
    margin-bottom: 0;
}

/* Optional button (rendered only when a link is set) */
.tama-ms-section .tama-ms-button {
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    margin-block-start: 40px;
    padding: 12px 32px;
    background-color: var(--primary-color, #667f06);
    color: #fff;
    font-family: "Titillium", sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    border-radius: 12px 12px 12px 2px;
    transition: all 0.3s ease;
}

.tama-ms-section .tama-ms-button:hover {
    background-color: var(--third-color, #1c2d00);
    color: #fff;
    text-decoration: none;
}

[dir="rtl"] .tama-ms-section .tama-ms-button {
    border-radius: 12px 12px 2px 12px;
}

/* 4. Media Column */
.tama-ms-media {
    display: flex;
    justify-content: flex-end;
}

.tama-ms-picture {
    display: block;
    width: 100%;
}

.tama-ms-img,
.tama-ms-video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* 5. Mobile - stack: media on top, text below */
@media screen and (max-width: 768px) {
    .tama-ms-media {
        order: -1;
    }

    .tama-ms-section {
        padding: 24px 0 48px;
    }

    .tama-ms-inner {
        grid-template-columns: 1fr;
        row-gap: 32px;
        padding: 0 16px;
    }

    .tama-ms-section .tama-ms-subtitle {
        font-size: 17px;
        margin-bottom: 16px;
    }

    .tama-ms-section .tama-ms-title {
        font-size: 40px !important;
        margin-bottom: 16px;
    }

    .tama-ms-section .tama-ms-desc {
        font-size: 18px;
    }

    .tama-ms-section .tama-ms-button {
        margin-block-start: 24px;
    }
}