/* EDIT THE SOURCE: _build/static/assets/css/instructors.css, then run npm run build (in _build/). The copy in
   Website/assets/css/ is overwritten by every build. */
/* Live driving-instructor cards on the hand-built Driving Schools province pages (filled by assets/js/instructors.js).
   Light theme of those pages: white cards, navy #003366 headings, green-to-blue gradient buttons. */

.instructor-list { margin: 4px 0 28px; }

.instructor-grid { display: grid; gap: 18px; }

.instructor-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e3e9f2;
    border-radius: 15px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    font-family: 'Poppins', sans-serif;
}

.instructor-card-logo {
    flex: 0 0 140px;
    width: 140px;
    height: 105px;
    border: 1px solid #e3e9f2;
    border-radius: 10px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.instructor-card-logo img { max-width: 88%; max-height: 88%; object-fit: contain; }
.instructor-card-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%);
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1px;
}

.instructor-card-body { flex: 1; min-width: 0; }

.instructor-card-name { color: #003366; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; overflow-wrap: anywhere; }
.instructor-card-name a { color: inherit; text-decoration: none; }
.instructor-card-name a:hover { text-decoration: underline; }

.instructor-codes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.instructor-code {
    background: #eef3f9;
    color: #003366;
    border: 1px solid #d6e2f0;
    border-radius: 50px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
}

.instructor-card-areas { color: #5b6b7f; font-size: 13px; margin: 0 0 8px; }
.instructor-card-contact { color: #222222; font-size: 14px; margin: -2px 0 8px; }
.instructor-card-desc { color: #222222; font-size: 14px; line-height: 1.6; margin: 0 0 14px; overflow-wrap: anywhere; }

.instructor-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.instructor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: var(--btn-radius); /* site.css (linked before this file): every button's corners */
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.instructor-btn:hover { transform: translateY(-2px); }
.instructor-btn--primary { background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%); }
.instructor-btn--primary:hover { box-shadow: 0 8px 18px rgba(59, 130, 246, 0.28); }
.instructor-btn--call { background: #3b82f6; }
.instructor-btn--whatsapp { background: #25d366; }
.instructor-btn--whatsapp:hover { background: #128c7e; }
.instructor-btn--outline { background: #ffffff; color: #003366; border-color: #c9d6e6; }
.instructor-btn--outline:hover { border-color: #3b82f6; color: #1d4ed8; }

.instructor-note,
.instructor-empty {
    background: #ffffff;
    border: 1px dashed #c9d6e6;
    border-radius: 15px;
    padding: 20px 24px;
    color: #5b6b7f;
    font-size: 15px;
    text-align: center;
}
.instructor-empty a { color: #16a34a; font-weight: 700; text-decoration: none; }
.instructor-empty a:hover { text-decoration: underline; }

/* register button at the end of the page-top block */
.instructor-register-cta { display: flex; justify-content: center; margin-top: 4px; }
.instructor-register-cta .instructor-btn { padding: 12px 26px; font-size: 14px; }

@media (max-width: 640px) {
    .instructor-card { flex-direction: column; align-items: stretch; padding: 18px; gap: 16px; }
    .instructor-card-logo { flex-basis: auto; width: 100%; height: 120px; }
    .instructor-card-name { font-size: 19px; }
    .instructor-card-actions .instructor-btn { flex: 1 1 calc(50% - 8px); }
    .instructor-register-cta .instructor-btn { width: 100%; }
}

/* ---- Premium advert (pa-): one per premium driving school in the Premium panel, and the labelled example advert
   (tools/premium-example.js) on the provinces of data/premium-example.json. Built by assets/js/instructors.js
   (renderAdvert); approved look: mockups/premium-advert.html. Icons are CSS masks in the text colour. */
.placement-panel.placement-panel--advert { text-align: left; padding: 22px 24px 20px; }
.placement-panel--advert .placement-eyebrow { text-align: center; }
.pa-advert { font-family: 'Poppins', sans-serif; color: #222222; }
.pa-advert + .pa-advert { margin-top: 22px; padding-top: 22px; border-top: 1px solid #e3e9f2; }

/* A panel with the example advert: the eyebrow and the example's label on one line (.placement-head, written by
   tools/update-instructor-pages.js), centred; on a narrow panel they wrap onto two centred lines. The label is a
   compact pill as wide as its text; instructors.js removes it when real adverts replace the example. */
.placement-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 8px;
}
.placement-head .placement-eyebrow { margin: 0; }
.placement-example-label {
    margin: 0;
    max-width: 100%;
    padding: 4px 10px;
    border: 1.5px dashed #f3c46b;
    border-radius: var(--btn-radius);
    background: #fff7e6;
    color: #6b4e00;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-align: center;
}

.pa-head { display: flex; gap: 18px; align-items: center; margin: 6px 0 20px; }
.pa-logo {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    border-radius: 16px;
    background: linear-gradient(135deg, #22c55e, #3b82f6);
    color: #ffffff;
    font-weight: 800;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.18);
}
.pa-logo--image { background: #ffffff; border: 1px solid #e3e9f2; }
.pa-logo img { max-width: 88%; max-height: 88%; object-fit: contain; }
.pa-title { min-width: 0; }
.pa-name { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.pa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: var(--btn-radius);
    background: var(--menu-active-bg);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    vertical-align: middle;
    white-space: nowrap;
}
.pa-contact { margin: 4px 0 0; color: #222222; font-size: 14px; font-weight: 500; }
.pa-areas { margin: 6px 0 8px; color: var(--text-muted); font-size: 14px; }
.pa-areas strong { color: #222222; font-weight: 600; }
.pa-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pa-codes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pa-codes li {
    padding: 4px 10px;
    border-radius: var(--btn-radius);
    background: #eef3f9;
    border: 1px solid #dbe5f1;
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
}
.pa-social { display: flex; gap: 8px; }
.pa-social-link {
    width: 30px;
    height: 30px;
    border-radius: var(--btn-radius);
    background: #eef3f9;
    color: #333333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pa-social-link .pa-icon { width: 15px; height: 15px; }
.pa-social-link:hover { background: #dfe7f1; }

.pa-section-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pa-about { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }

.pa-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--btn-radius);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.pa-row .pa-btn { flex: 1 1 auto; padding: 11px 10px; font-size: 13.5px; white-space: nowrap; }
.pa-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.pa-btn:focus-visible,
.pa-social-link:focus-visible,
.pa-modal-close:focus-visible,
.pa-nav:focus-visible,
.pa-thumbs button:focus-visible { outline: 3px solid var(--menu-active-bg); outline-offset: 2px; }
.pa-btn--call { background: #3b82f6; color: #ffffff; }
.pa-btn--wa { background: #25d366; color: #ffffff; }
.pa-btn--outline { background: #ffffff; color: var(--navy); border-color: #cfd9e6; }
.pa-btn--dark { background: var(--navy); color: #ffffff; }
.pa-btn-count { padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.2); font-size: 12px; }
/* the example advert's contact buttons look like the real ones but go nowhere */
.pa-btn.is-disabled,
.pa-social-link.is-disabled { cursor: not-allowed; opacity: 0.55; }
.pa-btn.is-disabled:hover,
.pa-social-link.is-disabled:hover { transform: none; filter: none; }

.pa-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #eef2f7;
    font-size: 13px;
}
.pa-foot > :only-child { margin-left: auto; }
.pa-profile { font-weight: 700; color: var(--navy); text-decoration: none; }
.pa-profile:hover { text-decoration: underline; }

.pa-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--pa-icon) center / contain no-repeat;
    mask: var(--pa-icon) center / contain no-repeat;
}
.pa-icon--call { --pa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); }
.pa-icon--whatsapp { --pa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.8s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.7 1.2 1.5 1.9 1 .9 1.9 1.2 2.2 1.3.3.1.4.1.6-.1l.8-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.4.2.5.3.1.1.1.6-.1 1.2Z'/%3E%3C/svg%3E"); }
.pa-icon--email { --pa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.pa-icon--website { --pa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.pa-icon--prices { --pa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.pa-icon--gallery { --pa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E"); }
.pa-icon--location { --pa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.pa-icon--facebook { --pa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v8h4v-8h3l1-4h-4V8Z'/%3E%3C/svg%3E"); }
.pa-icon--instagram { --pa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black'/%3E%3C/svg%3E"); }

/* ---- pop-ups (Lesson prices, Gallery, Location): one at a time, appended to <body> */
.pa-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 10, 25, 0.82);
    font-family: 'Poppins', sans-serif;
    color: #222222;
    text-align: left;
}
.pa-modal-box {
    position: relative;
    width: 100%;
    max-width: 860px;
    max-height: 92vh;
    overflow: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.pa-modal-box--narrow { max-width: 520px; }
.pa-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.pa-modal-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.pa-modal-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--btn-radius);
    background: #eef3f9;
    color: #222222;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.pa-prices { list-style: none; margin: 0; padding: 0; border: 1px solid #e3e9f2; border-radius: 12px; overflow: hidden; }
.pa-prices li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 14px; overflow-wrap: anywhere; }
.pa-prices li + li { border-top: 1px solid #eef2f7; }
.pa-prices strong { color: #16a34a; white-space: nowrap; }
.pa-prices-note { margin: 10px 0 14px; font-size: 12.5px; color: var(--text-muted); }
.pa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.pa-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #0d1b2a; }
.pa-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pa-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: var(--btn-radius);
    background: rgba(255, 255, 255, 0.92);
    color: #111111;
    font-size: 22px;
    cursor: pointer;
}
.pa-nav--prev { left: 10px; }
.pa-nav--next { right: 10px; }
.pa-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: var(--btn-radius);
    background: rgba(0, 20, 40, 0.72);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}
.pa-caption { margin: 8px 0 10px; font-size: 13px; color: var(--text-muted); }
.pa-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pa-thumbs button {
    border: 2px solid transparent;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    background: #dfe7f1;
}
.pa-thumbs button[aria-current="true"] { border-color: var(--menu-active-bg); }
.pa-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pa-loc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px; align-items: start; }
.pa-address { margin: 0 0 14px; font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.pa-map { width: 100%; height: 320px; border: 0; border-radius: 12px; background: #dfe7f1; }

/* ---- Featured advert (renderAdvert variant 'featured', .pa-advert--featured): the Premium advert made smaller and
   lighter for the Featured panel - 64px logo, smaller name, brand-blue FEATURED badge, the description cut to 3 lines,
   compact buttons; no areas, licence codes or social links (the JS leaves them out). */
.placement-panel--featured.placement-panel--advert { padding: 18px 20px 16px; }
.pa-advert--featured + .pa-advert--featured { margin-top: 16px; padding-top: 16px; }
.pa-advert--featured .pa-head { gap: 14px; margin: 2px 0 10px; }
.pa-advert--featured .pa-logo { width: 64px; height: 64px; border-radius: 12px; font-size: 21px; box-shadow: 0 4px 12px rgba(0, 51, 102, 0.14); }
.pa-advert--featured .pa-name { font-size: 19px; font-weight: 700; }
.pa-badge--featured { background: var(--brand-blue); font-size: 10px; padding: 2px 8px; }
.pa-advert--featured .pa-about {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: #333333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.pa-advert--featured .pa-row { gap: 6px; margin-top: 0; }
.pa-advert--featured .pa-row .pa-btn { padding: 7px 9px; font-size: 12.5px; gap: 6px; }
.pa-advert--featured .pa-row .pa-icon { width: 15px; height: 15px; }
.pa-advert--featured .pa-btn-count { font-size: 11px; padding: 0 6px; }
.pa-advert--featured .pa-foot { margin-top: 12px; padding-top: 10px; font-size: 12.5px; }

/* An area's Featured listing (.area-featured, under each area heading, above its instructor box): the page-top
   Featured panel's look, a little tighter for a section. A slot without a panel is hidden (no featured instructor in
   the area on a province without the example). */
.area-featured { margin: 0 0 12px; }
.placement-panel--area.placement-panel--advert { padding: 14px 18px 14px; }
.placement-panel--area .placement-head { margin-bottom: 6px; }

@media (max-width: 760px) {
    .placement-panel.placement-panel--advert { padding: 18px 16px; }
    .pa-head { align-items: flex-start; }
    .pa-logo { width: 68px; height: 68px; font-size: 22px; border-radius: 12px; }
    /* the name and its badge as flex items: a badge that does not fit goes under the name, never glued to it */
    .pa-name { font-size: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
    .pa-badge { margin: 0; }
    .pa-loc { grid-template-columns: 1fr; }
    .pa-row .pa-btn { flex: 1 1 calc(50% - 4px); }
    .pa-map { height: 240px; }
    .pa-advert--featured .pa-logo { width: 52px; height: 52px; font-size: 18px; border-radius: 10px; }
    .pa-advert--featured .pa-name { font-size: 17px; }
}
@media (max-width: 600px) {
    /* the phone page column is narrow: a little less padding so the buttons still go in pairs */
    .placement-panel.placement-panel--advert { padding: 16px 12px; }
    .pa-row { gap: 6px; }
    .pa-row .pa-btn { flex-basis: calc(50% - 3px); gap: 6px; padding: 11px 6px; font-size: 13px; }
    .pa-row .pa-icon { width: 16px; height: 16px; }
    .placement-panel--featured.placement-panel--advert { padding: 14px 12px; }
    .pa-advert--featured .pa-row .pa-btn { padding: 8px 6px; font-size: 12.5px; }
    .pa-advert--featured .pa-row .pa-icon { width: 14px; height: 14px; }
}