/* Kodansha Reader Benefits Page - Icon Styles
--------------------------------------------- */

/* Base styles for h3 with icons inside column blocks */
.page-id-22 .wp-block-column h3 {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Icon pseudo-element base */
.page-id-22 .wp-block-column h3::before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Icon 1: Enjoy more manga previews */
.page-id-22 .wp-block-columns:nth-of-type(1) .wp-block-column:nth-child(1) h3::before {
    background-image: url("data:image/svg+xml,%3csvg width='74' height='75' viewBox='0 0 74 75' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M4.11413 0.0078125H0V74.0078H73.9998V0.0078125H4.11413ZM38.9923 4.11405H66.984L38.9923 32.1136V4.11405ZM4.07387 6.98346L34.1022 37.0038L4.07387 67.0241V6.98346ZM34.9429 69.8936H6.94318L34.9429 41.894V69.8936ZM34.9429 32.1136L6.94318 4.11405H34.9429V32.1136ZM38.9844 69.8936V41.894L66.9757 69.8936H38.9844ZM69.8455 67.0322L39.825 37.0038L69.8455 6.98346V67.0322Z' fill='black'/%3e %3c/svg%3e");
}

/* Icon 2: Collect and read digital manga */
.page-id-22 .wp-block-columns:nth-of-type(1) .wp-block-column:nth-child(2) h3::before {
    background-image: url("data:image/svg+xml,%3csvg width='74' height='75' viewBox='0 0 74 75' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M4.10663 0H0V74.0081H74V0H4.10663ZM4.10663 4.11478H50.5163L64.9056 18.5041H4.10663V4.11478ZM69.9176 69.8935H4.10663V55.5041H69.9176V69.8935ZM69.9176 51.3975H4.10663V39.0453H69.9176V51.3975ZM69.9176 34.9468H4.10663V22.6107H69.9176V34.9468ZM69.9176 17.6553L56.3771 4.11478H69.9176V17.6553Z' fill='black'/%3e %3c/svg%3e");
}

/* Icon 3: Keep track of reading progress */
.page-id-22 .wp-block-columns:nth-of-type(2) .wp-block-column:nth-child(1) h3::before {
    background-image: url("data:image/svg+xml,%3csvg width='74' height='75' viewBox='0 0 74 75' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M4.11433 0.0078125H0V74.0078H74V0.0078125H4.11433ZM30.8366 4.12206H43.1632V32.0489L36.996 25.8816L30.8366 32.0489V4.12206ZM69.8938 69.9259H4.12222V4.12206H26.7547V41.9748L37.0283 31.6932L47.2614 41.9748V4.12206H69.8938V69.9259Z' fill='black'/%3e %3c/svg%3e");
}

/* Icon 4: Buy manga with greater ease */
.page-id-22 .wp-block-columns:nth-of-type(2) .wp-block-column:nth-child(2) h3::before {
    background-image: url("data:image/svg+xml,%3csvg width='74' height='75' viewBox='0 0 74 75' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M4.10668 0.0078125H0V74.0078H74V0.0078125H4.10668ZM4.10668 69.9017V55.7079L32.4729 69.8936L4.10668 69.9017ZM4.10668 51.1895V8.6486L32.4729 65.367L4.10668 51.1895ZM34.9711 61.3174L6.37001 4.12214H34.9711V61.3174ZM39.0131 4.12214H67.6138L39.0131 61.3174V4.12214ZM69.8771 69.9017H41.5109L69.8771 55.716V69.9017ZM69.8771 51.1895L41.5271 65.4075L69.8933 8.68896L69.8771 51.1895Z' fill='black'/%3e %3c/svg%3e");
}

/* Mobile: Stack icons above text */
@media (max-width: 768px) {
    .page-id-22 .wp-block-column h3 {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}