@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@200;300;400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    background: #edf2f8;
    font-family: 'Barlow Semi Condensed';
    line-height: 1.7;
    font-size: 13px;
    overflow-x: hidden;
}

/* All images are constrained by default */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Top info section: intro | logos | contact ── */
.info-grid {
    margin: 40px auto 0;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 1440px;
    gap: 30px;
}

/* ── Photo gallery section ── */
.photo-grid {
    margin: 30px auto 40px;
    padding: 20px;
    max-width: 1440px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Narrow screens (< 1400px): 1 column */
@media (max-width: 1399px) {
    .photo-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Shared card styles ── */
.card {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 40px 100px 0px;
    overflow: hidden;
    min-width: 0; /* prevents grid blowout */
}

.card a {
    padding: 10px;
}

/* ── Header variants ── */
.card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.card__header_main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.card__header_main h1 { color: black; }
.card__header h3 { font-size: 15px; }
.card__header p { color: black; opacity: 90%; }

.card__header img {
    margin-right: 10px;
    max-width: 100%;
    height: auto;
}

.card__header_main img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.card__header2 h3 {
    font-size: 15px;
    margin-top: 8px;
}

.card__header2 p { opacity: 50%; }

.card__header3 h3 {
    font-size: 15px;
    margin-top: 8px;
}

/* ── Photo class ── */
/* Safari iOS fix: wrap image in a block container with the height constraint,
   not on the image itself */
.card__header2,
.card__header3 {
    display: block;  /* not flex — Safari ignores max-height on flex children */
    text-align: center;
}

.card__photo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 60vh;
    margin: 0 auto;
    border-radius: 5px;
    border: 2px solid #fff;
    /* Force Safari to respect max-height */
    -webkit-max-logical-height: 60vh;
}

.card__img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.card__img2 {
    width: 100%;
    height: auto;
    border-radius: 5px;
    border: 2px solid #fff;
    display: block;
    margin: 0 auto;
}

/* ── Text styles ── */
.card__lead {
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 20px;
    color: black;
}

.card__quote {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    opacity: 70%;
    color: black;
}

.card_contact {
    white-space: pre-line;
    font-size: 1.25em;
}

.card_contact h3 { font-size: 1.5em; color: black; }
.card_contact td { font-size: 1em; color: black; }

/* Table must not blow out on mobile */
table {
    width: 100%;
    table-layout: fixed;
    word-break: break-word;
}

/* ── Color variants ── */
.card--bg-gray-white  { background-color: hsl(0, 0%, 90%); color: #fff; }
.card--bg-gray-white2 { background-color: hsl(0, 0%, 90%); color: black; }
.card--bg-green       { background-color: hsl(157, 62%, 26%); color: #fff; }
.card--bg-white       { background-color: hsl(0, 0%, 99%); color: #fff; }
.card--bg-purple      { background-color: hsl(263, 55%, 52%); color: #fff; }
.card--bg-gray-blue   { background-color: hsl(217, 19%, 35%); color: #fff; }
.card--bg-black-blue  { background-color: hsl(219, 29%, 14%); color: #fff; }

/* ── Footer ── */
footer {
    text-align: center;
    padding: 20px;
}

/* ── Responsive: tablets ── */
@media (max-width: 900px) {
    .info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .info-grid .card:nth-child(1) {
        grid-column: 1 / 3;
    }
}

/* ── Responsive: mobile ── */
@media (max-width: 600px) {
    .info-grid {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 10px;
    }

    .photo-grid {
        grid-template-columns: 1fr;
        margin: 0;
        padding: 10px;
        gap: 15px;
    }

    .card {
        padding: 10px;
        /* Hard stop — card can never be wider than the screen */
        max-width: calc(100vw - 20px);
    }

    .card__photo,
    .card__img2,
    .card__img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}