/* Styles for get products and services

   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */


/* ==========================================================================
   site setup
   ========================================================================== */
body {
    color: #222;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

section, main header, main footer { padding: 0 2.5rem; }
.inner {
    font-size: 1rem;
    margin: 0 auto;
    max-width: 62.5rem;
}

main h2, main h3 { font-weight: 600; }
main h2 { font-size: 1.375rem; margin-bottom: 2rem; }
main h3 { font-size: 1.125rem; }

main a { color: #dd1100; }
main a:hover, main a:active { color: #f57300; }
main h2 a, main h3 a { color: #222; }



/* ==========================================================================
   site license stripe
   ========================================================================== */
#benefits { margin-bottom: -0.75rem; }
#benefits .inner { padding-top: 2.25rem; }
#stripe {
    background: #ddd;
    border: 1px solid #c4c4c4;
    padding: 1rem;
}
#stripe a {
    color: #222;
    display: block;
    font-size: 1.175rem;
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
    width: 100%;
}
#stripe .name {
    color: #fb2025;
    display: inline-block;
    margin: .25rem 0 0 0;
    padding-left: 2rem;
    position: relative;
}
#stripe .name img {
    left: 0;
    position: absolute;
    top: -.25rem;
}
#stripe .no-longer-white {
    display: inline-block;
    margin: 0 .25rem 0 0;
    white-space: nowrap;
}
#stripe .check {
    display: inline-block;
    margin: .25rem 0;
    white-space: nowrap;
}
#stripe a:focus .check,
#stripe a:hover .check { color: #f57300; }



/* ==========================================================================
   intro
   ========================================================================== */
#intro .inner { padding-top: 4.5rem; }
#intro h1 {
    font-size: 2.75rem;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
}
#intro p { 
    font-size: 1.25rem;
    font-weight: 300; 
    line-height: 1.5;
}
#intro p a { font-weight: 400; }



/* ==========================================================================
   products
   ========================================================================== */
#products .inner { padding-top: 2.75rem; }

/*basic*/
.product { 
    margin-bottom: 1.875rem; 
}

.fixed-height { 
    height: 4rem;
}

.product .mini-t .icon {
    background-position: 0 0.25rem;
    background-repeat: no-repeat;
    background-size: 3rem;
    height: 4rem;
    width: 4rem;
}
.product#wolfram-one .mini-t .icon { background-image: url('/get-products-services/img/icon-wolfram-one.png'); }
.product#mathematica .mini-t .icon { background-image: url('/get-products-services/img/icon-mathematica.png'); }
.product#mathematica-online .mini-t .icon { background-image: url('/get-products-services/img/icon-mathematica-online.png'); }
.product#system-modeler .mini-t .icon { background-image: url('/get-products-services/img/icon-system-modeler.png'); }
.product#finance-platform .mini-t .icon { background-image: url('/get-products-services/img/icon-finance-platform.png'); }
.product#notebook-assistant-llm-kit .mini-t .icon { background-image: url('/get-products-services/img/icon-notebook-assistant-llm-kit.svg'); }

.product#wolfram-alpha .mini-t .icon { background-image: url('/get-products-services/img/icon-wolfram-alpha.png'); }
.product#wolfram-alpha-notebook-edition .mini-t .icon { background-image: url('/get-products-services/img/icon-wolfram-alpha-notebook-edition.png'); }
/**/
.product#wolfram-programming-lab .mini-t .icon { background-image: url('/get-products-services/img/icon-wolfram-programming-lab.png'); }
.product#wolfram-player .mini-t .icon { background-image: url('/get-products-services/img/icon-wolfram-player.png'); }
.product#wolfram-engine .mini-t .icon { background-image: url('/get-products-services/img/icon-wolfram-engine.png'); }
.product#wolfram-script .mini-t .icon { background-image: url('/get-products-services/img/icon-wolfram-script.png'); }
.product#wolfram-workbench .mini-t .icon { background-image: url('/get-products-services/img/icon-wolfram-workbench.png'); }
.product#grid-mathematica .mini-t .icon { background-image: url('/get-products-services/img/icon-grid-mathematica.png'); }
.product#web-mathematica .mini-t .icon { background-image: url('/get-products-services/img/icon-web-mathematica.png'); }
.product#mathematica-add-ons .mini-t .icon { background-image: url('/get-products-services/img/icon-mathematica-add-ons.png'); background-size: 3.4375rem; }



.product .mini-t .text { padding-right: 1.25rem; }
.product h3 { padding-top: 0.5rem; }
.product .sep { display: inline-block; margin: 0 0.25rem; }

/*featured*/
.featured { 
    display: grid;
    padding-bottom:  2.75rem; 
    grid-gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

.featured.items-1 { grid-template-columns: 1fr; }
.featured.items-2, 
.featured.items-4 { grid-template-columns: repeat(2, 1fr); }
.featured.items-3 { grid-template-columns: repeat(3, 1fr); }

.featured .product { 
    background: #f4f4f4; 
    border: 1px solid #e0e0e0;
    padding: 0.875rem 0 1.25rem 1.25rem;
    margin: 0;
}

.featured h3 { font-size: 1.25rem; padding-top: 0.375rem; }
.featured .sep { display: none; }
.featured .description {
    line-height: 1.625rem;
}
.featured .description p + p { margin-top: 0.375rem; }
.featured .links { 
    display: flex;
    flex-wrap: wrap;
    line-height: 1.75rem;
}
.featured .extra-links { margin-top: 0.5rem; }
.featured .links a {
    background: #dd1100;
    color: #fff;
    font-weight: 600;
    margin-right: 1rem;
    padding: 0.125rem 1.5rem 0.25rem;
    margin-top: .75rem;
}
.featured .links a:hover { background: #f57300; }


/* ==========================================================================
   services/solutions
   ========================================================================== */
#services-solutions .inner { 
    border: solid #ddd;
    border-width: 1px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 0.625rem;
    padding-bottom: 2rem; 
    padding-top: 2rem; 
}

#the-solutions { 
    border-right: 1px solid #ddd; 
    padding-right: 2.375rem;
}
#the-solutions h2 { margin-top: -0.375rem; }
#the-solutions li { 
    font-size: 1.125rem; 
    font-weight: 600; 
    padding-bottom: 1.25rem; 
}
#the-solutions li:last-child { padding-bottom: 2rem; }
#the-solutions li a { color: #222; }
#the-solutions li.highlight span { 
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    display: block;
    margin: calc(-0.375rem - 2px) calc(-0.75rem - 2px);
    padding: 0.375rem 0.75rem;
}
#the-solutions li.highlight b {
    font-size: 1rem;
    font-weight: normal;
}

#the-consulting { 
    background: #f1f6fa; 
    border: 1px solid #ddd;
    margin-left: 2.375rem;
    padding: 1.5625rem;
}
#the-consulting img { display: block; margin: 0 auto; width: 100%; }
#the-consulting li {
    display: inline;
    font-size: 0.875rem;
    padding: 0 0.125rem 0 0.5rem;
    position: relative;
} 
#the-consulting li:before {
    color: #3b80bf;
    content: '\25AA';
    margin-left: -0.5rem;
    position: absolute;
    top: 0;
}
#the-consulting p { font-size: 1.0625rem; }
#the-consulting ._blue-button {
    background: #3b80bf;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.875rem;
    padding: 0.25rem 0.65rem;
}
#the-consulting ._blue-button:hover { background: #306bb0; }



/* ==========================================================================
   more products
   ========================================================================== */
#more-products .inner { 
    padding-bottom: 5rem;
    padding-top: 2rem; 
}
#more-products p { margin-top: 0.5rem; }
#more-products h3 .gray { white-space: nowrap; }
#more-products p * {
    display: inline-block;
    padding: 0 2rem 0.5rem 0;
}



/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {}


/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    section, main header, main footer { padding: 0 1.25rem; }

    #benefits { margin-bottom: -1.75rem; }

    .featured,
    .featured.item-1,
    .featured:has(>div:nth-of-type(2)) { 
        grid-template-columns: repeat(2,1fr); 
    }
    .featured.items-3 > div:nth-of-type(3) {
        grid-column: 1 / -1;
    }

    #stripe .name { padding-left: 1.7rem; }
    #stripe .name img {
        height: auto;
        top: -.15rem;
        width: 18px;
    }
    #stripe a { font-size: 1.15rem; }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    .featured,
    .featured.item-1,
    .featured:has(>div:nth-of-type(2)) { 
        grid-template-columns: 1fr; 
    }

    #stripe { padding: .75rem; }
    #stripe .name { padding-left: 1.35rem; }
    #stripe .name img {
        height: auto;
        top: 0;
        width: 13px;
    }

    #services-solutions .inner {
        grid-template-columns: 1fr;
        padding-bottom: 0; 
    }
    #the-solutions { 
        border-bottom: 1px solid #ddd; 
        border-right: none; 
        padding-bottom: 2rem;
        padding-right: 0;
    }
    #the-consulting { 
        margin-left: 0;
        margin: 2rem 0;
    }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {}


/* printer styles
   ========================================================================== */
@media print {}