/* DPM Diving Locations — instructor cards.
 *
 * Split out of location.css so the same markup can be reused outside the
 * location landing (the `dpm/team-grid` block of the seowolf-dpm theme enqueues
 * this very handle). Every token has an inline fallback with the exact value it
 * has in location.css: inside `.dpmloc` the inherited token wins and nothing
 * changes; standalone the fallback keeps the cards on brand. The two font
 * tokens fall back to `inherit` so the host theme's typography is respected.
 */

/* Instructors */
.dpmloc-instructors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dpmloc-instructor { text-align: left; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.dpmloc-instructor-photo { overflow: hidden; border-radius: 28px; }
.dpmloc-instructor-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.dpmloc-instructor-meta { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.dpmloc-instructor-name { font-family: var(--f-display, inherit); font-weight: 700; font-size: 18px; margin-top: 4px; }
.dpmloc-instructor-cert { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--c-ink, #102a3a); font-weight: 600; margin-top: 2px; flex-wrap: wrap; }
.dpmloc-agency-chip { display: inline-block; background: var(--c-brand, #169cdc); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: 4px; font-family: var(--f-sans, inherit); white-space: nowrap; }
.dpmloc-instructor-id { font-size: 11.5px; font-weight: 600; color: var(--c-mute, #6a8294); letter-spacing: .02em; margin-top: 1px; }
.dpmloc-instructor-stats { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-ink-soft, #3a5161); margin-top: 8px; }
.dpmloc-instructor-stats strong { font-family: var(--f-display, inherit); font-weight: 700; color: var(--c-ink, #102a3a); margin-right: 2px; }
.dpmloc-langs { display: flex; gap: 5px; margin-top: 10px; }
.dpmloc-lang-flag { width: 26px; height: 17px; border-radius: 3px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Responsive — tablet ≤ 980px (aligned with location.css) */
@media (max-width: 980px) {
	.dpmloc-instructors { grid-template-columns: repeat(2, 1fr); }
}

/* Responsive — mobile ≤ 767px */
@media (max-width: 767px) {
	.dpmloc-instructors { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.dpmloc-instructor-photo { border-radius: 18px; }
	.dpmloc-instructor-name { font-size: 16px; }
}

/* 0.10.0: la foto y el nombre enlazan al perfil del instructor (/author/<slug>/). */
a.dpmloc-instructor-photo { display: block; }
.dpmloc-instructor-name a { color: inherit; text-decoration: none; }
.dpmloc-instructor-name a:hover, .dpmloc-instructor-name a:focus-visible { color: var(--c-brand, #169cdc); }