/* Procedure Areas V1: scoped five-card layout. */
#procedures.procedure-areas-v1 .procedure-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
#procedures.procedure-areas-v1 .procedure-card{grid-column:span 2;min-width:0;min-height:270px;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
#procedures.procedure-areas-v1 .procedure-card:nth-child(n+4){grid-column:span 3}
#procedures.procedure-areas-v1 .procedure-card h3{margin-top:0}
#procedures.procedure-areas-v1 .procedure-card:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

/* Eye & Brow — clinical concern image, pulled from the uploaded repository asset. */
#procedures.procedure-areas-v1 .procedure-card:first-child{
 position:relative;
 overflow:hidden;
 background-color:#fff;
 background-image:
  linear-gradient(90deg,
   #fff 0%,
   #fff 48%,
   rgba(255,255,255,.98) 56%,
   rgba(255,255,255,.86) 66%,
   rgba(255,255,255,.40) 80%,
   rgba(255,255,255,.08) 100%),
  url('/assets/images/procedures/eye-brow-card.jpeg');
 background-repeat:no-repeat;
 background-position:center,right 46%;
 background-size:100% 100%,auto 112%;
}
#procedures.procedure-areas-v1 .procedure-card:first-child > *{
 position:relative;
 z-index:1;
 max-width:72%;
}

/* Rhinoplasty — same visual pattern as Eye & Brow: image on the right with a white readability fade. */
#procedures.procedure-areas-v1 .procedure-card:nth-child(2){
 position:relative;
 overflow:hidden;
 background-color:#fff;
 background-image:
  linear-gradient(90deg,
   #fff 0%,
   #fff 48%,
   rgba(255,255,255,.98) 56%,
   rgba(255,255,255,.86) 66%,
   rgba(255,255,255,.40) 80%,
   rgba(255,255,255,.08) 100%),
  url('/assets/images/procedures/rhino-card.jpeg');
 background-repeat:no-repeat;
 background-position:center,right 46%;
 background-size:100% 100%,auto 112%;
}
#procedures.procedure-areas-v1 .procedure-card:nth-child(2) > *{
 position:relative;
 z-index:1;
 max-width:72%;
}

/* Face & Neck — same visual pattern: image on the right with a white readability fade. */
#procedures.procedure-areas-v1 .procedure-card:nth-child(3){
 position:relative;
 overflow:hidden;
 background-color:#fff;
 background-image:
  linear-gradient(90deg,
   #fff 0%,
   #fff 48%,
   rgba(255,255,255,.98) 56%,
   rgba(255,255,255,.86) 66%,
   rgba(255,255,255,.40) 80%,
   rgba(255,255,255,.08) 100%),
  url('/assets/images/procedures/face-neck-card.jpeg');
 background-repeat:no-repeat;
 background-position:center,right 46%;
 background-size:100% 100%,auto 112%;
}
#procedures.procedure-areas-v1 .procedure-card:nth-child(3) > *{
 position:relative;
 z-index:1;
 max-width:72%;
}

/* Breast & Body — image on the right with a slightly stronger white fade into the chest for tablet/desktop readability and balance. */
#procedures.procedure-areas-v1 .procedure-card:nth-child(4){
 position:relative;
 overflow:hidden;
 background-color:#fff;
 background-image:
  linear-gradient(90deg,
   #fff 0%,
   #fff 52%,
   rgba(255,255,255,.99) 60%,
   rgba(255,255,255,.92) 70%,
   rgba(255,255,255,.64) 82%,
   rgba(255,255,255,.28) 92%,
   rgba(255,255,255,.08) 100%),
  url('/assets/images/procedures/Breast-Body.jpeg');
 background-repeat:no-repeat;
 background-position:center,right 46%;
 background-size:100% 100%,auto 112%;
}
#procedures.procedure-areas-v1 .procedure-card:nth-child(4) > *{
 position:relative;
 z-index:1;
 max-width:72%;
}

/* Reconstructive Surgery — same visual pattern: image on the right with a white readability fade. */
#procedures.procedure-areas-v1 .procedure-card:nth-child(5){
 position:relative;
 overflow:hidden;
 background-color:#fff;
 background-image:
  linear-gradient(90deg,
   #fff 0%,
   #fff 48%,
   rgba(255,255,255,.98) 56%,
   rgba(255,255,255,.86) 66%,
   rgba(255,255,255,.40) 80%,
   rgba(255,255,255,.08) 100%),
  url('/assets/images/procedures/reconstructive-card.jpg');
 background-repeat:no-repeat;
 background-position:center,right 46%;
 background-size:100% 100%,auto 112%;
}
#procedures.procedure-areas-v1 .procedure-card:nth-child(5) > *{
 position:relative;
 z-index:1;
 max-width:72%;
}

/* Tablet / iPad landscape: switch to two columns so the fifth card can span a full row cleanly. */
@media(max-width:1366px){
 #procedures.procedure-areas-v1 .procedure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #procedures.procedure-areas-v1 .procedure-card,#procedures.procedure-areas-v1 .procedure-card:nth-child(n+4){grid-column:auto;min-height:250px}
 #procedures.procedure-areas-v1 .procedure-card:last-child:nth-child(odd){grid-column:1/-1}
 #procedures.procedure-areas-v1 .procedure-card:first-child,
 #procedures.procedure-areas-v1 .procedure-card:nth-child(2),
 #procedures.procedure-areas-v1 .procedure-card:nth-child(3),
 #procedures.procedure-areas-v1 .procedure-card:nth-child(4){
  background-position:center,right 46%;
  background-size:100% 100%,auto 108%;
 }

 /* Reconstructive: use the same two-layer card background model as the other cards.
    This removes the separate ::after image layer that created a grey/compositing band at narrow desktop widths. */
 #procedures.procedure-areas-v1 .procedure-card:nth-child(5){
  background-color:#fff;
  background-image:
   linear-gradient(90deg,
    #fff 0%,
    #fff 52%,
    rgba(255,255,255,.98) 60%,
    rgba(255,255,255,.86) 70%,
    rgba(255,255,255,.46) 84%,
    rgba(255,255,255,.10) 100%),
   url('/assets/images/procedures/reconstructive-card.jpg');
  background-repeat:no-repeat;
  background-position:center,right 46%;
  background-size:100% 100%,auto 108%;
 }
 #procedures.procedure-areas-v1 .procedure-card:nth-child(5)::after{display:none}
}
@media(max-width:640px){
 #procedures.procedure-areas-v1 .procedure-grid{grid-template-columns:minmax(0,1fr)}
 #procedures.procedure-areas-v1 .procedure-card,#procedures.procedure-areas-v1 .procedure-card:nth-child(n+4),#procedures.procedure-areas-v1 .procedure-card:last-child:nth-child(odd){grid-column:1;min-height:210px;padding:24px}
 #procedures.procedure-areas-v1 .procedure-card:first-child{
  background-image:
   linear-gradient(90deg,
    #fff 0%,
    #fff 52%,
    rgba(255,255,255,.98) 63%,
    rgba(255,255,255,.72) 78%,
    rgba(255,255,255,.18) 100%),
   url('/assets/images/procedures/eye-brow-card.jpeg');
  background-position:center,right 46%;
  background-size:100% 100%,auto 106%;
 }
 #procedures.procedure-areas-v1 .procedure-card:nth-child(2){
  background-image:
   linear-gradient(90deg,
    #fff 0%,
    #fff 52%,
    rgba(255,255,255,.98) 63%,
    rgba(255,255,255,.72) 78%,
    rgba(255,255,255,.18) 100%),
   url('/assets/images/procedures/rhino-card.jpeg');
  background-position:center,right 46%;
  background-size:100% 100%,auto 106%;
 }
 #procedures.procedure-areas-v1 .procedure-card:nth-child(3){
  background-image:
   linear-gradient(90deg,
    #fff 0%,
    #fff 52%,
    rgba(255,255,255,.98) 63%,
    rgba(255,255,255,.72) 78%,
    rgba(255,255,255,.18) 100%),
   url('/assets/images/procedures/face-neck-card.jpeg');
  background-position:center,right 46%;
  background-size:100% 100%,auto 106%;
 }
 #procedures.procedure-areas-v1 .procedure-card:nth-child(4){
  background-image:
   linear-gradient(90deg,
    #fff 0%,
    #fff 52%,
    rgba(255,255,255,.98) 63%,
    rgba(255,255,255,.72) 78%,
    rgba(255,255,255,.18) 100%),
   url('/assets/images/procedures/Breast-Body.jpeg');
  background-position:center,right 46%;
  background-size:100% 100%,auto 106%;
 }
 #procedures.procedure-areas-v1 .procedure-card:nth-child(5){
  background-image:
   linear-gradient(90deg,
    #fff 0%,
    #fff 60%,
    rgba(255,255,255,.99) 68%,
    rgba(255,255,255,.90) 76%,
    rgba(255,255,255,.58) 88%,
    rgba(255,255,255,.16) 100%),
   url('/assets/images/procedures/reconstructive-card.jpg');
  background-position:center,right 46%;
  background-size:100% 100%,auto 106%;
 }
 #procedures.procedure-areas-v1 .procedure-card:nth-child(5)::after{display:none}
 #procedures.procedure-areas-v1 .procedure-card:first-child > *,
 #procedures.procedure-areas-v1 .procedure-card:nth-child(2) > *,
 #procedures.procedure-areas-v1 .procedure-card:nth-child(3) > *,
 #procedures.procedure-areas-v1 .procedure-card:nth-child(4) > *,
 #procedures.procedure-areas-v1 .procedure-card:nth-child(5) > *{max-width:76%}
}
@media(prefers-reduced-motion:reduce){#procedures.procedure-areas-v1 .procedure-card{transition:none}}