/* Radiologist profile (Figma 449:1367) */

.profile { padding-bottom: 292px; }

.breadcrumb { display: flex; align-items: center; gap: 16px; margin-top: 57px; font-size: 14px; line-height: 1.3; color: var(--ink-soft); }
.breadcrumb a { opacity: 0.8; }
.breadcrumb a:hover { opacity: 1; }

.profile__hero { display: flex; gap: 64px; margin-top: 58px; }
.profile__photo { flex: 1; min-width: 0; height: 604px; border-radius: var(--radius-card); background: var(--green-100); overflow: hidden; }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile__intro { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; width: 760px; }

.tags { display: flex; flex-wrap: wrap; gap: 16px; }
.tags a { display: block; padding: 8px 16px; border-radius: 32px; background: var(--green-100); color: var(--green-900); font-size: 14px; line-height: 1.3; }
.tags a:hover { background: var(--green-200); }

.profile__text { display: flex; flex-direction: column; gap: 32px; }
.profile__summary { max-width: 538px; font-size: 20px; line-height: 1.3; color: var(--ink-soft); }
.profile__experience { font-size: 16px; line-height: 1.3; color: var(--ink-soft); }
.profile__experience strong { margin-left: 10px; font-weight: 600; }
.profile__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.profile__actions .btn__icon img { width: 16.36px; height: 16.36px; }

/* Accordions use native <details>/<summary>: open/close works with no JavaScript. */
.profile__details { display: flex; flex-direction: column; gap: 32px; width: 757px; max-width: 100%; margin: 174px 0 0 auto; }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgb(from var(--green-975) r g b / 0.5);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion h2 { font-size: 32px; line-height: 1.2; font-weight: 400; color: var(--ink); text-box: trim-both cap alphabetic; }
.accordion__icon { transition: rotate 0.5s var(--ease-in-out); }
.accordion[open]:not(.is-closing) .accordion__icon { rotate: 180deg; }
.accordion__body { margin-top: 24px; font-size: 20px; line-height: 1.3; color: var(--ink-soft); }
.accordion__body p + p { margin-top: 1.3em; }
.accordion__body li + li { margin-top: 8px; }
.accordion__body a { text-decoration: underline; text-underline-offset: 3px; }

.profile__section { margin-top: 192px; }
.profile__section + .profile__section { margin-top: 212px; }

/* Fixed column counts: auto-fill sizes columns by their max width, which drops to 2 columns just below 1440px. */
.location-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.location-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 262px; }
.location-card__head { display: flex; justify-content: space-between; gap: 8px; }
.location-card__head > div { display: flex; flex-direction: column; gap: 12px; max-width: 302px; }
.location-card__name { font-size: 26px; line-height: normal; font-weight: 400; }
.location-card__address, .location-card__contact { font-size: 16px; line-height: 1.4; }
.location-card__contact a:hover { text-decoration: underline; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.doctor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; padding-left: 2px; }
.doctor-card { position: relative; display: flex; flex-direction: column; gap: 4px; color: var(--green-975); }
.doctor-card__link { display: flex; flex-direction: column; gap: 8px; }
.doctor-card__link::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */
.doctor-card:hover { border-color: var(--green-600); }
.doctor-card__avatar { flex-shrink: 0; width: 55px; height: 55px; border-radius: 50%; object-fit: cover; } /* never squashed by a long name */
.doctor-card__name { font-size: 28px; line-height: normal; }
.doctor-card__role { font-size: 16px; line-height: 1.4; }
.doctor-card__exp { position: absolute; top: 13px; right: 24px; padding: 4px 8px; border-radius: 32px; background: var(--green-100); font-size: 14px; line-height: 1.4; }
.doctor-card__location { display: flex; align-items: flex-start; gap: 4px; margin-top: 28px; opacity: 0.8; font-size: 16px; line-height: 1.4; }

.not-found { padding-block: 120px 200px; }
.not-found p { margin-top: 24px; text-decoration: underline; }

@media (max-width: 1100px) {
  .profile__hero { flex-direction: column; gap: 32px; }
  .profile__photo { height: 420px; flex: none; }
  .profile__intro { width: auto; }
  .profile__details { width: auto; margin-top: 96px; }
  .profile__section, .profile__section + .profile__section { margin-top: 96px; }
  .profile { padding-bottom: 120px; }
  .location-grid, .doctor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .location-grid, .doctor-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
}