/*
 * Tablet responsiveness — 768px to 991.98px (Bootstrap md band).
 * Overrides target the Bootstrap classes baked into live pages so fixes apply
 * without re-importing pages. Keep ALL rules inside the single media block.
 * Pattern PHP files carry the matching breakpoint-class corrections for future builds.
 */
@media (min-width: 768px) and (max-width: 991.98px) {

  html {
    overflow-x: clip;
  }

  /* Mirror mobile: WP forces .wp-block-column flex-basis:100% below 782px (all
     wp:columns stack on phones). Replicate that across the tablet band. */
  .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-columns>.wp-block-column {
    flex-basis: 100% !important;
  }

  /* Mirror mobile: Bootstrap col-md-* grids are full-width on phones. Stack them
     on tablet too. The footer rule below is more specific and overrides this to
     keep its own per-row count. (No leading type selector — Chromium drops a
     `main .row>[...]` rule here once the formatter strips the combinator spaces.) */
  .row>[class*="col-md-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* 2-up on tablet (per request): insights, more-insights & perspectives card
     grids. Scoped to .row.g-4 + col-md-6 so it excludes the MOM two-col (g-5)
     and the 3-icon grids (col-md-4), which stay stacked. Beats the stack rule. */
  .row.g-4>[class*="col-md-6"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* 2-up on tablet (per request): homepage "Old Way vs New Way" comparison. */
  .wp-block-columns.gx-4>.wp-block-column {
    flex: 1 1 0 !important;
  }

  .hero-split-cta-row>.order-md-1 {
    order: 2 !important;
  }

  .hero-split-cta-row>.order-md-2 {
    order: 1 !important;
  }

  .tecq-footer-grid>.row>[class*="col-md-"] {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
    margin-bottom: 1.5rem;
  }

  .d-xs-none {
    display: none;
  }

  /* Mirror mobile: globe.css hides .pin-card below 576px. Hide on tablet too
     (matches the mobile globe experience and clears the pins' edge overflow). */
  .pin-card {
    display: none !important;
  }

  /* Platform "integrates the lifecycle" section (cards flanking a center diagram):
     hide the center lifecycle diagram on tablet (the stacked layout has no place
     for it), and drop the desktop side-padding so the two card groups are equal. */
  .row.align-items-center>.col-lg-2 {
    display: none !important;
  }
  .row.align-items-center>[class*="col-lg-5"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    row-gap: 1rem !important;
  }
  /* Uniform 1rem gap between all four stacked cards: override the desktop gap-5
     within each group, zero the stray WP block top-margins, and match that 1rem
     between the two groups (margin below the first group). */
  .row.align-items-center>[class*="col-lg-5"]>* {
    margin-top: 0 !important;
  }
  .row.align-items-center>[class*="col-lg-5"]:first-child {
    margin-bottom: 1rem;
  }
  /* Digital-government numbered sections (.row.mt-30.mb-md-0): col-md-8 text +
     col-md-4 image. The global col-md stack collapses them to one column; restore
     the desktop two-column split so text and image sit side by side on tablet. */
  .row.mt-30.mb-md-0>.col-md-8 {
    flex: 0 0 66.6667% !important;
    max-width: 66.6667% !important;
  }
  .row.mt-30.mb-md-0>.col-md-4 {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
  /* Zoom the section image to fill its column height so it matches the text card
     beside it (it otherwise sits at natural height, leaving a gap below). */
  .row.mt-30.mb-md-0>.col-md-4 figure {
    height: 100% !important;
    margin: 0 !important;
  }
  .row.mt-30.mb-md-0>.col-md-4 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Reference dark-grey cards (.dark-grey-card.d-flex with a content image):
     bootstrap forces .dark-grey-card to flex-direction:column <=991.98px, stacking
     image over text. Put the image and text back into one row (image cover-fills
     the card height). Scoped with :has(figure.wp-block-image) so text-only dark
     cards — and cards that merely hold a small raw <img> icon (e.g. /careers) —
     stay untouched. The DG image is a DIRECT child figure; careers' icon cards
     nest their <img> inside a .bg-white wrapper, so :has(>figure.wp-block-image)
     (direct child) matches DG only. */
  .dark-grey-card.d-flex:has(>figure.wp-block-image) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    text-align: left !important;
  }
  .dark-grey-card.d-flex:has(>figure.wp-block-image)>* {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .dark-grey-card.d-flex:has(>figure.wp-block-image)>figure.wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* App-modernisation "Our approach": its second card group is col-md-5 (not
     col-lg-5) and carries a ps-md-5 inset to clear the now-hidden center diagram,
     leaving its cards 48px narrower than the first group's. Zero its side padding
     so all four cards share the same width (gap left untouched). */
  .row.align-items-center>[class*="col-md-5"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* flex-md-row utility = column on mobile, row at md+. Mirror mobile by stacking
     on tablet. For checklist items inside (icon + text), keep the icon inline to
     the left of the text and left-align them so all icons line up vertically. */
  .flex-md-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 1rem !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .flex-md-row>[class*="col-md-"] {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* The stack rule above is for the kaizen checklists (col-md-* children). Three
     other flex-md-row blocks (cloud-migration) need different tablet handling: */

  /* Azure logo row (heading + logo, justify-content-between): keep it stacked but
     center the items so the logo isn't left-aligned within the fit-content box. */
  .flex-md-row.justify-content-between {
    align-items: center !important;
  }

  /* "Migration Expertise" image strip (figure children): lay the four images out
     2-up across two rows instead of one stacked column. */
  .flex-md-row:has(figure.wp-block-image) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100% !important;
    column-gap: 1rem !important;
    row-gap: 1rem !important;
  }
  .flex-md-row:has(figure.wp-block-image)>* {
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
  }
  /* The four source images have slightly different aspect ratios, so at equal
     width their heights differ (one row ends up taller). Lock them all to 3:2
     (the majority ratio) and cover-crop so the grid is uniform. */
  .flex-md-row:has(figure.wp-block-image) img {
    aspect-ratio: 3 / 2 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Case Study row (image + text, flex-grow-1 children): two columns side by side
     rather than stacked. The children otherwise wrap (no shrink + the image's
     intrinsic width), so force no-wrap and equal halves from a 0 basis. */
  .flex-md-row:has(>.flex-grow-1) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .flex-md-row:has(>.flex-grow-1)>* {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  /* The image's object-fit-cover class is a no-op in this Bootstrap (5.0.2), so it
     defaults to fill and stretches in the now-narrow column. Force cover so it
     zoom-crops to the box instead of skewing. */
  .flex-md-row:has(>.flex-grow-1) img {
    object-fit: cover !important;
  }

  /* Consultancy Case Study (image wrapped in .img-zoom + text block): two columns
     side by side rather than stacked; the image cover-crops to fill its half. */
  .flex-md-row:has(>.img-zoom) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .flex-md-row:has(>.img-zoom)>* {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .flex-md-row:has(>.img-zoom) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Stacked .row column holding an .img-zoom.img-zoom-stretch (e.g. /careers
     "TOPPAN Ecquaria in MOM..." section): the stretch variant turns
     position:absolute at >=768px to fill its column, but the global tablet rule
     stacks the column full-width with no height to fill — collapsing the
     absolutely-positioned image to 0 so it vanishes. Revert to static (as on
     mobile) so the image flows back into the column at its natural height. */
  .row>[class*="col-"]>.img-zoom.img-zoom-stretch {
    position: static !important;
  }

  /* careers "Grooming the Next Generation" cards (.dark-grey-card d-flex
     flex-column): bootstrap centers the card text at <=991.98px, but the icon
     wrapper (a fit-content flex item) stays at flex-start, so the icon reads
     off-centre above the centered text. Center the icon wrapper to match. */
  .dark-grey-card.d-flex.flex-column>.bg-white {
    align-self: center !important;
  }

  /* careers "Talent Management Framework" section (.wp-block-group d-flex gap-30px
     w-1080 with a direct-child figure): the image carries a fixed inline width
     (525px), so on the narrower tablet it dominates the row / overflows. Keep the
     desktop image+text row but split it into equal halves and let the image
     cover-crop (zoom) to fill its half cleanly. */
  .wp-block-group.d-flex.gap-30px.w-1080:has(>figure.wp-block-image) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  .wp-block-group.d-flex.gap-30px.w-1080:has(>figure.wp-block-image)>* {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .wp-block-group.d-flex.gap-30px.w-1080:has(>figure.wp-block-image)>figure.wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Consultancy "Our Approach": the numbered timeline (.consultancy-steps) and the
     four text columns are separate sibling rows, so stacking detaches the numbers
     from their text. Hide the horizontal timeline and instead prefix each text
     block with its own number circle, restoring the 01 -> Strategic Framing pairing. */
  .wp-block-group:has(>.consultancy-steps)>.consultancy-steps {
    display: none !important;
  }
  .wp-block-group:has(>.consultancy-steps)>.wp-block-columns {
    counter-reset: step !important;
  }
  .wp-block-group:has(>.consultancy-steps)>.wp-block-columns>.wp-block-column {
    counter-increment: step !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 1rem !important;
    row-gap: 0.25rem !important;
    align-items: start !important;
  }
  .wp-block-group:has(>.consultancy-steps)>.wp-block-columns>.wp-block-column::before {
    content: "0" counter(step);
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bs-blue);
    color: var(--bs-black);
    font-weight: 700;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .wp-block-group:has(>.consultancy-steps)>.wp-block-columns>.wp-block-column>* {
    grid-column: 2 !important;
  }

  /* Capability cards marked `.left` should have left-aligned content (the class
     intends it). Enforce on tablet: left-align headings and bullet lists so the
     headings sit left and short list items (e.g. "Digital Identity Management")
     no longer look indented from being centered. */
  .dark-grey-card.left h4 {
    text-align: left !important;
  }
  .dark-grey-card.left .wp-block-list {
    text-align: left !important;
  }

  /* EGP alternating image/text sections (.align-items-center.g-1 columns): the
     desktop alternates image-left / text-left for visual variety, so once stacked
     some sections read image-first and others text-first. Force a consistent
     heading→image order for every section by pushing the image column after the
     text one. (:has guards to the column that actually holds the figure.) */
  .wp-block-columns.align-items-center.g-1>.wp-block-column:has(figure.wp-block-image),
  .wp-block-columns.align-items-center.g-2>.wp-block-column:has(figure.wp-block-image) {
    order: 2 !important;
  }

  /* An alignfull section without the w-1080 constraint breaks out full-width while
     the w-1080 sections/cards above stay inset. Inset the unconstrained ones to
     match (24px), without touching w-1080 sections (so cards keep their position). */
  .alignfull.has-global-padding:not(.w-1080) {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ---- ADLC page (tablet) ---- */

  /* #1 Principle cards (.dark-grey-card.black-grad): bootstrap.toppan centers all
     .dark-grey-card content at <=991.98px, which centers the bullet lists so the
     "Every ..." items start at different x. Left-align the lists so the bullets
     line up (headings/intro/conclusion paragraphs stay centered). */
  .dark-grey-card.black-grad .wp-block-list {
    text-align: left !important;
  }
  /* ...and left-align the blue conclusion line so it follows the (now left-aligned)
     list above it instead of sitting centered. */
  .dark-grey-card.black-grad p.text-blue {
    text-align: left !important;
  }

  /* #2 Core Principles images: each image shares a space-between flex group with a
     card; once the group wraps, the image drops to its own line flush-left. Auto
     side-margins center it on that line (no effect while it sits inline beside the card). */
  .wp-block-group.is-content-justification-space-between:has(figure.wp-block-image)>figure.wp-block-image {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* #3 "Agentic AI Architecture" layered section (Human in the Loop): a col-md-9
     stack of text+image layers beside a col-md-3 "Harness" rail.
     (a) Stack the two so the Harness rail drops below the layers, centered. */
  .wp-block-group.w-1080.align-items-start.is-nowrap {
    flex-direction: column !important;
    align-items: center !important;
  }
  .wp-block-group.w-1080.align-items-start.is-nowrap>.col-md-9 {
    width: 100% !important;
  }
  /* The Harness rail is a narrow col-md-2 sidebar; below the layers it has room,
     so size it to its content (pills regain their natural width) and drop sticky
     so it sits in flow. The outer align-items:center centers it. */
  .wp-block-group.w-1080.align-items-start.is-nowrap [class*="sticky-middle"] {
    width: fit-content !important;
    max-width: 100% !important;
    position: static !important;
  }
  /* Center the "Harness" icon + label above the pills (its own row, not a pill). */
  .wp-block-group.w-1080.align-items-start.is-nowrap [class*="sticky-middle"]>:not(.blue-glow-card) {
    align-self: center !important;
  }
  /* (b) Keep each layer's text + image side by side. The two columns carry mixed
     classes (col-md-5/col-md-6 plus a col-12 that forces 100% width), so target
     both direct children of the layer and make them equal flex halves on one row
     (without this the text keeps col-12's full width and the image collapses). */
  .wp-block-group.w-1080.align-items-start.is-nowrap .col-md-9>.wp-block-group {
    flex-wrap: nowrap !important;
  }
  .wp-block-group.w-1080.align-items-start.is-nowrap .col-md-9>.wp-block-group>* {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* #4 "The future of software" checklist: three col-md-4 items. Go 2-up with the
     checkmark stacked above its text, so they split across two rows — two on the
     first, the third wrapping onto a second row that the row's centered justify
     keeps centered. (Zero the desktop ps-5 indent so each item centers cleanly.) */
  .wp-block-group.row.w-100.mt-30.gap-md-0 {
    justify-content: center !important;
  }
  .wp-block-group.row.w-100.mt-30.gap-md-0>[class*="col-md-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* #5 "This is TOPPAN Ecquaria's ADLC": three image cards, 2-up on tablet. Scoped
     to g-2 columns that are NOT align-items-center (those are the EGP/EIC image+text
     rows, which must stay stacked) and NOT a Bootstrap .row — the ADLC card block is
     a plain wp:columns, whereas the devsecops .row.g-2 sections (incl. the "Day 2
     Operations" image+text) must keep the global full-width stack so their image
     isn't squeezed to half width. 24px gutter -> subtract 12px per column. */
  .wp-block-columns.g-2:not(.align-items-center):not(.row) {
    justify-content: center !important;
  }
  .wp-block-columns.g-2:not(.align-items-center):not(.row)>.wp-block-column {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }

  /* about-toppan-ecquaria "From Vision to System": three image+caption columns.
     Stacked 1-per-row by the global column rule; lay them 2-up with the third
     wrapping to a centered second row. Scoped to the columns block whose columns
     hold the rounded-3 mb-3 cone images (unique to this section). 24px gutter. */
  .wp-block-columns:has(>.wp-block-column>figure.wp-block-image.rounded-3.mb-3) {
    justify-content: center !important;
  }
  .wp-block-columns:has(>.wp-block-column>figure.wp-block-image.rounded-3.mb-3)>.wp-block-column {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    text-align: center !important;
  }

  /* about-toppan-ecquaria "Our Role in the AI Era" card: three icon+text rows.
     The long third item ("Offer structured development...") wraps and, with the
     text centered, leaves the left-aligned icon looking stranded. Stack every row
     in this card (icon centered on top, caption below) so it reads cleanly. Scoped
     to .mt-30 which uniquely picks this card (the "Designing..." card lacks it). */
  .dark-grey-card.black-grad.mt-30 .wp-block-group.is-nowrap {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* partners "Our Partner Ecosystem" + "Working as a coordinated system": each
     image carries a hard-coded pixel width (461px / 525px), so once its column
     stacks full-width the image stays small and left-aligned, leaving empty space.
     Let it fill the column width (height auto keeps native aspect, no crop).
     Scoped via the distinctive sibling in each section (.blue-glow-card cards /
     the .id-circle-wrap diagram) so only these two images are affected. */
  .wp-block-columns:has(.blue-glow-card) figure.wp-block-image img,
  .wp-block-columns:has(.id-circle-wrap) figure.wp-block-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* trust-and-compliance "Our List of Credentials": the logo rows (3-up ISO logos
     and 2-up dptm/bizSAFE) are small and fit fine at tablet width, so the desktop
     side-by-side layout is preferred. Opt these columns out of the global stacking
     rule and restore the desktop equal-column behaviour. Scoped to the credential
     logo columns via the .no-zoom logo figures. */
  .wp-block-columns:has(figure.wp-block-image.no-zoom) {
    flex-wrap: nowrap !important;
  }
  .wp-block-columns:has(figure.wp-block-image.no-zoom)>.wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1 !important;
  }
  /* Caption under each credential logo: the check + text sit in a nowrap row
     (check left of text). Stack them so the green check sits above its text,
     centered under the (already centered) logo. */
  .wp-block-columns:has(figure.wp-block-image.no-zoom) .wp-block-group.is-nowrap {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* ISO IEC logo caption: "ISO IEC 27018 2019" should sit on its own line. The
     authored <br> carries .d-xs-none, which the tablet rule above hides — re-show
     it inside the credential logos so the caption breaks onto a second line. */
  .wp-block-columns:has(figure.wp-block-image.no-zoom) br.d-xs-none {
    display: inline !important;
  }
}