Simplify HTML in proposal/debates recommendations

This way it's going to be easier to style the link on focus, since
styles like `box-shadow` weren't working properly when we had an inline
link with block elements inside, and adding the `display: inline-block`
element to the link didn't play well with the layout we were using for
the recommendations.

We're also fixing the focus outline on recommendations, which didn't
look properly because of the border added with:

```
.recommended-index {
  // (...)
  @include full-width-border(top, 1px solid #fafafa);
}
```

The border was on top of the outline, breaking it. Increasing the
`z-index` of the element containing the outline solves the issue.

In a similar way, we're making sure the button to hide recommendations
stays visible so it's easier to click it.

app/assets/stylesheets/budgets/groups_and_headings.scss

@@ -9,13 +9,13 @@
 
   .heading {
     @include brand-color;
+    @include card;
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     margin-bottom: $line-height / 2;
     margin-top: $line-height / 4;
     padding: $line-height / 2;
-    position: relative;
     width: 100%;
 
     @include breakpoint(medium) {
@@ -26,31 +26,9 @@
       width: calc(100% / 6 - #{$spacing});
     }
 
-    &:focus-within {
-      outline: $outline-focus;
-
-      a:focus {
-        outline: none;
-      }
-    }
-
     a {
       font-weight: bold;
 
-      &::after,
-      &::before {
-        bottom: 0;
-        content: "";
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-
       &:hover::before {
         background: $light;
         z-index: -1;

app/assets/stylesheets/layout.scss

@@ -1986,11 +1986,13 @@ table {
   }
 
   .recommendation {
+    @include card;
     background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
     margin-bottom: $line-height / 4;
     padding: $line-height / 2;
+    z-index: 1;
 
     &:hover {
       box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
@@ -2003,6 +2005,7 @@ table {
   position: absolute;
   right: 12px;
   top: -18px;
+  z-index: 2;
 }
 
 // 20. Documents

app/assets/stylesheets/mixins/links.scss

@@ -0,0 +1,27 @@
+@mixin card {
+  position: relative;
+
+  &:focus-within {
+    outline: $outline-focus;
+
+    a:focus {
+      outline: none;
+    }
+  }
+
+  a {
+    &::after,
+    &::before {
+      bottom: 0;
+      content: "";
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

app/views/shared/_recommended_index.html.erb

@@ -18,11 +18,9 @@
 
       <% recommended.each_with_index do |recommended, index| %>
         <div class="small-12 medium-6 large-4 column end">
-          <%= link_to recommended_path(recommended) do %>
-            <div class="recommendation" data-equalizer-watch>
-              <h3><%= recommended.title %></h3>
-            </div>
-          <% end %>
+          <div class="recommendation" data-equalizer-watch>
+            <h3><%= link_to recommended.title, recommended_path(recommended) %></h3>
+          </div>
         </div>
       <% end %>