/* WebNative Lessons — instructor grid, modals and the CF7 lesson form.
   Spacing is literal pixels per breakpoint. Colour comes from the Blocksy palette. */

.wnl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.wnl-card{background:var(--theme-palette-color-8,#fff);border:1px solid var(--theme-palette-color-5,#e5e5e5);display:flex;flex-direction:column}
.wnl-card__media{position:relative}
.wnl-card .wnl-card__media img{width:100%;height:320px;object-fit:cover;display:block}
.wnl-play{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--theme-palette-color-2,#D0451B);box-shadow:0 2px 10px rgba(0,0,0,.28);cursor:pointer;display:grid;place-items:center;transition:transform .2s ease,background .2s ease}
.wnl-play svg{width:17px;height:17px;fill:#fff;margin-left:2px}
.wnl-play:hover{transform:scale(1.08);background:#a83714}
.wnl-card__body{padding:20px;display:flex;flex-direction:column;flex:1}
.wnl-card__body h3{font-size:24px;margin:0;color:var(--theme-palette-color-1,#000)}
.wnl-card__instrument{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--theme-palette-color-2,#D0451B);font-weight:600;margin:6px 0 16px}
.wnl-card__bio{font-size:15px;color:var(--theme-palette-color-4,#707173);line-height:1.7}
.wnl-card__bio p{margin:0}
/* Source for the modal. [hidden] alone loses to theme rules that set display on div. */
.wnl-card__full,.wnl-card__full[hidden]{display:none!important}
/* With 7 instructors the last row holds one card. Centre it instead of leaving
   it hard left. These only match when exactly one card is orphaned, so adding
   an 8th instructor turns them off by itself. */
.wnl-card:last-child:nth-child(3n+1){grid-column:2}
.wnl-more{background:none;border:0;padding:0;margin-top:14px;align-self:flex-start;font:inherit;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--theme-palette-color-2,#D0451B);cursor:pointer;border-bottom:1px solid currentColor}

/* Dialogs */
.wnl-dialog{border:0;padding:0;background:var(--theme-palette-color-8,#fff);box-shadow:0 30px 70px rgba(0,0,0,.35);color:var(--theme-palette-color-3,#1a1919)}
.wnl-dialog::backdrop{background:rgba(0,0,0,.62)}
/* Do NOT set position here. A modal dialog is position:fixed by the UA stylesheet;
   overriding it drops the dialog into normal flow and the browser scrolls to it. */
.wnl-dialog--bio{width:min(940px,94vw)}
.wnl-dialog--video{width:min(880px,94vw)}
.wnl-dialog--form{width:min(640px,94vw)}
.wnl-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1px solid var(--theme-palette-color-5,#e5e5e5)}
.wnl-dialog__head h2{font-size:26px;margin:0;color:var(--theme-palette-color-1,#000)}
.wnl-dialog__body{padding:26px}
.wnl-x{background:none;border:0;width:44px;height:44px;display:grid;place-items:center;font-size:38px;line-height:1;color:var(--theme-palette-color-4,#707173);cursor:pointer;padding:0;flex:0 0 auto}
.wnl-x:hover{color:var(--theme-palette-color-1,#000)}
.wnl-x--float{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(0,0,0,.18);display:grid;place-items:center;font-size:34px;padding:0}
.wnl-x--float:hover{background:#fff}

.wnl-bio{display:grid;grid-template-columns:340px 1fr}
.wnl-bio__img{background:var(--theme-palette-color-6,#efeff0)}
.wnl-bio .wnl-bio__img img{width:100%;height:100%;min-height:460px;object-fit:cover;display:block}
.wnl-bio__text{padding:34px 36px;max-height:80vh;overflow-y:auto}
.wnl-bio__text h2{font-size:30px;margin:0;color:var(--theme-palette-color-1,#000)}
.wnl-bio__full{font-size:15px;color:var(--theme-palette-color-4,#707173);line-height:1.75;margin-top:6px}
.wnl-bio__full p{margin:0 0 14px}
.wnl-bio__full p:last-child{margin-bottom:0}

.wnl-video-slot video,.wnl-video-slot iframe{width:100%;display:block;border:0;background:#000}
.wnl-video-slot iframe{aspect-ratio:16/9}
.wnl-video-slot video{max-height:76vh}

.wnl-btn,.hms-submit input[type=submit]{display:inline-block;font:inherit;font-size:15px;font-weight:600;letter-spacing:.04em;padding:13px 28px;border:0;border-radius:0;background:var(--theme-palette-color-2,#D0451B);color:#fff;cursor:pointer;transition:background .18s ease}
.wnl-btn{margin-top:22px}
.wnl-btn:hover,.hms-submit input[type=submit]:hover{background:#a83714}
.wnl-dialog :focus-visible,.wnl-card :focus-visible{outline:3px solid var(--theme-palette-color-2,#D0451B);outline-offset:3px}

/* Contact Form 7 */
.hms-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hms-field{display:flex;flex-direction:column;margin:0}
.hms-field--full,.hms-submit{grid-column:1/-1;margin:0}
.hms-submit{text-align:center;margin-top:6px}
.hms-form-grid label{font-size:16px;font-weight:500;margin-bottom:6px;color:var(--theme-palette-color-3,#1a1919)}
.hms-req{color:var(--theme-palette-color-2,#D0451B)}
.hms-form-grid input[type=text],.hms-form-grid input[type=email],.hms-form-grid input[type=tel],.hms-form-grid select{font:inherit;font-size:16px;line-height:1.4;padding:12px 14px;border:1px solid #B1B1B1;border-radius:0;background-color:#fff;color:var(--theme-palette-color-3,#1a1919);width:100%;height:auto;min-height:48px;box-sizing:border-box}
/* Blocksy pins a height on selects, which crops the option text. Override it and
   draw our own arrow, since appearance:none removes the native one. */
.wnl-dialog .hms-form-grid select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:auto;min-height:48px;line-height:1.4;padding:12px 40px 12px 14px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23707173' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.wnl-dialog .hms-form-grid select::-ms-expand{display:none}
.hms-form-grid input:focus,.hms-form-grid select:focus{outline:2px solid var(--theme-palette-color-2,#D0451B);border-color:var(--theme-palette-color-2,#D0451B)}
.hms-form-grid .wpcf7-form-control-wrap{display:block}
.wnl-dialog .wpcf7-not-valid-tip{font-size:13px;margin-top:5px}
.wnl-dialog .wpcf7-response-output{grid-column:1/-1;margin:18px 0 0;font-size:14px;padding:12px 14px}

@media (max-width:1024px){
  .wnl-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .wnl-card .wnl-card__media img{height:300px}
  .wnl-play{right:12px;bottom:12px}
  .wnl-card:last-child:nth-child(3n+1){grid-column:auto}
  .wnl-card:last-child:nth-child(2n+1){grid-column:1/-1;justify-self:center;width:calc(50% - 12px)}
}
@media (max-width:767px){
  .wnl-grid{grid-template-columns:1fr;gap:18px}
  .wnl-play{right:12px;bottom:12px}
  .wnl-card:last-child{grid-column:auto;width:auto;justify-self:stretch}
  .wnl-card .wnl-card__media img{height:300px}
  .wnl-card__body{padding:20px}
  .wnl-card__body h3{font-size:22px}
  .wnl-bio{grid-template-columns:1fr}
  .wnl-bio .wnl-bio__img img{min-height:0;height:230px;object-position:center 25%}
  .wnl-bio__text{padding:24px 22px;max-height:56vh}
  .wnl-bio__text h2{font-size:24px}
  .wnl-dialog__head{padding:16px 18px}
  .wnl-dialog__body{padding:18px}
  .hms-form-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .wnl-play,.wnl-btn,.hms-submit input[type=submit]{transition:none}
}
/* Background scroll lock while a modal is open. */
html.wnl-locked{overflow:hidden}

/* Textarea, radios and the inline (non-popup) form */
.hms-form-grid textarea{font:inherit;font-size:16px;line-height:1.5;padding:12px 14px;border:1px solid #B1B1B1;border-radius:0;background-color:#fff;color:var(--theme-palette-color-3,#1a1919);width:100%;box-sizing:border-box;resize:vertical}
.hms-form-grid textarea:focus{outline:2px solid var(--theme-palette-color-2,#D0451B);border-color:var(--theme-palette-color-2,#D0451B)}
.hms-radios{border:0;padding:0;margin:0;min-width:0}
.hms-radios legend{font-size:16px;font-weight:500;margin-bottom:6px;padding:0;color:var(--theme-palette-color-3,#1a1919)}
.hms-radios .wpcf7-list-item{display:inline-flex;align-items:center;margin:0 22px 0 0}
.hms-radios .wpcf7-list-item-label{margin-left:7px;font-size:16px}
.hms-radios input[type=radio]{width:18px;height:18px;accent-color:var(--theme-palette-color-2,#D0451B)}
.hms-inline-form .hms-form-grid{max-width:720px}
.hms-inline-form .hms-submit{text-align:left}
.hms-inline-form .wpcf7-response-output{margin:18px 0 0;font-size:14px;padding:12px 14px}