/*==================================================
  FERROBEND: FLANGE TYPE / PRESSURE CLASS CARDS
  File: /css/type-cards.css
  Link it AFTER the page's own CSS file.
==================================================*/

.ft-section {
    --ft-navy: #0d2947;
    --ft-coral: #ff7043;
    --ft-soft: #b9d6f5;
    --ft-gap: 24px;

    width: 100%;
    padding: 20px 20px 80px;
       background-color: #e9eef2;
    background-image: radial-gradient(circle, rgba(14, 53, 88, 0.12) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}

.ft-section,
.ft-section * {
    box-sizing: border-box;
}

.ft-wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* breadcrumb inside the section */
.ft-wrap .dimensions-breadcrumb {
    max-width: none;
    margin: 0 0 22px;
    padding: 0;
    font-size: 14px;
}

/*---------- intro (heading + stats) ----------*/

.ft-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.ft-intro h1 {
    color: #0d2947;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 700;
    line-height: 1.2;
}

.ft-intro p {
    max-width: 620px;
    margin-top: 8px;
    color: #4a5f72;
    font-size: 16px;
    line-height: 1.6;
}

.ft-stats {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.ft-stat strong {
    display: block;
    color: #f58220;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.ft-stat span {
    color: #4a5f72;
    font-size: 13px;
}

/*---------- grid: works for 1 to 8 cards ----------*/

.ft-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ft-gap);
}

/* phone: 1 per row */
.ft-card {
    flex: 0 0 100%;
    min-width: 0;
    min-height: 260px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--ft-navy);
    border-radius: 15px;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* tablet: 2 per row */
@media (min-width: 601px) {
    .ft-card {
        flex: 0 0 calc((100% - var(--ft-gap)) / 2);
    }
}

/* desktop: 3 per row (5 cards = 3 + 2 centered, 7 = 3 + 3 + 1 centered) */
@media (min-width: 901px) {
    .ft-card {
        flex: 0 0 calc((100% - 2 * var(--ft-gap)) / 3);
    }
}

/* exactly 1, 2 or 4 cards: wider cards, centered (4 = 2 x 2) */
@media (min-width: 601px) {
    .ft-card:only-child,
    .ft-card:first-child:nth-last-child(2),
    .ft-card:first-child:nth-last-child(2) ~ .ft-card,
    .ft-card:first-child:nth-last-child(4),
    .ft-card:first-child:nth-last-child(4) ~ .ft-card {
        flex: 1 1 280px;
        max-width: 440px;
    }
}

.ft-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(13, 41, 71, 0.22);
}

.ft-card:focus-visible {
    outline: 3px solid var(--ft-coral);
    outline-offset: 3px;
}

/*---------- card top: drawing OR big class number ----------*/

.ft-art {
    height: 130px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ft-art img {
    display: block;
    width: 85%;
    height: 100%;
    object-fit: contain;
}

.ft-art--class {
    flex-direction: column;
    gap: 4px;
}

.ft-big {
    color: #ffffff;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
}

.ft-unit {
    color: var(--ft-coral);
    font-size: 15px;
    font-weight: 600;
}

/*---------- card text ----------*/

.ft-code {
    display: block;
    margin-bottom: 3px;
    color: var(--ft-coral);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.ft-card h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.ft-card p {
    margin-top: 8px;
    color: var(--ft-soft);
    font-size: 15px;
    line-height: 1.5;
}

/* small tags, e.g. WN / BL on class cards */
.ft-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.ft-tags span {
    padding: 2px 9px;
    border: 1px solid rgba(185, 214, 245, 0.45);
    border-radius: 4px;
    color: var(--ft-soft);
    font-size: 13px;
    font-weight: 600;
}

.ft-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--ft-coral);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.ft-view span {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.ft-card:hover .ft-view span {
    transform: translateX(4px);
}

/*---------- small fixes ----------*/

/* the CTA heading must be allowed to wrap on phones */
.cta-section h2 {
    white-space: normal;
}

@media (max-width: 600px) {
    .ft-section {
        padding: 16px 16px 56px;
    }

    .ft-card {
        min-height: 240px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ft-card,
    .ft-view span {
        transition: none;
    }
}