/* ========================================
   WIMAC PRODUCTS SECTION - Dark Theme
   Extracted from old/assets/css/style.css
   (selectors are unique to this section — no
   overlap with new/assets/css/style.css)
   ======================================== */

/* Section Container */
.wm-products {
    background: #ffffff;
    padding: 100px 0 120px;
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern */
.wm-products::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 233, 0, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 233, 0, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

/* ============================================================
   Section Header — editorial split layout.
   LEFT column: tag pill + big title (with yellow-block accent
   on the "Lifting Equipment" portion).
   RIGHT column: small index label + description paragraph,
   leaning on a vertical yellow rule.
   Collapses to a single stacked column under 900 px.
   ============================================================ */
.wm-products-header {
    margin-bottom: 64px;
    position: relative;
    z-index: 1;
}

.wm-products-header-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: end;
}

.wm-products-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.wm-products-header-right {
    position: relative;
    padding-left: clamp(20px, 2.5vw, 32px);
    border-left: 2px solid var(--accent, #ffe900);
}

/* Slim tag chip — smaller and tighter than the original. */
.wm-products-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(10, 10, 10, 0.06);
    color: #0a0a0a;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 22px;
    border: 1px solid rgba(10, 10, 10, 0.08);
}

.wm-products .wm-tag-logo {
    height: 18px;
    width: auto;
}

.wm-products-header h2 {
    font-size: clamp(2rem, 3.8vw, 3.25rem);
    font-weight: 700;
    color: #0a0a0a;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -1px;
}

/* Accent word — yellow text with a hand-drawn underline that
   sweeps in left-to-right when the title reveals. The underline
   uses a yellow gradient with rounded edges. */
.wm-products-title-accent {
    position: relative;
    display: inline-block;
    color: #0a0a0a;
}
.wm-products-title-accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 14px;
    background: var(--accent, #ffe900);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.7, 0, 0.3, 1);
    transition-delay: 0.5s;
    z-index: -1;
}
.wm-products-header h2.is-revealed .wm-products-title-accent::after {
    transform: scaleX(1);
}

.wm-products-header-index {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(10, 10, 10, 0.45);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.wm-products-header p {
    font-size: 16px;
    color: rgba(10, 10, 10, 0.7);
    margin: 0 0 28px;
    line-height: 1.75;
    max-width: 520px;
}

/* Three-stat row below the description — yellow numbers, small
   muted labels underneath. Adds substance to the right column. */
.wm-products-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.wm-products-stat {
    position: relative;
    padding-top: 12px;
    border-top: 1px solid rgba(10, 10, 10, 0.12);
}
.wm-products-stat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--accent, #ffe900);
}
.wm-products-stat strong {
    display: block;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    color: #0a0a0a;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.wm-products-stat strong em {
    color: var(--accent, #ffe900);
    font-style: normal;
    font-size: 0.7em;
    margin-left: 1px;
}
.wm-products-stat span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(10, 10, 10, 0.5);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Honour reduced-motion: skip the title-underline sweep. */
@media (prefers-reduced-motion: reduce) {
    .wm-products-title-accent::after {
        transition: none;
        transform: scaleX(1);
    }
}

@media (max-width: 900px) {
    .wm-products-header-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
    }
    .wm-products-header-right {
        border-left: 0;
        padding-left: 0;
        border-top: 2px solid var(--accent, #ffe900);
        padding-top: 22px;
    }
}
@media (max-width: 480px) {
    .wm-products-header h2 { font-size: 1.85rem; }
    .wm-products-header p  { font-size: 15px; }
}

/* Products Grid - Bento Layout */
.wm-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
    position: relative;
    z-index: 1;
}

/* Base Card Styles */
.wm-card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    display: block;
    text-decoration: none;
    min-height: 280px;
    background: #e9ecef;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.4s ease;
}

.wm-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Card Image Container */
.wm-card-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.wm-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.9);
    transform: scale(1);
    transition: filter 0.5s ease, transform 0.7s ease;
}

/* Hover Effect - Grayscale to Color + Zoom */
.wm-card:hover .wm-card-img img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.1);
}

/* Card Overlay */
.wm-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.1) 100%
    );
    transition: background 0.4s ease;
}

.wm-card:hover .wm-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
}

/* Card Content */
.wm-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Card Badge */
.wm-card-badge {
    background: #ffe900;
    color: #0a0a0a;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wm-badge-alt {
    background: #0a0a0a;
    color: #ffffff;
}

/* Card Title */
.wm-card-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    transition: transform 0.3s ease;
}

.wm-card:hover .wm-card-content h3 {
    transform: translateY(-3px);
}

/* Card Button */
.wm-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffe900;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, gap 0.3s ease;
}

.wm-card-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.wm-card:hover .wm-card-btn {
    opacity: 1;
    transform: translateY(0);
}

.wm-card:hover .wm-card-btn i {
    transform: translateX(4px);
}

/* Large Card (2x2) - Overhead Cranes */
.wm-card-large {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 580px;
}

.wm-card-large .wm-card-content {
    padding: 40px;
}

.wm-card-large .wm-card-content h3 {
    font-size: 32px;
}

.wm-card-large .wm-card-btn {
    font-size: 15px;
}

/* Wide Card (2x1) - Hoists & Trolleys */
.wm-card-wide {
    grid-column: span 2;
    min-height: 280px;
}

.wm-card-wide .wm-card-content h3 {
    font-size: 26px;
}

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

@media (max-width: 1200px) {
    .wm-card-large {
        min-height: 500px;
    }

    .wm-card-large .wm-card-content h3 {
        font-size: 28px;
    }
}

@media (max-width: 992px) {
    .wm-products {
        padding: 80px 0 100px;
    }

    .wm-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .wm-card-large {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 350px;
    }

    .wm-card {
        min-height: 250px;
    }

    .wm-card-wide {
        grid-column: span 2;
    }

    .wm-products-header p {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .wm-products {
        padding: 60px 0 80px;
    }

    .wm-products-header {
        margin-bottom: 40px;
    }

    .wm-products-tag {
        font-size: 11px;
        padding: 8px 18px;
    }

    .wm-card-large {
        min-height: 300px;
    }

    .wm-card-large .wm-card-content h3 {
        font-size: 24px;
    }

    .wm-card {
        min-height: 220px;
    }

    .wm-card-content {
        padding: 24px;
    }

    .wm-card-content h3 {
        font-size: 20px;
    }

    .wm-card-wide .wm-card-content h3 {
        font-size: 22px;
    }

    /* Show button by default on mobile */
    .wm-card-btn {
        opacity: 1;
        transform: translateY(0);
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .wm-products-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wm-card-large,
    .wm-card-wide {
        grid-column: span 1;
    }

    .wm-card-large {
        min-height: 280px;
    }

    .wm-card {
        min-height: 200px;
    }

    .wm-card-wide {
        min-height: 200px;
    }

    .wm-products-header p {
        font-size: 14px;
    }

    .wm-card-content {
        padding: 20px;
    }

    .wm-card-content h3 {
        font-size: 18px;
    }

    .wm-card-large .wm-card-content h3,
    .wm-card-wide .wm-card-content h3 {
        font-size: 20px;
    }
}


/* ========================================================
   QUALITY CERTIFICATES PAGE
   Extracted from old/assets/css/style.css.
   - Catalogue grid (.catalogue-*)  : old lines 5169–5505
   - Certificates list (.cert-*)    : old lines 4871–5147
   Scoped variables avoid clashing with the new site's
   global :root / .container rules.
   ======================================================== */

/* Scope the legacy variables to the page's sections only */
.catalogue-section,
.certificates-section,
.cert-section {
    --primary: #ffe900;
    --dark: #0a0a0a;
    --gray: #666;
    --light-bg: #f5f5f5;
}

/* ======== CERTIFICATES SECTION ======== */
.certificates-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.cert-section {
    padding: 100px 0;
    background: #f8f8f8;
}

.cert-header {
    text-align: center;
    margin-bottom: 60px;
}

.cert-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--primary);
    color: var(--dark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.cert-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 15px;
}

.cert-header p {
    font-size: 16px;
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.cert-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cert-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    background: #fff;
    border: 1px solid #eee;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cert-item:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    transform: translateX(5px);
}

.cert-icon {
    width: 50px;
    height: 50px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.cert-icon i {
    font-size: 20px;
    color: var(--dark);
}

.cert-item:hover .cert-icon {
    background: var(--dark);
}

.cert-item:hover .cert-icon i {
    color: var(--primary);
}

.cert-info {
    flex: 1;
    min-width: 0;
}

.cert-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-info span {
    font-size: 13px;
    color: var(--gray);
}

.cert-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.cert-size {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cert-download {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cert-download i {
    font-size: 14px;
    color: var(--gray);
    transition: all 0.3s ease;
}

.cert-item:hover .cert-download {
    background: var(--primary);
}

.cert-item:hover .cert-download i {
    color: var(--dark);
}

/* Certificates — responsive */
@media (max-width: 992px) {
    .cert-section {
        padding: 80px 0;
    }
    .cert-header h2 {
        font-size: 36px;
    }
    .cert-header {
        margin-bottom: 50px;
    }
}

@media (max-width: 768px) {
    .cert-section {
        padding: 60px 0;
    }
    .cert-header h2 {
        font-size: 30px;
    }
    .cert-header p {
        font-size: 15px;
    }
    .cert-item {
        padding: 18px 20px;
        gap: 15px;
    }
    .cert-icon {
        width: 45px;
        height: 45px;
    }
    .cert-icon i {
        font-size: 18px;
    }
    .cert-info h4 {
        font-size: 14px;
    }
    .cert-info span {
        font-size: 12px;
    }
    .cert-size {
        display: none;
    }
    .cert-download {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 576px) {
    .cert-section {
        padding: 50px 0;
    }
    .cert-tag {
        font-size: 10px;
        padding: 8px 15px;
    }
    .cert-header h2 {
        font-size: 26px;
    }
    .cert-header {
        margin-bottom: 40px;
    }
    .cert-list {
        gap: 10px;
    }
    .cert-item {
        padding: 15px;
        gap: 12px;
    }
    .cert-item:hover {
        transform: none;
    }
    .cert-icon {
        width: 42px;
        height: 42px;
    }
    .cert-icon i {
        font-size: 16px;
    }
    .cert-info h4 {
        font-size: 13px;
        white-space: normal;
    }
    .cert-info span {
        font-size: 11px;
        display: block;
        margin-top: 2px;
    }
    .cert-download {
        width: 36px;
        height: 36px;
    }
    .cert-download i {
        font-size: 12px;
    }
}

/* ======== CATALOGUE SECTION ======== */
.catalogue-section {
    padding: 100px 0;
    background: var(--light-bg);
}

.catalogue-header {
    text-align: center;
    margin-bottom: 70px;
}

.catalogue-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--primary);
    color: var(--dark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.catalogue-header h2 {
    font-size: 46px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.catalogue-header p {
    font-size: 16px;
    color: var(--gray);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.7;
}

.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.catalogue-card {
    position: relative;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0,0,0,0.06);
    transition: all 0.4s ease;
}

.catalogue-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    transform: translateY(-8px);
}

/* Thumb — A4 ratio (1:1.414) */
.catalogue-thumb {
    position: relative;
    overflow: hidden;
    background: var(--dark);
    aspect-ratio: 1 / 1.414;
}

.catalogue-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.5s ease;
}

.catalogue-card:hover .catalogue-thumb img {
    transform: scale(1.05);
    opacity: 0.9;
}

.catalogue-thumb::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    pointer-events: none;
}

.catalogue-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10,10,10,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
}

.catalogue-card:hover .catalogue-overlay {
    opacity: 1;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--primary);
    color: var(--dark);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.catalogue-card:hover .download-btn {
    transform: translateY(0);
}

.download-btn:hover {
    background: #fff;
}

.download-btn i {
    font-size: 14px;
}

.catalogue-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 6px 12px;
    background: var(--primary);
    color: var(--dark);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 5;
}

.catalogue-content {
    padding: 25px;
    border-top: 3px solid var(--primary);
}

.catalogue-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.catalogue-subtitle {
    color: var(--gray);
    font-size: 13px;
    margin-bottom: 20px;
}

.catalogue-flags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flag-btn {
    width: 32px;
    height: 22px;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.5;
    overflow: hidden;
}

.flag-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flag-btn:hover {
    opacity: 0.8;
}

.flag-btn.active {
    opacity: 1;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Catalogue — responsive */
@media (max-width: 1200px) {
    .catalogue-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .catalogue-header h2 {
        font-size: 40px;
    }
}

@media (max-width: 992px) {
    .catalogue-section {
        padding: 80px 0;
    }
    .catalogue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    .catalogue-header {
        margin-bottom: 50px;
    }
    .catalogue-header h2 {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .catalogue-section {
        padding: 60px 0;
    }
    .catalogue-header h2 {
        font-size: 28px;
    }
    .catalogue-header p {
        font-size: 15px;
    }
    .catalogue-grid {
        gap: 20px;
    }
    .catalogue-content {
        padding: 20px;
    }
    .catalogue-content h3 {
        font-size: 16px;
    }
    .flag-btn {
        width: 28px;
        height: 20px;
    }
}

@media (max-width: 576px) {
    .catalogue-section {
        padding: 50px 0;
    }
    .catalogue-tag {
        font-size: 10px;
        padding: 8px 15px;
    }
    .catalogue-header h2 {
        font-size: 24px;
    }
    .catalogue-header {
        margin-bottom: 40px;
    }
    .catalogue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .catalogue-content {
        padding: 15px;
    }
    .catalogue-content h3 {
        font-size: 14px;
    }
    .catalogue-subtitle {
        font-size: 12px;
        margin-bottom: 15px;
    }
    .catalogue-badge {
        top: 10px;
        left: 10px;
        padding: 4px 8px;
        font-size: 8px;
    }
    .flag-btn {
        width: 26px;
        height: 18px;
    }
}

/* ============================================================
   PRESERVE THE BENTO RATIO ON ALL DESKTOP VIEWS.
   On viewports >= 992 px, drop the pixel min-heights and lock
   the cards' shape to aspect-ratios so they scale proportionally
   with the 4-column grid no matter how wide the viewport is.
     - Regular 1x1 card: square
     - Wide 2x1 card:    twice as wide as tall
     - Large 2x2 card:   no aspect-ratio; the 2-row grid span gives
                         it the same width as the wide card and
                         double the height, so it lands square.
   Placed last in the file so it wins the cascade over every
   `max-width:` min-height rule above.
   ============================================================ */
@media (min-width: 992px) {
    .wm-card:not(.wm-card-large):not(.wm-card-wide) {
        min-height: 0;
        aspect-ratio: 1 / 1;
    }
    .wm-card-wide {
        min-height: 0;
        aspect-ratio: 2 / 1;
    }
    .wm-card-large {
        min-height: 0;
    }
}