/* ==========================================================================
   Workshop Base CSS - tpl- prefixed atomic classes
   Shared by frontend and backend (iframe preview)
   @package Linghang
   @since 2.0.0
   ========================================================================== */

/* Container */
.tpl-container {
    max-width: var(--container-max-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 15px);
    width: 100%;
}

/* Typography Standard */
h1, h2, h3 {
    margin: 0;
    line-height: 1.2;
    color: var(--secondary-color, #131e4a);
}

h1 { font-size: 64px; font-weight: 800; }
h2 { font-size: 36px; font-weight: 800; }
h3 { font-size: 24px; font-weight: 600; }


/* Section Spacing */
.tpl-section {
    padding: var(--spacing-xxl, 100px) 0;
}
.tpl-section-sm {
    padding: var(--spacing-lg, 50px) 0;
}
.tpl-section-lg {
    padding: 120px 0;
}

/* Layout */
.tpl-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.tpl-col {
    padding: 0 15px;
    flex: 1;
}
.tpl-col-2 {
    width: 50%;
    flex: none;
}
.tpl-col-3 {
    width: 33.333%;
    flex: none;
}
.tpl-col-4 {
    width: 25%;
    flex: none;
}

/* Buttons (based on existing .btn specs but independently named) */
.tpl-btn {
    display: inline-block;
    padding: 15px 40px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: var(--global-radius, 0);
    cursor: pointer;
    transition: var(--transition-base, all 0.3s ease);
    text-align: center;
    line-height: 1;
    text-decoration: none;
}
.tpl-btn-primary {
    background: var(--primary-color, #fd5f17);
    color: #fff;
}
.tpl-btn-primary:hover {
    background: var(--secondary-color, #131e4a);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary, 0 4px 14px rgba(253,95,23,0.4));
}
.tpl-btn-outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}
.tpl-btn-outline:hover {
    background: #fff;
    color: var(--secondary-color, #131e4a);
}
.tpl-btn-rounded {
    border-radius: 50px;
}
.tpl-btn-square {
    border-radius: 0;
}

/* Cards */
.tpl-card {
    background: #fff;
    padding: 40px 30px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1));
    transition: var(--transition-base, all 0.3s ease);
    border-radius: var(--global-radius, 0);
    height: 100%;
}
.tpl-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-primary, 0 4px 14px rgba(253,95,23,0.4));
}

/* Text Utilities */
.tpl-text-center { text-align: center; }
.tpl-text-left   { text-align: left; }
.tpl-text-right  { text-align: right; }
.tpl-text-muted  { color: var(--text-muted, #777777); }

/* Spacing Utilities */
.tpl-mt-0   { margin-top: 0; }
.tpl-mb-sm  { margin-bottom: var(--spacing-sm, 20px); }
.tpl-mb-md  { margin-bottom: var(--spacing-md, 30px); }
.tpl-mb-lg  { margin-bottom: var(--spacing-lg, 50px); }

/* Section Title */
.tpl-section-title {
    margin-bottom: var(--spacing-lg, 50px);
}
.tpl-section-title h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: var(--spacing-sm, 20px);
    color: var(--secondary-color, #131e4a);
}
.tpl-section-title p {
    font-size: 1.1em;
    color: var(--text-muted, #777777);
    max-width: 600px;
    margin: 0 auto;
}

/* Background Variants */
.tpl-bg-primary {
    background: var(--primary-color, #fd5f17);
    color: #fff;
}
.tpl-bg-secondary {
    background: var(--secondary-color, #131e4a);
    color: #fff;
}
.tpl-bg-light {
    background: var(--background-light, #f8f9fa);
}
.tpl-bg-dark {
    background: var(--dark-background, #0a172b);
    color: #fff;
}

/* Overlay */
.tpl-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--primary-color-rgb, 253,95,23), 0.7);
}

/* SVG Icons */
.tpl-svg-icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 991px) {
    .tpl-col-3,
    .tpl-col-4 {
        width: 50%;
    }
}
@media (max-width: 767px) {
    .tpl-col,
    .tpl-col-2,
    .tpl-col-3,
    .tpl-col-4 {
        width: 100%;
    }
    .tpl-section {
        padding: var(--spacing-xl, 80px) 0;
    }
    .tpl-section-lg {
        padding: 80px 0;
    }
    .tpl-section-title h2 {
        font-size: 2em;
    }
    .tpl-btn {
        padding: 12px 30px;
        font-size: 13px;
    }
}