/*
File: css.css
Purpose: Professional styling for Dr Ian Rosenberg contact page
Design: Card with accent colour
Version: 3.1
*/


/* =========================================================
   1. BASE SETTINGS
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: #263238;
    background: #edf2f3;

    line-height: 1.55;

    /* Allows the page to scroll naturally if needed */
    overflow-y: auto;
}


/* =========================================================
   2. PAGE LAYOUT
   ========================================================= */

main {
    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px 24px;
}


/* =========================================================
   3. MAIN CARD
   ========================================================= */

.contact-card {
    position: relative;

    width: 100%;
    max-width: 900px;

    display: grid;

    /*
    Top layout:

    PHOTO | NAME / TITLE
          | UPDATED DATE
          | EMAIL | PHONE
    */

    grid-template-columns: 150px 1fr 1fr;
    column-gap: 34px;
    row-gap: 10px;

    padding: 46px 48px 48px;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 4px 12px rgba(15, 45, 55, 0.05),
        0 18px 45px rgba(15, 45, 55, 0.09);

    overflow: hidden;
}


/* Teal accent across the top */

.contact-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 7px;

    background: #178c8c;
}


/* =========================================================
   4. PROFILE PHOTO
   ========================================================= */

.profile-photo {
    grid-column: 1;
    grid-row: 1 / 5;

    align-self: center;

    width: 145px;
    height: 145px;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;

    border: 5px solid #f2f7f7;

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   5. NAME AND PROFESSIONAL TITLE
   ========================================================= */

.contact-card h1 {
    grid-column: 2 / 4;

    margin: 8px 0 4px;

    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 650;
    line-height: 1.1;

    letter-spacing: -0.025em;

    color: #182d38;
}


/*
CSS-only professional title.

Longer term, this would be better placed directly in the HTML,
but this works visually with the current structure.
*/

.contact-card h1::after {
    content: "ORAL AND MAXILLOFACIAL SURGEON";

    display: block;

    margin-top: 10px;

    font-size: 0.82rem;
    font-weight: 500;

    letter-spacing: 0.08em;

    color: #53666e;
}


/* =========================================================
   6. UPDATED DATE
   ========================================================= */

.contact-card > .updated-date {
    grid-column: 2 / 4;

    margin: 0 0 8px;

    font-size: 0.82rem;
    font-weight: 500;

    color: #718086;
}


/* =========================================================
   7. PRIMARY CONTACT INFORMATION
   ========================================================= */

.contact-card > p:not(.updated-date) {
    margin: 6px 0;

    font-size: 0.98rem;
}


/*
The date is the first <p> inside .contact-card,
so email is now the second <p>.
*/

.contact-card > p:nth-of-type(2) {
    grid-column: 2;
}


/*
Phone is now the third <p>.
*/

.contact-card > p:nth-of-type(3) {
    grid-column: 3;
}


/* Labels */

.contact-card strong {
    font-weight: 600;

    color: #263b44;
}


/* Links */

.contact-card a {
    color: #176d7a;

    text-decoration: none;

    overflow-wrap: anywhere;
}


/* Hover state */

.contact-card a:hover {
    color: #0b505b;

    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Keyboard accessibility */

.contact-card a:focus-visible {
    outline: 3px solid rgba(23, 140, 140, 0.28);
    outline-offset: 4px;

    border-radius: 3px;
}


/* =========================================================
   8. PRACTICE LOCATION UPDATE PANEL
   ========================================================= */

.address-update {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    column-gap: 55px;
    row-gap: 6px;

    margin-top: 34px;

    padding: 30px 34px 32px;

    background:
        linear-gradient(
            135deg,
            #eef9f8 0%,
            #e5f4f3 100%
        );

    border: 1px solid #d4e9e7;
    border-radius: 11px;
}


/* =========================================================
   9. PRACTICE UPDATE HEADING
   ========================================================= */

.address-update h2 {
    grid-column: 1 / -1;

    margin: 0 0 12px;

    font-size: 1.35rem;
    font-weight: 650;

    letter-spacing: 0.01em;

    color: #167878;
}


/* =========================================================
   10. INTRODUCTORY PRACTICE MESSAGE
   ========================================================= */

.address-update > p:first-of-type {
    grid-column: 1 / -1;

    max-width: 720px;

    margin: 0 0 24px;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(23, 120, 120, 0.15);

    color: #3d5057;

    font-size: 1rem;
}


/* =========================================================
   11. PRACTICE INFORMATION GRID
   ========================================================= */

.address-update p {
    margin: 7px 0;
}


/*
Left column
*/


/* New practice */

.address-update > p:nth-of-type(2) {
    grid-column: 1;
    grid-row: 3;
}


/* New address */

.address-update > p:nth-of-type(3) {
    grid-column: 1;
    grid-row: 4;
}


/*
Right column
*/


/* Phone */

.address-update > p:nth-of-type(4) {
    grid-column: 2;
    grid-row: 3;
}


/* Email */

.address-update > p:nth-of-type(5) {
    grid-column: 2;
    grid-row: 4;
}


/* Website */

.address-update > p:nth-of-type(6) {
    grid-column: 2;
    grid-row: 5;
}


/* Detail labels */

.address-update strong {
    display: inline-block;

    margin-bottom: 2px;

    font-size: 0.88rem;
    font-weight: 650;

    color: #24434a;
}


/* =========================================================
   12. TABLET
   ========================================================= */

@media (max-width: 760px) {

    main {
        align-items: flex-start;

        padding: 24px 16px;
    }

    .contact-card {
        grid-template-columns: 120px 1fr;

        column-gap: 26px;

        padding: 38px 32px;
    }

    .profile-photo {
        grid-column: 1;
        grid-row: 1 / 5;

        width: 115px;
        height: 115px;
    }

    .contact-card h1 {
        grid-column: 2;
    }

    .contact-card > .updated-date,
    .contact-card > p:nth-of-type(2),
    .contact-card > p:nth-of-type(3) {
        grid-column: 2;
    }

    .address-update {
        grid-template-columns: 1fr 1fr;

        column-gap: 32px;

        padding: 28px;
    }

}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 560px) {

    body {
        background: #ffffff;
    }

    main {
        padding: 0;
    }

    .contact-card {
        display: block;

        min-height: 100vh;

        padding: 38px 22px;

        border-radius: 0;

        box-shadow: none;
    }


    /* Centre profile photo on small screens */

    .profile-photo {
        display: block;

        width: 125px;
        height: 125px;

        margin: 0 auto 24px;
    }


    /* Centre name and title */

    .contact-card h1 {
        margin-bottom: 26px;

        text-align: center;

        font-size: 2rem;
    }


    /* Updated date */

    .contact-card > .updated-date {
        margin-top: -16px;
        margin-bottom: 20px;

        font-size: 0.8rem;

        text-align: center;
    }


    /* Primary contact details */

    .contact-card > p:not(.updated-date) {
        margin: 11px 0;

        text-align: center;
    }


    /* Practice update becomes one column */

    .address-update {
        display: block;

        margin-top: 32px;

        padding: 25px 22px;
    }

    .address-update h2 {
        font-size: 1.25rem;
    }

    .address-update > p:first-of-type {
        margin-bottom: 22px;
    }

    .address-update p {
        margin: 18px 0;
    }

}