/* Fruit Hub Lazy Tabs + Home
   NOTE: No font-family set. Inherits GeneratePress / theme typography.
*/

:root {
   --fhl-border: #e6e9e6;
   --fhl-text: #101412;
   --fhl-muted: #5b645e;
   --fhl-soft: #f1f3f1;
   --fhl-accent: #2f6f4d;
   --fhl-accentsoft: #e8f0eb
}

.fhl-wrap,
.fhl-home {
   color: var(--fhl-text)
}

/* Hide page title when home shortcode is active */
.fhl-home~.fhl-home,
body:has(.fhl-home) .entry-title,
body:has(.fhl-home) .page-header {
   display: none
}

/* ===== Tabs ===== */
.fhl-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 12px;
   border: 1px solid var(--fhl-border);
   border-radius: 16px;
   background: transparent;
   margin: 0 0 0;
   max-height: 104px;
   overflow: hidden;
   position: relative;
   transition: max-height .3s ease
}

.fhl-tabs.is-expanded {
   max-height: 2000px
}

.fhl-tabs-toggle {
   display: none;
   justify-content: center;
   margin: 8px 0 12px
}

.fhl-tabs-toggle.is-visible {
   display: flex
}

.fhl-tabs-togglebtn {
   display: inline-block;
   padding: 4px 14px;
   border: 1px solid var(--fhl-border);
   border-radius: 999px;
   background: transparent;
   cursor: pointer;
   font-size: 11px;
   font-weight: 600;
   color: var(--fhl-muted);
   line-height: 1.4;
   transition: background .2s;
   user-select: none
}

.fhl-tabs-togglebtn:hover {
   background: var(--fhl-soft)
}

.fhl-tab {
   display: inline-block;
   padding: 8px 12px;
   border: 1px solid #b3b8b5;
   border-radius: 999px;
   background: transparent;
   cursor: pointer;
   font-weight: 750;
   color: var(--fhl-text);
   user-select: none;
   transition: background .15s
}

.fhl-tab:hover {
   background: var(--fhl-soft)
}

.fhl-tab.is-active {
   border-color: #111;
   background: #fff;
   color: var(--fhl-text)
}

.fhl-panel {
   border: 1px solid var(--fhl-border);
   border-radius: 16px;
   background: #fff;
   padding: 14px 12px 16px
}

.fhl-head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
   margin: 0 0 8px
}

.fhl-title {
   margin: 0;
   font-size: 18px;
   font-weight: 850
}

.fhl-viewall {
   font-size: 14px;
   color: #111;
   text-decoration: none
}

.fhl-viewall:hover {
   text-decoration: underline
}

.fhl-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 8px 0 12px
}

.fhl-chip {
   display: inline-block;
   padding: 6px 10px;
   border: 1px solid var(--fhl-border);
   border-radius: 999px;
   text-decoration: none;
   font-size: 13px;
   color: #111;
   background: transparent;
   cursor: pointer;
   user-select: none;
   transition: all .2s
}

.fhl-chip:hover {
   background: var(--fhl-soft)
}

.fhl-chip.is-active {
   background: #111;
   color: #fff;
   border-color: #111
}

.fhl-grid {
   display: grid;
   gap: 14px;
   grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media(max-width:900px) {
   .fhl-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}

@media(max-width:560px) {
   .fhl-grid {
      grid-template-columns: 1fr
   }
}

.fhl-card {
   border: 1px solid #eee;
   border-radius: 14px;
   overflow: hidden;
   background: #fff
}

.fhl-thumb {
   display: block
}

.fhl-thumb img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   display: block
}

.fhl-noimg {
   aspect-ratio: 16/9;
   background: #f2f2f2
}

.fhl-wrap .fhl-card-body {
   padding: 12px 14px 14px
}

.fhl-card h3 {
   margin: 0 0 6px;
   font-size: 15px;
   line-height: 1.35
}

.fhl-wrap .fhl-card-ex {
   margin: 0;
   color: rgba(16, 20, 18, .60);
   font-size: 13px;
   line-height: 1.45;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.fhl-card a {
   text-decoration: none;
   color: #111
}

.fhl-card a:hover {
   text-decoration: underline
}

.fhl-status {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   border: 1px dashed var(--fhl-border);
   border-radius: 14px;
   color: var(--fhl-muted);
   background: #fff
}

.fhl-spinner {
   width: 16px;
   height: 16px;
   border: 2px solid #ddd;
   border-top-color: #999;
   border-radius: 50%;
   animation: fhlspin .8s linear infinite
}

@keyframes fhlspin {
   to {
      transform: rotate(360deg)
   }
}

.fhl-more {
   display: flex;
   justify-content: center;
   margin-top: 14px
}

button.fhl-btn {
   border: 1px solid var(--fhl-border);
   background: #fff !important;
   color: var(--fhl-text) !important;
   border-radius: 12px;
   padding: 10px 14px;
   cursor: pointer;
   font-weight: 750
}

button.fhl-btn:hover {
   background: var(--fhl-soft)
}

button.fhl-btn:disabled {
   opacity: .55;
   cursor: not-allowed
}

/* ===== Home (flat, fast) ===== */
.fhl-home-nav {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(245, 246, 245, .88);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--fhl-border);
   margin: 0 0 18px
}

.fhl-home-navinner {
   max-width: 1180px;
   margin: 0 auto;
   padding: 10px 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px
}

.fhl-home-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   font-weight: 950;
   letter-spacing: -.2px
}

.fhl-home-mark {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--fhl-accent);
   display: inline-block
}

.fhl-home-menu {
   display: none;
   gap: 22px;
   font-size: 12px;
   font-weight: 850;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: rgba(16, 20, 18, .70)
}

.fhl-home-menu a {
   text-decoration: none;
   padding: 8px 6px;
   border-radius: 999px
}

.fhl-home-menu a:hover {
   background: rgba(16, 20, 18, .04);
   color: var(--fhl-text)
}

@media(min-width:860px) {
   .fhl-home-menu {
      display: flex
   }
}

.fhl-home-wrap {
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 14px 64px
}

/* Hero overlay */
.fhl-hero {
   position: relative;
   border-radius: 22px;
   overflow: hidden;
   border: 1px solid rgba(16, 20, 18, .08);
   box-shadow: 0 10px 30px rgba(16, 20, 18, .07);
   height: 330px;
   background: #dfe4e0
}

@media(min-width:900px) {
   .fhl-hero {
      height: 420px
   }
}

.fhl-hero-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.fhl-hero-ph {
   width: 100%;
   height: 100%;
   min-height: 200px;
   background: #cfd7d2
}

.fhl-hero-scrim {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .40)
}

.fhl-hero-content {
   position: absolute;
   inset: auto 0 0 0;
   padding: 18px 16px 16px;
   display: grid;
   gap: 10px;
   z-index: 2;
   max-width: 860px
}

@media(min-width:900px) {
   .fhl-hero-content {
      padding: 28px 26px 24px
   }
}

.fhl-hero-badge {
   width: max-content;
   display: inline-block;
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .16);
   color: #fff;
   font-size: 11px;
   font-weight: 950;
   letter-spacing: .12em;
   text-transform: uppercase
}

.fhl-hero-title {
   margin: 0;
   color: #fff;
   font-weight: 950;
   letter-spacing: -.5px;
   line-height: 1.08;
   font-size: 24px
}

@media(min-width:900px) {
   .fhl-hero-title {
      font-size: 38px
   }
}

.fhl-hero-sub {
   margin: 0;
   color: rgba(255, 255, 255, .82);
   max-width: 62ch;
   font-size: 15px
}

.fhl-hero-cta {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   align-items: center;
   margin-top: 6px
}

.fhl-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 12px 16px;
   border-radius: 12px;
   background: #fff;
   color: var(--fhl-text);
   text-decoration: none;
   font-weight: 950;
   letter-spacing: .12em;
   text-transform: uppercase;
   font-size: 12px;
   border: 1px solid rgba(255, 255, 255, .18)
}

.fhl-cta:hover {
   background: rgba(255, 255, 255, .92)
}

.fhl-cta-ghost {
   background: transparent;
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .24)
}

.fhl-cta-ghost:hover {
   background: rgba(255, 255, 255, .10)
}

/* Highlight strip */
.fhl-home-highlight {
   margin-top: 24px;
   padding: 32px 28px 28px;
   border: 1px solid var(--fhl-border);
   border-radius: 18px;
   background: linear-gradient(135deg, #f6f8f6 0%, #eef2ef 100%);
   display: grid;
   gap: 14px;
   text-align: center;
   justify-items: center
}

.fhl-home-kicker {
   font-size: 15px;
   font-weight: 950;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--fhl-accent)
}

.fhl-home-highlight-text {
   color: rgba(16, 20, 18, .85);
   max-width: 72ch;
   font-size: 20px;
   line-height: 1.6;
   font-weight: 400;
   font-style: italic
}

.fhl-home-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 10px;
   justify-content: center
}

.fhl-pill {
   display: inline-block;
   padding: 8px 10px;
   border-radius: 999px;
   background: var(--fhl-accentsoft);
   border: 1px solid rgba(47, 111, 77, .12);
   color: rgba(16, 20, 18, .80);
   font-size: 12px;
   font-weight: 900;
   text-decoration: none
}

.fhl-pill:hover {
   background: #dfe9e3
}

/* Main grid */
.fhl-home-main {
   margin-top: 18px;
   display: grid;
   grid-template-columns: 1fr;
   gap: 18px
}

@media(min-width:1020px) {
   .fhl-home-main {
      grid-template-columns: 1fr 360px;
      gap: 22px
   }
}

.fhl-home-sectionhead {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
   padding: 0 0 10px;
   border-bottom: 1px solid var(--fhl-border);
   margin: 0 0 14px
}

.fhl-home-h2 {
   margin: 0;
   font-size: 22px;
   font-weight: 950;
   letter-spacing: -.2px
}

.fhl-home-sort {
   font-size: 11px;
   font-weight: 950;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(16, 20, 18, .55);
   white-space: nowrap
}

.fhl-home-cards {
   display: grid;
   grid-template-columns: 1fr;
   gap: 14px
}

@media(min-width:700px) {
   .fhl-home-cards {
      grid-template-columns: 1fr 1fr
   }
}

.fhl-card {
   border: 1px solid rgba(16, 20, 18, .08);
   border-radius: 16px;
   overflow: hidden;
   background: transparent;
   display: flex;
   flex-direction: column
}

.fhl-card-media {
   display: block;
   position: relative;
   border-bottom: 1px solid rgba(16, 20, 18, .08);
   text-decoration: none
}

.fhl-card-img {
   width: 100%;
   height: auto;
   display: block
}

.fhl-card-ph {
   aspect-ratio: 4/3;
   background: #dfe4e0
}

.fhl-tag {
   position: absolute;
   left: 12px;
   top: 12px;
   padding: 6px 9px;
   border-radius: 999px;
   background: rgba(245, 246, 245, .92);
   border: 1px solid rgba(16, 20, 18, .10);
   font-size: 10px;
   font-weight: 950;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(16, 20, 18, .70)
}

.fhl-card-body {
   padding: 18px 22px 20px;
   flex: 1;
   display: flex;
   flex-direction: column
}

.fhl-card-title {
   margin: 0 0 6px;
   font-size: 19px;
   font-weight: 950;
   letter-spacing: -.2px;
   line-height: 1.2
}

.fhl-card-title a {
   text-decoration: none
}

.fhl-card-title a:hover {
   text-decoration: underline
}

.fhl-card-ex {
   margin: 0 0 10px;
   color: rgba(16, 20, 18, .66);
   font-size: 13px
}

.fhl-read {
   display: inline-block;
   font-size: 11px;
   font-weight: 950;
   letter-spacing: .18em;
   text-transform: uppercase;
   text-decoration: none;
   border-bottom: 2px solid rgba(47, 111, 77, .22);
   padding-bottom: 3px;
   color: rgba(16, 20, 18, .85);
   margin-top: auto
}

.fhl-read:hover {
   border-bottom-color: rgba(47, 111, 77, .55)
}

.fhl-home-empty {
   padding: 10px 0;
   color: rgba(16, 20, 18, .62)
}

/* Sidebar */
.fhl-home-side {
   display: grid;
   gap: 16px;
   align-content: start
}

@media(min-width:1020px) {
   .fhl-home-side {
      padding-left: 18px;
      border-left: 1px solid var(--fhl-border)
   }
}

.fhl-sideblock {
   padding: 0 0 14px;
   border-bottom: 1px solid var(--fhl-border)
}

.fhl-sideblock:last-child {
   border-bottom: 0;
   padding-bottom: 0
}

.fhl-sidehead {
   margin: 0 0 10px;
   font-size: 15px;
   font-weight: 950;
   letter-spacing: -.1px
}

.fhl-catlist {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 8px
}

.fhl-catitem {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 10px 10px;
   border-radius: 14px;
   border: 1px solid rgba(16, 20, 18, .06);
   text-decoration: none;
   background: transparent
}

.fhl-catitem:hover {
   background: rgba(16, 20, 18, .04);
   border-color: rgba(16, 20, 18, .12)
}

.fhl-catcount {
   font-size: 11px;
   font-weight: 950;
   padding: 5px 8px;
   border-radius: 999px;
   background: var(--fhl-accentsoft);
   color: rgba(16, 20, 18, .72);
   min-width: 38px;
   text-align: center;
   border: 1px solid rgba(47, 111, 77, .10)
}

.fhl-trend {
   display: grid;
   gap: 10px
}

.fhl-trend-row {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 10px 10px;
   border-radius: 14px;
   border: 1px solid rgba(16, 20, 18, .06);
   text-decoration: none;
   background: transparent
}

.fhl-trend-row:hover {
   background: rgba(16, 20, 18, .04);
   border-color: rgba(16, 20, 18, .12)
}

.fhl-mini {
   width: 52px;
   height: 52px;
   border-radius: 12px;
   overflow: hidden;
   flex: 0 0 auto;
   background: #dfe4e0;
   display: inline-flex;
   align-items: center;
   justify-content: center
}

.fhl-mini-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.fhl-mini-ph {
   width: 100%;
   height: 100%;
   background: #dfe4e0
}

.fhl-trend-txt {
   display: grid;
   gap: 2px
}

.fhl-trend-title {
   font-size: 13px;
   font-weight: 950;
   line-height: 1.2
}

.fhl-trend-meta {
   font-size: 10px;
   font-weight: 950;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: rgba(16, 20, 18, .55)
}