.walker-detail-card-set{
position: relative;
width: 100%;
}
.walker-detail-card-set__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
align-items: start;
}
.walker-detail-card{
grid-column: span 1;
position: relative;
min-width: 0;
transform-origin: top left;
backface-visibility: hidden;
--wdc-accent: var(--wstd-teal, #00A5B1);
--wdc-card-bg: rgba(255,255,255,0.95);
--wdc-card-open-bg: rgba(255,255,255,0.985);
--wdc-card-border: rgba(17,24,39,0.07);
--wdc-card-shadow: 0 18px 46px rgba(15,23,42,0.08);
--wdc-card-open-shadow: 0 26px 62px rgba(15,23,42,0.12);
--wdc-heading-color: #13233c;
--wdc-body-color: #516173;
--wdc-teaser-color: #556579;
--wdc-eyebrow-color: var(--wdc-accent);
--wdc-media-bg: #eceff2;
--wdc-body-border: rgba(17,24,39,0.08);
--wdc-toggle-color: #142138;
--wdc-toggle-hover-color: var(--wdc-accent);
--wdc-toggle-hover-bg: rgba(0,0,0,0.03);
--wdc-link-color: var(--wdc-accent);
--wdc-table-border: rgba(17,24,39,0.10);
--wdc-button-bg: var(--wdc-accent);
--wdc-button-color: #ffffff;
--wdc-button-hover-bg: var(--wdc-button-bg);
--wdc-button-hover-color: var(--wdc-button-color);
}
.walker-detail-card--theme-dark{
--wdc-accent: #18a8b5;
--wdc-card-bg: rgba(15,27,34,0.96);
--wdc-card-open-bg: rgba(15,27,34,0.99);
--wdc-card-border: rgba(255,255,255,0.12);
--wdc-card-shadow: 0 20px 54px rgba(0,0,0,0.18);
--wdc-card-open-shadow: 0 28px 70px rgba(0,0,0,0.26);
--wdc-heading-color: #ffffff;
--wdc-body-color: rgba(255,255,255,0.78);
--wdc-teaser-color: rgba(255,255,255,0.72);
--wdc-eyebrow-color: #B7A36A;
--wdc-media-bg: #101f27;
--wdc-body-border: rgba(255,255,255,0.12);
--wdc-toggle-color: rgba(255,255,255,0.86);
--wdc-toggle-hover-color: #ffffff;
--wdc-toggle-hover-bg: rgba(255,255,255,0.08);
--wdc-link-color: #62d8df;
--wdc-table-border: rgba(255,255,255,0.14);
--wdc-button-bg: #18a8b5;
--wdc-button-color: #ffffff;
--wdc-button-hover-bg: #B7A36A;
--wdc-button-hover-color: #0f1b22;
}
.walker-detail-card.is-shell-open{
grid-column: 1 / -1;
}
.walker-detail-card.is-flip-animating{
z-index: 20;
}
.walker-detail-card__inner{
position: relative;
border-radius: 34px;
background: var(--wdc-card-bg);
border: 1px solid var(--wdc-card-border);
box-shadow: var(--wdc-card-shadow);
overflow: hidden;
transition:
border-radius 0.34s ease,
box-shadow 0.34s ease,
background 0.34s ease;
}
.walker-detail-card.is-shell-open .walker-detail-card__inner{
background: var(--wdc-card-open-bg);
box-shadow: var(--wdc-card-open-shadow);
}
.walker-detail-card__shell{
position: relative;
display: block;
cursor: pointer;
outline: none;
}
.walker-detail-card__shell:focus-visible{
box-shadow: inset 0 0 0 2px var(--wdc-accent);
}
.walker-detail-card__surface{
position: relative;
min-height: 292px;
transition: min-height 0.32s ease;
}
.walker-detail-card.is-shell-open .walker-detail-card__surface{
min-height: 120px;
}
.walker-detail-card__closed,
.walker-detail-card__open-header{
position: absolute;
inset: 0;
transition:
opacity 0.20s ease,
transform 0.22s ease,
visibility 0.20s ease;
}
.walker-detail-card__closed{
display: grid;
grid-template-columns: minmax(230px, 42%) minmax(0, 1fr);
align-items: stretch;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
}
.walker-detail-card--image-right .walker-detail-card__closed{
grid-template-columns: minmax(0, 1fr) minmax(230px, 42%);
}
.walker-detail-card.is-closed-visible .walker-detail-card__closed{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.walker-detail-card__closed-media-wrap{
position: relative;
min-width: 0;
}
.walker-detail-card__closed-media{
position: relative;
width: 100%;
height: 100%;
min-height: 292px;
background: var(--wdc-media-bg);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.walker-detail-card--image-left .walker-detail-card__closed-media-wrap{
order: 1;
}
.walker-detail-card--image-left .walker-detail-card__closed-content{
order: 2;
}
.walker-detail-card--image-right .walker-detail-card__closed-media-wrap{
order: 2;
}
.walker-detail-card--image-right .walker-detail-card__closed-content{
order: 1;
}
.walker-detail-card--image-left .walker-detail-card__closed-media{
border-radius: 34px 0 0 34px;
}
.walker-detail-card--image-right .walker-detail-card__closed-media{
border-radius: 0 34px 34px 0;
}
.walker-detail-card__img{
display: block;
width: 100%;
height: 100%;
}
.walker-detail-card--closed-image-contain .walker-detail-card__closed-media .walker-detail-card__img{
object-fit: contain;
object-position: center center;
background: var(--wdc-media-bg);
}
.walker-detail-card--closed-image-cover .walker-detail-card__closed-media .walker-detail-card__img{
object-fit: cover;
object-position: center center;
background: var(--wdc-media-bg);
}
.walker-detail-card__closed-content{
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 22px 76px 22px 22px;
min-width: 0;
}
.walker-detail-card--image-right .walker-detail-card__closed-content{
padding: 22px 22px 22px 76px;
}
.walker-detail-card__eyebrow{
margin: 0 0 10px;
font-size: 0.76rem;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--wdc-eyebrow-color);
} .walker-detail-card__closed .walker-detail-card__eyebrow{
display: none;
}
.walker-detail-card__title{
margin: 0;
color: var(--wdc-heading-color);
text-wrap: balance;
} .walker-detail-card__closed .walker-detail-card__title{
font-size: 1.3rem;
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
max-width: 30ch;
}
.walker-detail-card__teaser{
margin-top: 12px;
color: var(--wdc-teaser-color);
max-width: 60ch;
}
.walker-detail-card__closed .walker-detail-card__teaser{
font-size: 0.9rem;
line-height: 1.45;
opacity: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 8;
-webkit-box-orient: vertical;
}
.walker-detail-card__teaser p{
margin: 0;
}
.walker-detail-card__open-header{
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
align-items: center;
padding: 16px 72px 16px 16px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
}
.walker-detail-card.is-open-visible .walker-detail-card__open-header{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.walker-detail-card__open-media-wrap{
position: relative;
}
.walker-detail-card__open-media{
width: 110px;
height: 88px;
border-radius: 20px;
overflow: hidden;
background: var(--wdc-media-bg);
display: flex;
align-items: center;
justify-content: center;
}
.walker-detail-card__open-media .walker-detail-card__img{
object-fit: contain;
object-position: center center;
background: var(--wdc-media-bg);
}
.walker-detail-card__open-content{
min-width: 0;
padding-left: 16px;
} .walker-detail-card__open-title{
margin: 0;
font-size: 1.2rem;
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--wdc-heading-color);
text-wrap: balance;
max-width: 28ch;
}
.walker-detail-card__eyebrow--open{
margin-bottom: 8px;
}
.walker-detail-card__toggle{
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--wdc-toggle-color);
cursor: pointer;
transition:
transform 0.22s ease,
color 0.22s ease,
background 0.22s ease;
}
.walker-detail-card__toggle:hover,
.walker-detail-card__toggle:focus-visible{
color: var(--wdc-toggle-hover-color);
background: var(--wdc-toggle-hover-bg);
outline: none;
}
.walker-detail-card.is-shell-open .walker-detail-card__toggle{
transform: translateY(-50%) rotate(180deg);
}
.walker-detail-card__toggle-icon{
display: inline-flex;
width: 24px;
height: 24px;
}
.walker-detail-card__toggle-icon svg{
display: block;
width: 100%;
height: 100%;
}
.walker-detail-card__body{
height: 0;
overflow: hidden;
opacity: 0;
transition:
height 0.46s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.24s ease;
}
.walker-detail-card.is-body-open .walker-detail-card__body{
opacity: 1;
}
.walker-detail-card__body-inner{
padding: 30px 38px 38px;
border-top: 1px solid var(--wdc-body-border);
color: var(--wdc-body-color);
font-size: 1rem;
line-height: 1.78;
}
.walker-detail-card__body-inner > *:first-child{
margin-top: 0;
}
.walker-detail-card__body-inner > *:last-child{
margin-bottom: 0;
}
.walker-detail-card__body-inner h1,
.walker-detail-card__body-inner h2,
.walker-detail-card__body-inner h3,
.walker-detail-card__body-inner h4,
.walker-detail-card__body-inner h5,
.walker-detail-card__body-inner h6{
color: var(--wdc-heading-color);
line-height: 1.08;
letter-spacing: -0.028em;
margin: 1.35em 0 0.55em;
max-width: 26ch;
}
.walker-detail-card__body-inner p,
.walker-detail-card__body-inner ul,
.walker-detail-card__body-inner ol,
.walker-detail-card__body-inner blockquote,
.walker-detail-card__body-inner table{
max-width: 74ch;
}
.walker-detail-card__body-inner p{
margin: 0 0 1.08em;
}
.walker-detail-card__teaser .pix-el-text,
.walker-detail-card__body-inner .pix-el-text{
font-family: inherit;
}
.walker-detail-card__body-inner ul,
.walker-detail-card__body-inner ol{
margin: 0 0 1.2em 1.2em;
padding: 0;
}
.walker-detail-card__body-inner li{
margin: 0 0 0.42em;
}
.walker-detail-card__body-inner a{
color: var(--wdc-link-color);
text-decoration: underline;
text-underline-offset: 2px;
}
.walker-detail-card__body-inner img{
display: block;
max-width: 100%;
height: auto;
border-radius: 18px;
margin: 1.2em 0;
}
.walker-detail-card__body-inner iframe,
.walker-detail-card__body-inner video,
.walker-detail-card__body-inner embed,
.walker-detail-card__body-inner object{
display: block;
max-width: 100%;
width: 100%;
border: 0;
border-radius: 18px;
margin: 1.2em 0;
}
.walker-detail-card__body-inner table{
width: 100%;
border-collapse: collapse;
margin: 1.2em 0;
}
.walker-detail-card__body-inner th,
.walker-detail-card__body-inner td{
padding: 12px 14px;
border: 1px solid var(--wdc-table-border);
text-align: left;
vertical-align: top;
}
.walker-detail-card__cta-wrap{
margin-top: 24px;
}
.walker-detail-card__cta{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 18px;
border-radius: 999px;
background: var(--wdc-button-bg);
color: var(--wdc-button-color) !important;
font-weight: 700;
text-decoration: none;
transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.walker-detail-card__cta:hover,
.walker-detail-card__cta:focus-visible{
transform: translateY(-1px);
background: var(--wdc-button-hover-bg);
color: var(--wdc-button-hover-color) !important;
opacity: 0.96;
outline: none;
}
@media (max-width: 1180px){
.walker-detail-card-set__grid{
gap: 24px;
}
.walker-detail-card__surface{
min-height: 272px;
}
.walker-detail-card__closed{
grid-template-columns: minmax(210px, 41%) minmax(0, 1fr);
}
.walker-detail-card--image-right .walker-detail-card__closed{
grid-template-columns: minmax(0, 1fr) minmax(210px, 41%);
}
.walker-detail-card__closed-media{
min-height: 272px;
}
.walker-detail-card__closed-content{
padding: 20px 68px 20px 20px;
}
.walker-detail-card--image-right .walker-detail-card__closed-content{
padding: 20px 20px 20px 68px;
}
}
@media (max-width: 991px){
.walker-detail-card-set__grid{
grid-template-columns: 1fr;
}
.walker-detail-card,
.walker-detail-card.is-shell-open{
grid-column: 1;
}
}
@media (max-width: 767px){
.walker-detail-card__surface{
min-height: 220px;
}
.walker-detail-card.is-shell-open .walker-detail-card__surface{
min-height: 106px;
}
.walker-detail-card__closed,
.walker-detail-card--image-right .walker-detail-card__closed{
grid-template-columns: 150px minmax(0, 1fr);
}
.walker-detail-card__closed-media{
min-height: 220px;
}
.walker-detail-card--image-left .walker-detail-card__closed-media-wrap,
.walker-detail-card--image-right .walker-detail-card__closed-media-wrap{
order: 1;
}
.walker-detail-card--image-left .walker-detail-card__closed-content,
.walker-detail-card--image-right .walker-detail-card__closed-content{
order: 2;
padding: 18px 56px 18px 18px;
}
.walker-detail-card--image-left .walker-detail-card__closed-media,
.walker-detail-card--image-right .walker-detail-card__closed-media{
border-radius: 28px 0 0 28px;
}
.walker-detail-card__closed .walker-detail-card__title{
font-size: 0.98rem;
max-width: none;
}
.walker-detail-card__closed .walker-detail-card__teaser{
font-size: 0.88rem;
line-height: 1.42;
-webkit-line-clamp: 6;
max-width: 34ch;
}
.walker-detail-card__toggle{
right: 14px;
width: 42px;
height: 42px;
}
.walker-detail-card__open-header{
grid-template-columns: 92px minmax(0, 1fr);
padding: 14px 56px 14px 14px;
}
.walker-detail-card__open-media{
width: 92px;
height: 74px;
border-radius: 18px;
}
.walker-detail-card__open-content{
padding-left: 14px;
}
.walker-detail-card__open-title{
font-size: 1.12rem;
max-width: none;
}
.walker-detail-card__body-inner{
padding: 22px 22px 26px;
}
}
@media (max-width: 560px){
.walker-detail-card__surface{
min-height: 172px;
}
.walker-detail-card.is-shell-open .walker-detail-card__surface{
min-height: 92px;
}
.walker-detail-card__closed,
.walker-detail-card--image-right .walker-detail-card__closed{
grid-template-columns: 112px minmax(0, 1fr);
}
.walker-detail-card__closed-media{
min-height: 172px;
}
.walker-detail-card__closed-content{
padding: 14px 50px 14px 14px;
}
.walker-detail-card__closed .walker-detail-card__title{
font-size: 0.95rem;
line-height: 1.14;
}
.walker-detail-card__closed .walker-detail-card__teaser{
display: none;
}
.walker-detail-card__open-header{
grid-template-columns: 74px minmax(0, 1fr);
padding: 12px 48px 12px 12px;
}
.walker-detail-card__open-media{
width: 74px;
height: 60px;
border-radius: 16px;
}
.walker-detail-card__open-content{
padding-left: 12px;
}
.walker-detail-card__open-title{
font-size: 1.05rem;
line-height: 1.12;
}
.walker-detail-card__body-inner{
padding: 20px 18px 22px;
}
}
@media (prefers-reduced-motion: reduce){
.walker-detail-card,
.walker-detail-card__inner,
.walker-detail-card__surface,
.walker-detail-card__closed,
.walker-detail-card__open-header,
.walker-detail-card__body,
.walker-detail-card__toggle{
transition: none !important;
animation: none !important;
}
}