/* Homepage: "What WocaBee can do" tiles (index-capabilities.php) - soft cards in the colours of the app's new look
   (like the student / teacher dashboards): students = honey, teachers = blue.
   Sizes in px: the homepage changes the root font size per breakpoint (16px desktop .. 9-10px phones). */

/* own row of the intro grid (#article-group1, css/wocabee-new.css) under the text + buttons and the phone, full width;
   the phone no longer reaches into the "revolution" section below on desktop (it does on phones, see below) */
#article-group1 { grid-template-rows: auto auto auto auto; }
#article-group1 > #iphone-mockup-article { grid-row: 2 / 3; }
#article-group1 > #revolution-in-learning-article { grid-row: 4 / 5; }
#article-group1 > #revolution-in-learning-article #revolution-in-learning-article-header { margin-top: 64px; }

#wb-capabilities {
    grid-column: 2 / 4; grid-row: 3 / 4; margin: 40px 0 56px;
}
.wb-cap-title { margin: 0 0 18px; font-size: 30px; font-weight: 800; text-align: center; }


/* compact: the highlights as small tiles, 4 in a row (the last row centred) - icon on top, one line under it */
.wb-cap-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.wb-cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px 12px;
    background: #fff;
    border: 1px solid #EDE4D2;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(46, 42, 34, .06), 0 8px 20px -12px rgba(46, 42, 34, .18);
    transition: transform .15s ease, box-shadow .15s ease;
    flex: 0 1 calc(25% - 8px);
}
.wb-cap:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(46, 42, 34, .08), 0 12px 24px -12px rgba(46, 42, 34, .25); }

.wb-cap-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 19px;
}
.wb-cap-icon { background: #fff2e0; color: #e09310; }

.wb-cap-name { font-weight: 700; font-size: 15px; line-height: 1.25; color: #2e2a22; }

/* phones (one-column intro grid, css/wocabee-responsive-new.css): text + buttons -> tiles -> phone reaching into "revolution" */
@media (max-width: 576px) {
    #article-group1 { grid-template-rows: auto auto auto auto auto 10rem auto; }
    #wb-capabilities { grid-column: 1 / 2; grid-row: 4 / 5; margin: 32px 0 40px; padding: 0 15px; }
    #article-group1 > #iphone-mockup-article { grid-row: 5 / 7; }
    #article-group1 > #revolution-in-learning-article { grid-row: 6 / 8; }
    #article-group1 > #revolution-in-learning-article #revolution-in-learning-article-header { margin-top: 15rem; }
}

/* phones: 2 in a row */
@media (max-width: 575px) {
    .wb-cap-title { font-size: 22px; }
    .wb-cap-grid { gap: 8px; }
    .wb-cap { flex-basis: calc(50% - 4px); padding: 12px 8px 10px; }
}