/* ==========================================================================
   MODULE: Icon Block

   3-column icon + label + description layout.
   Always 3 columns wide. Add up to 12 icons (4 rows of 3) — the grid
   wraps automatically, no extra markup needed.

   Structure per item:
   1. Icon image (left-aligned, max 80px tall)
   2. Title — Inter Semi Bold, body copy size (H5 style), heading colour
   3. Description — body copy rules

   ============================================================================
   WORDPRESS / ACF DEVELOPER NOTES
   ============================================================================

   STEP 1 — Copy icons to theme
   Copy the entire "Icon Aligned" folder to:
   /wp-content/themes/skedulo-1/assets/blog-icons/

   STEP 2 — Register ACF flexible content layout
   Add a layout called "icon_block" with these fields:

   Field 1: icon_items (Repeater — min 1, max 12)
     Sub-fields:
       - icon   (Select)  — see choices list below
       - title  (Text)
       - text   (Textarea)

   STEP 3 — ACF Select field choices
   In the ACF Select field for "icon", paste the following as the Choices
   (format: value : Label — one per line):

     Alert - worker : Alert - worker
     Alert : Alert
     Analyze : Analyze
     Appointments : Appointments
     Arrow ^ : Arrow ^
     Arrow _ : Arrow _
     Arrow _1 : Arrow _1
     Arrow down : Arrow down
     Auto dispatch : Auto dispatch
     Auto offer : Auto offer
     Automate : Automate
     Automation : Automation
     Availability : Availability
     Booking : Booking
     Broadcast : Broadcast
     Client : Client
     Cloud : Cloud
     Customer focus : Customer focus
     Customers : Customers
     Delivery : Delivery
     Developer : Developer
     Efficiency : Efficiency
     Eliminate paperwork : Eliminate paperwork
     Empower : Empower
     Exception : Exception
     Extensibility : Extensibility
     Flexible Working Enviroment : Flexible Working Environment
     Health : Health
     Insights : Insights
     Intelligence : Intelligence
     Knowledge Sharing : Knowledge Sharing
     Knowledge : Knowledge
     Manage employees : Manage employees
     Map : Map
     Match : Match
     Mobile messaging : Mobile messaging
     Mobile notification : Mobile notification
     New job : New job
     Notification : Notification
     One system : One system
     Optimize : Optimize
     Platform : Platform
     Reports : Reports
     Retention : Retention
     Right employee : Right employee
     Savings - GBP : Savings - GBP
     Savings - dollar : Savings - dollar
     Savings - euro : Savings - euro
     Scheduled Appointments : Scheduled Appointments
     Scheduling : Scheduling
     Security : Security
     Signature : Signature
     Skills : Skills
     Strategy : Strategy
     Survey : Survey
     Tags : Tags
     Text Fields : Text Fields
     Time slot : Time slot
     Time : Time
     Toggles : Toggles
     Variant62 : Variant62
     Workflows : Workflows

   STEP 4 — PHP template snippet
   In your ACF flexible content template file, output the icon block like this:

   <?php if( have_rows('icon_items') ): ?>
   <div class="skd-icon-grid">
     <?php while( have_rows('icon_items') ): the_row(); ?>
       <?php
         $icon  = get_sub_field('icon');
         $title = get_sub_field('title');
         $text  = get_sub_field('text');
         $src   = get_template_directory_uri() . '/assets/blog-icons/' . $icon . '.svg';
       ?>
       <div class="skd-icon-item">
         <img class="skd-icon-item__icon" src="<?php echo esc_url($src); ?>" alt="">
         <p class="skd-icon-item__title"><?php echo esc_html($title); ?></p>
         <p class="skd-icon-item__text"><?php echo esc_html($text); ?></p>
       </div>
     <?php endwhile; ?>
   </div>
   <?php endif; ?>

   To add a new icon in future: drop the SVG into /assets/blog-icons/ and
   add one new line to the ACF Select choices list.
   ========================================================================== */

.skd-blog-new .skd-module-icon-block {
  padding-top: 60px;
  padding-bottom: 0;
}

/* — Grid — 3 equal columns — */
.skd-blog-new .skd-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 48px;
}

/* — Single item — */
.skd-blog-new .skd-icon-item {
  display: flex;
  flex-direction: column;
}

/* — Icon — */
.skd-blog-new .skd-icon-item__icon {
  width: auto;
  height: 72px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 24px;
  border-radius: 0; /* icons never get corner radius */
}

/* Specificity fix: text-block.css sets .skd-module-text img { width:100%; height:auto }
   at (0,2,1) which beats the rule above at (0,2,0). Adding .skd-icon-item parent
   raises specificity to (0,3,0) to win cleanly — no !important needed. */
.skd-blog-new .skd-icon-item .skd-icon-item__icon {
  width: auto;
  max-width: 72px;
  height: 72px;
}

/* — Title — H5 style: Inter Semi Bold, 20px — */
.skd-blog-new .skd-icon-item__title {
  font-family: var(--skd-font-body);
  font-weight: var(--skd-fw-semibold);
  font-size: var(--skd-fs-body);
  line-height: var(--skd-lh-body);
  letter-spacing: var(--skd-ls-body);
  color: var(--skd-color-heading);
  margin: 0 0 4px 0;
}

/* — Description — body copy rules — */
.skd-blog-new .skd-icon-item__text {
  font-family: var(--skd-font-body);
  font-weight: var(--skd-fw-regular);
  font-size: var(--skd-fs-body);
  line-height: var(--skd-lh-body);
  letter-spacing: var(--skd-ls-body);
  color: var(--skd-color-text);
  margin: 0;
}

/* ── Responsive ── */
/* — 2-column variant — use when the block has exactly 2 items.
   Add skd-icon-grid--2col to the .skd-icon-grid div.
   ——————————————————————————————————————————————————— */
.skd-blog-new .skd-icon-grid.skd-icon-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
}

/* — Splitter variant — icon block sits between a heading and body copy.
   Add skd-module-icon-block--splitter to the outer .skd-block wrapper.
   Pattern:
     <div class="skd-block skd-module-text">                                        ← H2 only
     <div class="skd-block skd-module-icon-block skd-module-icon-block--splitter">  ← this
     <div class="skd-block skd-module-text" style="padding-top:0">                  ← body copy
   —————————————————————————————————————————————————————————————————————————————— */
.skd-blog-new .skd-module-icon-block.skd-module-icon-block--splitter {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .skd-blog-new .skd-icon-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px;
    row-gap: 40px;
  }
}

@media (max-width: 768px) {
  .skd-blog-new .skd-module-icon-block {
    padding-top: 40px;
  }
  .skd-blog-new .skd-icon-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 32px;
  }
  .skd-blog-new .skd-icon-item__icon {
    height: 56px;
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .skd-blog-new .skd-icon-grid {
    grid-template-columns: 1fr;
  }
}

/* .skd-blog-new .three-columns {
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0;
} */