/* Object Radar

   style_usecase.css
    │
    ├── usecase-eyebrow
    │
    ├── usecase-eyebrow-icon
    │
    ├── usecase-intro
    │
    ├── usecase-intro-icon
    │
    ├── usecase-intro h1
    │
    ├── usecase-intro .lead
    │
    ├── usecase-compatible-trackers (or usecase-compatible--devices)
    │   └── usecase-compatible-tracker (or usecase-compatible--device)
    │       ├── usecase-compatible-tracker-header (or usecase-compatible-device-header)
    │       │   ├── usecase-compatible-tracker-name (or usecase-compatible-device-name)
    │       │   └── official-source + usecase-compatible-tracker-link (or usecase-compatible-device-link)
    │       │    
    │       └── usecase-compatible-tracker-models (or usecase-compatible-device-models)
    │           └── usecase-compatible-tracker-model (or usecase-compatible-device-model)
    │               └── usecase-compatible-tracker-status (or usecase-compatible-device-status)
    │
    ├── usecase-topic   
    │
    ├── usecase-steps
    │
    ├── usecase-step
    │   ├── number
    │   ├── icon
    │   ├── title
    │   ├── lead
    │   ├── content
    │   ├── note (tip, validate, warning)
    │   └── screenshot
    │         └── image
    │
    ├── usecase-limitations
    │
    ├── usecase-cta (only if necessary)
    │
    └── responsive usecase

*/

/* =========================================================
   USE CASE PAGES
   ========================================================= */
.usecase-eyebrow {
    display: flex; /* fill the parent container and allows space between the title and icon (see justify-content) */
    align-items: first baseline;
    justify-content: space-between; /* title one the left and icon on the right */
    gap: 10px;
}

.usecase-eyebrow-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* ============================================================
   Use case introduction
   ============================================================ */
/*.usecase-intro {
    max-width: 760px;
    margin-inline: auto;
}

.usecase-intro p {
    margin-bottom: 1rem;
}

.usecase-intro h1 {
    margin-bottom: 22px;
    font-size: clamp(2.1rem,5vw,4.3rem);
    line-height: 1;
    letter-spacing: -.055em;
}*/

/* ============================================================
SECTION: USE CASE INTRODUCTION
============================================================ */
.usecase-intro {
    text-align: center;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(79,140,255,.20) 0,
            rgba(79,140,255,.10) 20%,
            rgba(79,140,255,.035) 43%,
            transparent 68%),
        var(--blue-soft);
        
}

.usecase-intro-icon {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 32px auto 0;
}

.usecase-intro .section-inner {
    max-width: 860px;
    margin-inline: auto;
}

.usecase-intro h1 {
    max-width: 760px;
    margin-inline: auto;

    font-size: clamp(2.1rem,5vw,4.3rem);
}

/* USE THIS DECLARATION IN ORDER TO GIVE A DIFFERENT LEAD (DECLARED ON COMMON CSS) */
.usecase-intro .lead {
    max-width: 680px;
    margin: 24px auto 0;
}

.usecase-intro .highlight-box {
    max-width: 700px;
    margin: 40px auto 0;
    text-align: left;
}

/* Primary button is a common component - juste change the margin */
.usecase-intro .primary-button {
    margin-top: 32px;
}

/* ============================================================
   Use case compatible trackers / device (generic: tag, hearing,
   etc.)
   ============================================================ */
.usecase-compatible-devices,
.usecase-compatible-trackers {
    display: grid;
    gap: 16px;    
    margin-top: 32px;
}

/* Define one card with one brand and one or more models */
.usecase-compatible-device,
.usecase-compatible-tracker {
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.usecase-compatible-device p,
.usecase-compatible-tracker p {
    margin: 4px 0 0;
}

/* Brand and the website's link on one line */
.usecase-compatible-device-header,
.usecase-compatible-tracker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
/* Not used because of rights */
.usecase-compatible-device-logo,
.usecase-compatible-tracker-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Name of the brand */
.usecase-compatible-device-name,
.usecase-compatible-tracker-name {
    font-weight: 600;
}

/* Link to the brand's website */
.usecase-compatible-device-link,
.usecase-compatible-tracker-link {
    flex-shrink: 0;
}

/* Model(s) of the brand */
.usecase-compatible-device-models,
.usecase-compatible-tracker-models {
    margin-top: 16px;
}

/* Model of the brand */
.usecase-compatible-device-model,
.usecase-compatible-tracker-model {
    display: grid;
    grid-template-columns: 200px 1fr; /* First column width fixed (200px) makes a good alignement for the text of the status */
    column-gap: 24px;
    align-items: center;
    padding: 6px 0;
}

/* Status of the model: tested or not tested */
.usecase-compatible-device-status,
.usecase-compatible-tracker-status {
    text-align: left; /* Do not use min-width in this class, adjust the size of the model on 'grid-template-columns' */
    font-size: .82rem;
    color: var(--muted);
}

/* Status of the model: tested */
.usecase-compatible-device-status--tested,
.usecase-compatible-tracker-status--tested {
    color: var(--muted);
    font-weight: 600;
}

/* Status of the model: not tested */
.usecase-compatible-device-status--not-tested,
.usecase-compatible-tracker-status--not-tested {
    color: var(--muted);
}

/* ============================================================
   Use case topic (grid)
   ============================================================ */
.usecase-topic {
    margin-top: 32px;
}

.usecase-topic-header {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: start;
}

.usecase-topic-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-top: 2px; /* To lower the icon */
}

.usecase-topic-header span {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;

    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.usecase-topic-header p {
    margin: 0;
}

.usecase-topic-content span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.usecase-topic-content p {
    margin: 0;
}

/* One image */
.usecase-topic-illustrations {
    display: grid;
    gap: 24px;
    width: calc(100% - 44px);
    margin: 32px 0 0 44px;
}

/* Max width when only one image */
/*.usecase-topic-illustrations:not(.usecase-topic-illustrations--two) */ 
.usecase-topic-illustrations--single {
}

/* Two images */
.usecase-topic-illustrations--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Three images */
.usecase-topic-illustrations--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.usecase-topic-illustration {
    min-width: 0;
    text-align: center;
    /*padding: 8px;*/
}

.usecase-topic-illustration-caption {
    margin-top: 12px;
}

.usecase-topic-illustration-caption strong {
    display: block;
    font-size: .95rem;
    font-weight: 600;
}

.usecase-topic-illustration-caption p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .9rem;
}

.usecase-topic-illustration img {
    display: block;
    width: auto;  /* Change the size of the image (SVG) instead of modifing this parameter */
    /*max-width: 360px;*/
    height: auto; /* Change the size of the image (SVG) instead of modifing this parameter */
    margin-inline: auto;
    border-radius: 16px;
    /*background-color: var(--surface-alt);*/
    box-shadow:
        8px 4px 18px rgba(0, 0, 0, 0.06);
}

/* See ".usecase-topic details" below */
/* See ".usecase-topic summary" below */
.usecase-topic details {
    margin-top: 14px;
    margin-left: 44px; /* align the text with the header (compensate the width of the icon) : 28px (icon) + 16px (column-gap) */
}

.usecase-topic details summary {
    padding: 6px 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.08rem;
    /*font-weight: 600;*/
    color: var(--muted);
}

.usecase-topic details p {
    /*margin: 4px 0 0;*/
    /*padding: 0 0 4px;*/
    color: var(--blue)
}

/* ============================================================
   Use case steps
   ============================================================ */
.usecase-steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 820px;
    margin-inline: auto;
}

/* ============================================================
   Use case step card
   ============================================================ */
.usecase-step {
    position: relative;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* ============================================================
   Step header
   ============================================================ */
.usecase-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px; /* 0.75rem */
    /* margin-bottom: 1rem; */
}

.usecase-step-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.usecase-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;

    /*min-width: 2rem;*/
    /*height: 2rem;*/
    
    border-radius: 50%; /* (900px) round */
    background: var(--blue-soft-background);

    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    
    color: var(--blue);
}

.usecase-step-icon {
    flex: 0 0 auto;
    width: 34px; /*2rem;*/
    height: 34px; /*2rem;*/
    object-fit: contain;
}

.usecase-step h3 {
    margin: 0;
}

/* ============================================================
   Step lead
   ============================================================ */
/* USE THIS DECLARATION IN ORDER TO GIVE A DIFFERENT LEAD (DECLARED ON COMMON CSS) */
/*.usecase-step .lead {*/
    /* Example */
    /* margin-top: 16px; */
/*}*/

/* ============================================================
   Step content
   ============================================================ */
.usecase-step-content {
    margin-top: 1rem;
}

.usecase-step-content p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Step note
   ============================================================ */
.usecase-step-note {
    /* parent box is a grid (not a flex-box) */

    /* insert any parameter to change the parent display */
    
    /*
    gap: 16px;
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: 16px;
    */ 
}

.usecase-step-note-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    align-self: flex-start;
}

.usecase-step-note-content span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
}

.usecase-step-note-content p {
    margin: 0;
}

/* CHECK */
/*.usecase-step-note.check {
    border-left: 3px solid var(--green);
    border-right: 3px solid var(--green);
}*/

/* TIP */
/*.usecase-step-note.tip {
    border-left: 3px solid var(--orange);
    border-right: 3px solid var(--orange);
}*/

/* WARNING */
/*.usecase-step-note.warning {
    border-left: 3px solid var(--red);
    border-right: 3px solid var(--red);
}*/

/* ============================================================
   Step image
   ============================================================ */
.usecase-step-image {
    margin-top: 1.5rem;
    text-align: center;
}

.usecase-step-image img {
    display: block;
    width: 40%; /* max 70% */
    height: auto;
    max-width: 520px;
    margin-inline: auto; /* margin: 32px auto 0 */
    border-radius: var(--radius);
}

.usecase-step-screenshot summary {
    list-style: none; /* Delete a default marker into a "summary" section */
    cursor: pointer;  /* Change the mouse cursor when over this item */
}

/* Delete the defaull marker for a "details" section */
.usecase-step-screenshot summary::-webkit-details-marker { 
    display: none;
}

.usecase-step-screenshot summary::after {
    content: "+";
    /* float: right; */ /* set the button to the right */
    color: var(--blue);
    font-size: 1.3rem;
    font-weight: 400;
}

.usecase-step-screenshot[open] summary::after { 
    content: "−"; 
}

.hide-label {
    display: none;
}

.usecase-step-screenshot[open] .show-label {
    display: none;
}

.usecase-step-screenshot[open] .hide-label {
    display: inline;
}

/* ============================================================
   Limitations
   ============================================================ */
.usecase-limitations {
    max-width: 820px;
    margin-inline: auto;
}

.usecase-limitations-content {
    max-width: 700px;
}

.usecase-limitations-content .usecase-topic-content {
    margin-bottom: 20px;
}

/* ============================================================
   Call To Action (CTA)
   ============================================================ */
.usecase-final-cta {
    position: relative;
    overflow: hidden;
    padding: 150px 24px 170px;
    text-align: center;
    background:
        /* Halo from bottom to top */
        radial-gradient(circle at 50% 100%,
            rgba(79,140,255,.32) 0,
            rgba(79,140,255,.17) 18%,
            rgba(79,140,255,.07) 38%,
            transparent 66%),
        var(--surface); /* v2 #fff; */
}

.usecase-final-cta .section-inner { position: relative; z-index: 1; }

.usecase-final-cta h2 {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   SECTION: FAQ AND CREDITS
   ============================================================ */
.usecase-credits-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.usecase-credits .lead {
    margin: 0;
    color: black;
    font-size: 1.08rem;
    /*font-weight: 600;*/
    color: var(--muted);
}

.usecase-compatible-devices .official-source,
.usecase-compatible-trackers .official-source,
.usecase-topic .official-source,
.usecase-credits .official-source {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.usecase-info,
.usecase-faq {
    border-top: 1px solid var(--line); 
}

.usecase-info details,
.usecase-faq details { 
    border-bottom: 1px solid var(--line);
}

.usecase-info details p,
.usecase-faq details p { 
    color: var(--blue);
}

.usecase-diagrams summary,
.usecase-compatible-devices-details summary,
.usecase-compatible-trackers-details summary,
.usecase-info summary,
.usecase-faq summary {
    padding: 25px 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.08rem;
    /*font-weight: 600;*/
    color: var(--muted);
}

.usecase-diagrams summary::-webkit-details-marker,
.usecase-compatible-devices-details summary::-webkit-details-marker,
.usecase-compatible-trackers-details summary::-webkit-details-marker,
.usecase-topic summary::-webkit-details-marker,
.usecase-info summary::-webkit-details-marker,
.usecase-faq summary::-webkit-details-marker { 
    display: none;
}

.usecase-diagrams summary::after,
.usecase-compatible-devices-details summary::after,
.usecase-compatible-trackers-details summary::after,
.usecase-topic summary::after,
.usecase-info summary::after,
.usecase-faq summary::after{
    content: "+";
    float: right;
    color: var(--blue);
    font-size: 1.3rem;
    font-weight: 400;
}

.usecase-diagrams details[open] summary::after,
.usecase-topic details[open] summary::after,
.usecase-info details[open] summary::after,
.usecase-faq details[open] summary::after { 
    content: "−"; 
}

.hide-label {
    display: none;
}

.usecase-diagrams[open] .show-label,
.usecase-compatible-devices-details[open] .show-label,
.usecase-compatible-trackers-details[open] .show-label {
    display: none;
}

.usecase-diagrams[open] .hide-label,
.usecase-compatible-devices-details[open] .hide-label,
.usecase-compatible-trackers-details[open] .hide-label {
    display: inline;
}

/* =========================================================
   RESPONSIVE @media
   ========================================================= */

/* ============================================================
   Tablet / small desktop
   ============================================================ */
@media (max-width: 900px) {

    .usecase-steps,
    .usecase-limitations {
        max-width: 620px;
    }
}


/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 600px) {
    .usecase-topic-illustrations--two {
        grid-template-columns: 1fr;
    }

    .usecase-topic-illustrations--three {
        grid-template-columns: 1fr;
    }

    .usecase-step {
        padding: 1.5rem;
    }

    .usecase-step-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .usecase-step-number,
    .usecase-step-icon {
        flex: 0 0 auto;
    }

    .usecase-step h3 {
        flex: 1 1 100%;
        margin-top: 0.25rem;
    }

    .usecase-step-image {
        width: 100%;
    }

    .usecase-compatible-device,
    .usecase-compatible-tracker {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

}